Feature: Automated Expo PR Builds

.github/workflows/mobile.yml

@@ -86,11 +86,43 @@ jobs:
         working-directory: ./my_project/mobile
         run: npm install
 
+      - name: Set Variables
+        id: set-vars
+        run: |
+          echo "backend_url=${{ github.event.deployment_status.environment_url }}" >> $GITHUB_ENV
+          echo "PR_NUMBER=$(echo ${{ github.event.deployment_status.environment_url }} | grep -oP '(?<=pr-)\d+')" >> $GITHUB_ENV
+          echo "REPO_NAME=$(echo ${{ github.repository }} | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9._-]//g')" >> $GITHUB_ENV
+          echo "EXPO_CHANNEL=$(echo ${{ github.repository }}-$(echo ${{ github.event.deployment_status.environment_url }} | grep -oP '(?<=pr-)\d+') | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9._-]//g')" >> $GITHUB_ENV
       - name: 🚀 Publish preview
         working-directory: ./my_project/mobile
         run: |
-          eas update --branch="${{ github.event.deployment_status.environment_url }}" --non-interactive --auto
-          echo "${{ env.BACKEND_SERVER_URL }} and ${{ github.event.deployment_status.environment_url }}"
+          eas update --branch=$EXPO_CHANNEL --non-interactive --auto
         env:
           EXPO_PUBLIC_BACKEND_SERVER_URL: "${{ github.event.deployment_status.environment_url }}"
-          EXPO_PUBLIC_ROLLBAR_ACCESS_TOKEN: "1a19e5da05b2435b802d5a81aba2bbd7"
+          EXPO_PUBLIC_ROLLBAR_ACCESS_TOKEN: "1a19e5da05b2435b802d5a81aba2bbd7"
+
+      - name: Update EAS Config
+        working-directory: ./my_project/mobile
+        run: |
+            jq --arg pr_number "$PR_NUMBER" --arg expo_channel "$EXPO_CHANNEL" '.build["review_" + $pr_number] = {
+              "developmentClient": true,
+              "distribution": "internal",
+              "channel": $expo_channel,
+              "env": {
+                "BACKEND_SERVER_URL": "${{ github.event.deployment_status.environment_url }}",
+                "ROLLBAR_ACCESS_TOKEN": "1a19e5da05b2435b802d5a81aba2bbd7",
+                "SENTRY_DSN": "https://a7cea97f07ac42fa9e28800b037997c9@o4504899535962112.ingest.sentry.io/4504906332897280",
+              }
+            }' eas.json > tmp.$$.json && mv tmp.$$.json eas.json
+
+      - name: Display Updated EAS Config
+        working-directory: ./my_project/mobile
+        run: cat eas.json
+
+      # note: you will need to register your device first using eas device:create & eas credentials to test this  
+      - name: 🔨 Build & Update App
+        working-directory: ./my_project/mobile
+
+        # eas build --platform ios --profile review_${PR_NUMBER} && eas update --branch=$EXPO_CHANNEL --non-interactive --auto
+        run: |
+              eas build --platform ios --profile production && eas update --branch=production --non-interactive --auto

CONTRIBUTING.md

@@ -78,3 +78,25 @@ tox -e py -- -k test_default_configuration
 [`pytest-cookies`]: https://pypi.python.org/pypi/pytest-cookies/
 [`flake8`]: https://pypi.python.org/pypi/flake8/
 [`PyPI`]: https://pypi.python.org/pypi
+
+
+### Testing Review App Builds 
+
+Each build will first run `expo update` to create a testable version of your app in Expo Go for reviewers to test. Expo updates are typically quick and can allow testing of most functionality. When there is a need to test native code or React Native code that has not been ported to expo you will need to try out the development build. 
+
+Each push will also create a development build as well. This development build can be installed on any device and allows the user to test. 
+
+For iOS you will need to register your device and generate a new profile and then rebuild the app by commiting a change. 
+
+
+1. Visit the GH actions tag
+2. Copy the eas.json that was created by the build
+3. Paste it into your project 
+4. You will also need to refill the app.config.js
+    ```
+    <PATH_TO_SCRIPTS>/scripts/setup_mobile_config.sh <YOUR_PATH>/tn-spa-bootstrapper/{{cookiecutter.project_slug}}/clients/mobile/react-native/app.config.js <YOUR_PATH>/tn-spa-bootstrapper/resources/app.config.vars.txt
+    ```
+5. run eas device:create if you have never added your device before
+6. run eas credentials and select the new configuration for your device
+7. Push a change to trigger the build!
+

resources/app.config.vars.txt

@@ -3,6 +3,6 @@ REPLACE_WITH_EXPO_APP_NAME=tn mobile bootstrapper
 REPLACE_WITH_EXPO_APP_SLUG=tn-sample-app
 REPLACE_WITH_EXPO_OWNER=thinknimble-bootstrapper
 REPLACE_WITH_EXPO_APP_ID=ec1b86e2-2582-48cf-8a7a-c6d2772ba4f2
