Add a React Native example app to the demo (#1781)

.gitignore

@@ -55,3 +55,6 @@ test/tracetesting/tracetesting-vars.yaml
 /src/paymentservice/demo.proto
 /src/shipping/proto/
 /src/currencyservice/proto
+
+# Android
+*.apk

.licenserc.json

@@ -45,6 +45,12 @@
         "src/featureflagservice/assets/vendor/",
         "src/featureflagservice/priv/",
         "src/productcatalogservice/genproto/",
+        "src/react-native-app/ios/Pods/",
+        "src/react-native-app/ios/build/",
+        "src/react-native-app/android/app/build/",
+        "src/react-native-app/android/.gradle/",
+        "src/react-native-app/.expo/",
+        "src/react-native-app/expo-env.d.ts",
         "src/recommendationservice/demo_pb2.py",
         "src/recommendationservice/demo_pb2_grpc.py",
         "internal/tools/"

CHANGELOG.md

@@ -46,6 +46,8 @@ the release.
   ([#1839](https://github.com/open-telemetry/opentelemetry-demo/pull/1839))
 * [shipping] rename shippingservice to shipping
   ([#1842](https://github.com/open-telemetry/opentelemetry-demo/pull/1842))
+* [react-native-app] Add React Native example app
+  ([#1781](https://github.com/open-telemetry/opentelemetry-demo/pull/1781))
 
 ## 1.12.0
 

CONTRIBUTING.md

@@ -103,6 +103,11 @@ documentation as well as the code. When making changes to any service or feature
 remember to find the related docs and update those as well. Most (but not all)
 documentation can be found on the OTel website under [Demo docs][docs].
 
+### Running the React Native example
+
+If you are interested in running the React Native example app in this repo please
+review [these instructions](src/react-native-app/README.md).
+
 ## Create Your First Pull Request
 
 ### How to Send Pull Requests

Makefile

@@ -3,7 +3,7 @@
 
 
 # All documents to be used in spell check.
-ALL_DOCS := $(shell find . -type f -name '*.md' -not -path './.github/*' -not -path '*/node_modules/*' -not -path '*/_build/*' -not -path '*/deps/*' | sort)
+ALL_DOCS := $(shell find . -type f -name '*.md' -not -path './.github/*' -not -path '*/node_modules/*' -not -path '*/_build/*' -not -path '*/deps/*' -not -path */Pods/* -not -path */.expo/* | sort)
 PWD := $(shell pwd)
 
 TOOLS_DIR := ./internal/tools
@@ -218,3 +218,6 @@ else
 	@echo "Please provide a service name using `service=[service name]` or `SERVICE=[service name]`"
 endif
 
+.PHONY: build-react-native-android
+build-react-native-android:
+	docker build -f src/react-native-app/android.Dockerfile --platform=linux/amd64 --output=. src/react-native-app

ide-gen-proto.sh

@@ -72,6 +72,7 @@ gen_proto_go checkoutservice
 # gen_proto_cpp currencyservice
 # gen_proto_ruby emailservice
 gen_proto_ts frontend
+gen_proto_ts react-native-app
 gen_proto_js paymentservice
 gen_proto_go productcatalogservice
 # gen_proto_php quote

src/react-native-app/.dockerignore

@@ -0,0 +1,6 @@
+node_modules/
+.expo/
+dist/
+android/build/
+ios/build/
+ios/Pods/

src/react-native-app/.env

@@ -0,0 +1,3 @@
+# https://docs.expo.dev/guides/environment-variables/
+
+EXPO_PUBLIC_FRONTEND_PROXY_PORT=8080

src/react-native-app/.eslintrc.js

@@ -0,0 +1,10 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+// https://docs.expo.dev/guides/using-eslint/
+module.exports = {
+  extends: ["expo", "prettier"],
+  plugins: ["prettier"],
+  rules: {
+    "prettier/prettier": "error",
+  },
+};

src/react-native-app/.gitignore

@@ -0,0 +1,22 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+pb/demo.proto
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
+

src/react-native-app/.prettierignore

@@ -0,0 +1 @@
+expo-env.d.ts

src/react-native-app/.ruby-version

@@ -0,0 +1 @@
+2.7.6

src/react-native-app/Gemfile

@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'cocoapods', '1.16.2'

src/react-native-app/Gemfile.lock

@@ -0,0 +1,114 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    CFPropertyList (3.0.7)
+      base64
+      nkf
+      rexml
+    activesupport (7.1.5.1)
+      base64
+      benchmark (>= 0.3)
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
+      minitest (>= 5.1)
+      mutex_m
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    algoliasearch (1.27.5)
+      httpclient (~> 2.8, >= 2.8.3)
+      json (>= 1.5.1)
+    atomos (0.1.3)
+    base64 (0.2.0)
+    benchmark (0.4.0)
+    bigdecimal (3.1.8)
+    claide (1.1.0)
+    cocoapods (1.16.2)
+      addressable (~> 2.8)
+      claide (>= 1.0.2, < 2.0)
+      cocoapods-core (= 1.16.2)
+      cocoapods-deintegrate (>= 1.0.3, < 2.0)
+      cocoapods-downloader (>= 2.1, < 3.0)
+      cocoapods-plugins (>= 1.0.0, < 2.0)
+      cocoapods-search (>= 1.0.0, < 2.0)
+      cocoapods-trunk (>= 1.6.0, < 2.0)
+      cocoapods-try (>= 1.1.0, < 2.0)
+      colored2 (~> 3.1)
+      escape (~> 0.0.4)
+      fourflusher (>= 2.3.0, < 3.0)
+      gh_inspector (~> 1.0)
+      molinillo (~> 0.8.0)
+      nap (~> 1.0)
+      ruby-macho (>= 2.3.0, < 3.0)
+      xcodeproj (>= 1.27.0, < 2.0)
+    cocoapods-core (1.16.2)
+      activesupport (>= 5.0, < 8)
+      addressable (~> 2.8)
+      algoliasearch (~> 1.0)
+      concurrent-ruby (~> 1.1)
+      fuzzy_match (~> 2.0.4)
+      nap (~> 1.0)
+      netrc (~> 0.11)
+      public_suffix (~> 4.0)
+      typhoeus (~> 1.0)
+    cocoapods-deintegrate (1.0.5)
+    cocoapods-downloader (2.1)
+    cocoapods-plugins (1.0.0)
+      nap
+    cocoapods-search (1.0.1)
+    cocoapods-trunk (1.6.0)
+      nap (>= 0.8, < 2.0)
+      netrc (~> 0.11)
+    cocoapods-try (1.2.0)
+    colored2 (3.1.2)
+    concurrent-ruby (1.3.4)
+    connection_pool (2.4.1)
+    drb (2.2.1)
+    escape (0.0.4)
+    ethon (0.16.0)
+      ffi (>= 1.15.0)
+    ffi (1.17.0)
+    fourflusher (2.3.1)
+    fuzzy_match (2.0.4)
+    gh_inspector (1.1.3)
+    httpclient (2.8.3)
+    i18n (1.14.6)
+      concurrent-ruby (~> 1.0)
+    json (2.9.1)
+    logger (1.6.3)
+    minitest (5.25.4)
+    molinillo (0.8.0)
+    mutex_m (0.3.0)
+    nanaimo (0.4.0)
+    nap (1.1.0)
+    netrc (0.11.0)
+    nkf (0.2.0)
+    public_suffix (4.0.7)
+    rexml (3.4.0)
+    ruby-macho (2.5.1)
+    securerandom (0.3.2)
+    typhoeus (1.4.1)
+      ethon (>= 0.9.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    xcodeproj (1.27.0)
+      CFPropertyList (>= 2.3.3, < 4.0)
+      atomos (~> 0.1.3)
+      claide (>= 1.0.2, < 2.0)
+      colored2 (~> 3.1)
+      nanaimo (~> 0.4.0)
+      rexml (>= 3.3.6, < 4.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  cocoapods (= 1.16.2)
+
+BUNDLED WITH
+   2.1.4

src/react-native-app/README.md

@@ -0,0 +1,150 @@
+# Example React Native app
+
+This was created using [`npx create-expo-app@latest`](https://reactnative.dev/docs/environment-setup#start-a-new-react-native-project-with-expo)
+
+Content was taken from the web app example in src/frontend and modified to work
+in a React Native environment.
+
+## Get started
+
+Start the OpenTelemetry demo from the root of this repo:
+
+```bash
+cd ../..
+make start # or start-minimal
+```
+
+## Building the app
+
+Unlike the other components under src/ which run within containers this
+app must be built and then run on a mobile simulator on your machine or a physical
+device. If this is your first time running a React Native app then in order to
+execute the steps under "Build on your host machine" you will need to setup your
+local environment for Android or iOS development or both following
+[this guide](https://reactnative.dev/docs/set-up-your-environment). Alternatively
+for Android you can instead follow the steps under "Build within a container" to
+leverage a container to build the app's apk for you.
+
+### Build on your host machine
+
+Build and run the React Native app for a given platform by navigating to this folder
+and running:
+
+```bash
+cd src/react-native-app
+npm install
+```
+
+To run on Android:
+
+```bash
+npm run android
+```
+
+Note that for the above command a server is also spun up to serve the JS bundle
+to the deployed app.
+
+To run on iOS you may find it cleanest to build through the XCode IDE. First spin
+up the react native dev server with the following (feel free to ignore the output
+commands referring to opening an iOS simulator, we'll do that directly through
+XCode in a later step):
+
+```bash
+npm run start
+```
+
+Then install the pods for the project:
+
+```bash
+cd ios
+pod install
+```
+
+Note that the above is the quickest way to get going but you may end up with
+slightly different versions of the Pods than what has been committed to this repo,
+in order to install the precise versions first setup [rbenv](https://github.com/rbenv/rbenv#installation)
+followed by:
+
+```bash
+rbenv install 2.7.6 # the version of ruby we've pinned for this app
+bundle install
+cd ios
+bundle exec pod install
+```
+
+Then open XCode, open this as an existing project by opening `src/react-native-app/ios/react-native-app.xcworkspace`
+then trigger the build by hitting the Play button or from the menu using Product->Run.
+
+Or alternatively build and run from the command-line:
+
+```bash
+npm run ios
+```
+
+Note that for the above command a server is also spun up to serve the JS bundle
+to the deployed apps.
+
+### Build within a container
+
+For Android builds you can produce an apk using Docker without requiring the dev
+tools to be installed on your host. From the project root run:
+
+```bash
+make build-react-native-android
+```
+
+Or directly from this folder using:
+
+```bash
+docker build -f android.Dockerfile --platform=linux/amd64 --output=. .
+```
+
+This will produce `react-native-app.apk` in the directory where you ran the command.
+If you have an Android emulator running on your machine then you can simply drag
+and drop this file onto the emulator's window in order to install it following
+[these steps](https://developer.android.com/studio/run/emulator-install-add-files).
+
+TODO: For a physical device you can install this by sending the apk file to your
+device, giving the "Install unknown apps" permission to the app you will be opening
+the file with, and then installing it. However this won't be able to hit the APIs
+because they are hard-coded to be localhost, need those to be configurable before
+this method would work.
+
+## Troubleshooting
+
+### iOS build issues
+
+If you see a build failure related to pods try forcing a clean install with and
+then attempt another build after:
+
+```bash
+  cd src/react-native-app/ios
+  rm Podfile.lock
+  pod cache clean --all
+  pod repo update --verbose
+  pod deintegrate
+  pod install --repo-update --verbose
+```
+
+If there is an error compiling or running the app try closing any open simulators
+and clearing all derived data:
+
+```bash
+rm -rf ~/Library/Developer/Xcode/DerivedData
+```
+
+### Android build issues
+
+Try stopping and cleaning local services (in case there are unknown issues related
+to the start of the app):
+
+```bash
+  cd src/react-native-app/android
+  ./gradlew --stop  // stop daemons
+  rm -rf ~/.gradle/caches/
+```
+
+### JS build issues
+
+Try removing the `src/react-native-app/node_modules/` folder and then re-run
+`npm install` from inside `src/react-native-app`.