-REPLACE_WITH_SENTRY_ORG=tn-bootstrapper
+REPLACE_WITH_SENTRY_ORG=tn-spa
 REPLACE_WITH_IOS_BUNDLE_ID=org.thinknimble.expo.bootstrapper
-REPLACE_WITH_ANDROID_PACKAGE_ID=com.example.app
+REPLACE_WITH_ANDROID_PACKAGE_ID=com.example.app

resources/eas.vars.txt

@@ -14,5 +14,5 @@ REPLACE_WITH_APPSTORE_CONNECT_APP_NAME=TN Bootsrapper RN
 [email protected]
 REPLACE_WITH_APPLESTORE_CONNECT_ID=6446805695
 REPLACE_WITH_APPLE_TEAM_ID=6BNA6HFF6B
-REPLACE_WITH_REVIEW_APP_SENTRY_PROJECT_NAME=tn-bootsrapper-rn
+REPLACE_WITH_REVIEW_APP_SENTRY_PROJECT_NAME=tn-spa-staging
 

{{cookiecutter.project_slug}}/clients/mobile/react-native/Config.d.ts

@@ -6,5 +6,8 @@ declare const Config: {
   sentryDSN: string
   isExpoGo?: boolean
 }
-
+declare const vars :{
+  [key:string]: any
+}
 export default Config
+export { vars }

{{cookiecutter.project_slug}}/clients/mobile/react-native/Config.js

@@ -73,4 +73,13 @@ const ENV = () => {
 }
 
 const Config = { ...ENV() }
-export default Config
+export default Config
+
+export const vars = {
+  BACKEND_SERVER_URL,
+  SENTRY_DSN,
+  ROLLBAR_ACCESS_TOKEN,
+  backendServerUrl,
+  rollbarAccessToken,
+  sentryDSN,
+}

{{cookiecutter.project_slug}}/clients/mobile/react-native/README.md

@@ -133,7 +133,9 @@ Recreate the provisioning profile <- **this step is required in order for the us
 Rebuild the app <- **this step is required in order for the user to be able to install the app**
 
 
-You must run a first time production build to set up appstore connect keys to be managed by Expo
+You must run a first time production build, locally to set up appstore connect keys to be managed by Expo
+
+`eas build --profile production`
 
 
 **Google**

{{cookiecutter.project_slug}}/clients/mobile/react-native/eas.json

@@ -10,7 +10,6 @@
       "channel": "development",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_LOCAL_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "development",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_LOCAL_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_LOCAL_SENTRY_DSN>"
       }
@@ -21,9 +20,7 @@
       "channel": "review",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_REVIEW_APP_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "review",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_REVIEW_APP_ROLLBAR_TOKEN>",
-        "SENTRY_PROJECT_NAME": "<REPLACE_WITH_REVIEW_APP_SENTRY_PROJECT_NAME>",
         "SENTRY_DSN": "<REPLACE_WITH_REVIEW_APP_SENTRY_DSN>"
       }
     },
@@ -33,7 +30,6 @@
       "channel": "development",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_LOCAL_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "development",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_LOCAL_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_LOCAL_SENTRY_DSN>"
       },
@@ -46,7 +42,6 @@
       "channel": "staging",
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_STAGING_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "staging",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_STAGING_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_STAGING_SENTRY_DSN>"
       }
@@ -56,7 +51,6 @@
       "autoIncrement": true,
       "env": {
         "BACKEND_SERVER_URL": "<REPLACE_WITH_PRODUCTION_BACKEND_SERVER_URL>",
-        "BUILD_ENV": "production",
         "ROLLBAR_ACCESS_TOKEN": "<REPLACE_WITH_PRODUCTION_ROLLBAR_TOKEN>",
         "SENTRY_DSN": "<REPLACE_WITH_PRODUCTION_SENTRY_DSN>"
       }

{{cookiecutter.project_slug}}/clients/mobile/react-native/src/screens/main.tsx

@@ -1,6 +1,10 @@
 import { Dimensions, Image, StyleSheet, View } from 'react-native'
 import logo from '@assets/tn-logo.png'
 import { Text } from '@components/text'
+import { BButton } from '@components/Button'
+import { SheetManager } from 'react-native-actions-sheet'
+import { SHEET_NAMES } from '@components/sheets'
+import { vars } from '../../Config'
 
 const { height } = Dimensions.get('screen')
 
@@ -16,6 +20,14 @@ const styles = StyleSheet.create({
 })
 
 export const Main = () => {
+  const onOpenSheet = () => {
+    SheetManager.show(SHEET_NAMES.test, {
+      payload: {
+        input: JSON.stringify(vars),
+      },
+    })
+  }
+
   return (
     <View className="flex-grow items-center justify-center">
       <View className="items-center justify-center">
@@ -26,6 +38,7 @@ export const Main = () => {
           Welcome to my project
         </Text>
       </View>
+      <BButton label="Open sheet" onPress={onOpenSheet} variant="primary" />
     </View>
   )
 }