Merge pull request #34 from TaitoUnited/chore/eas-env

Streamline EAS Update and EAS Build with EAS Environment Variables

.github/workflows/build-stag.yml → .github/workflows/build-dev.yml

@@ -1,6 +1,6 @@
-# Build the staging env app on EAS Cloud service.
-name: 'Build | Staging'
-run-name: Build | Staging (for ${{ inputs.platform }} on ${{ github.ref_name }})
+# Build the dev env app on EAS Cloud service.
+name: 'Build | Dev'
+run-name: Build | Dev (for ${{ inputs.platform }} on ${{ github.ref_name }})
 on:
   workflow_dispatch:
     inputs:
@@ -12,6 +12,7 @@ on:
           - android
           - all
         required: true
+        default: all
       email:
         type: choice
         description: Notify the client via email?
@@ -33,4 +34,4 @@ jobs:
           EXPO_TOKEN: ${{ secrets.EXPO_TOKEN }}
           platform: ${{ github.event.inputs.platform }}
           email: ${{ github.event.inputs.email }}
-          environment: stag
+          environment: dev

.github/workflows/pr-auto-comment.yml

@@ -39,7 +39,7 @@ jobs:
             >
             > Therefore, there is no need to manually initiate a build after merging to the **dev** branch.
             >
-            > Additionally, builds will automatically trigger when promoting changes to **test**, **stag**, and **prod**. 
+            > Additionally, builds will automatically trigger when promoting changes to **dev**, **test** and **prod**. 
             > 
             > For the prod branch, the build will also be automatically submitted to the app stores.
 

.github/workflows/update.yml

@@ -15,8 +15,8 @@ on:
         type: choice
         description: Which env to build for
         options:
+          - dev
           - test
-          - stag
           - prod
         required: true
         default: test
@@ -56,7 +56,16 @@ jobs:
         run: npm run i18n:extract && npm run i18n:compile
 
       - name: 🚀 Create update
-        run: eas update --channel ${{ inputs.environment }} --message ${{ inputs.ota-message }} --branch ${{ inputs.ota-branch }} --non-interactive
+        run: |
+          ENVIRONMENT="${{ inputs.environment }}"
+          if [ "$ENVIRONMENT" == "dev" ]; then
+            ENVIRONMENT="development"
+          elif [ "$ENVIRONMENT" == "test" ]; then
+            ENVIRONMENT="preview"
+          elif [ "$ENVIRONMENT" == "prod" ]; then
+            ENVIRONMENT="production"
+          fi
+          eas update --channel $ENVIRONMENT --message "${{ inputs.ota-message }}" --branch "${{ inputs.ota-branch }}" --environment "$ENVIRONMENT" --auto-submit --non-interactive
 
       - name: ✅ Notify slack success
         if: success()

.github/workflows/verify.yaml

@@ -1,7 +1,7 @@
 name: 'Verify'
 on:
   push:
-    branches: [dev, test, stag, prod]
+    branches: [dev, test, prod]
   pull_request:
     branches: [dev]
 jobs:
@@ -30,7 +30,7 @@ jobs:
       # Conditional step for checking translations
       - name: Check translations
         run: |
-          if [[ "${{ github.ref }}" == "refs/heads/prod" || "${{ github.ref }}" == "refs/heads/stag" ]]; then
+          if [[ "${{ github.ref }}" == "refs/heads/prod" ]]; then
             npm run i18n:compile:strict
           else
             npm run i18n:compile

.gitignore

@@ -63,6 +63,7 @@ src/locales/**/*.js
 
 .env.figma
 .env
+.env.local
 
 # Expo managed workflow
 .expo

README.md

@@ -47,7 +47,7 @@ Follow this [Publishing guide](/docs/PUBLISHING.md).
 If the app is customer facing and published to App Store or Google Play you should setup app reviews. This allows users to rate the app and give feedback. The reviews are then visible in the store and can be used to improve the app.
 
 1. Setup app reviews in App Store Connect and Google Play Console.
-2. Update the `(dev|test|stag|prod.config.ts` with the app store and google play urls. (only prod will allow you to actually rate the app, the rest is for testing purposes)
+2. Update the `(dev|test|prod.config.ts` with the app store and google play urls. (only prod will allow you to actually rate the app, the rest is for testing purposes)
 3. Mode the `StoreReview` component to a more appropriate place in your app.
 4. Make sure to collect the user feedback in the backend or have it sent to you via email or some other channel.
 
@@ -67,6 +67,7 @@ More information on how to setup app reviews can be found [here](https://docs.ex
 - [Localization](/docs/LOCALIZATION.md)
 - [PR Reviews](/docs/PR_REVIEWS.md)
 - [CICD](/docs/CICD.md)
+- [SECRETS](/docs/SECRETS.md)
 - [App Builds](/docs/BUILDS.md)
 - [Updates](/docs/UPDATES.md)
 - [Code Signing](/docs/CODE_SIGNING.md)

config/dev.config.ts

@@ -5,7 +5,7 @@ export const config: Config = {
   appEnv: 'dev',
   scheme: 'taito-template-dev',
   apiUrl: 'https://api.example.com',
-  appIdSuffix: '.dev', // NOTE: dev/test/stag share the same app id!
+  appIdSuffix: '.dev', // NOTE: dev/test share the same app id!
   iconImage: './src/design-system/assets/icon.png',
   adaptiveIcon: {
     foregroundImage: './src/design-system/assets/adaptive-icon.png',

config/test.config.ts

@@ -5,7 +5,7 @@ export const config: Config = {
   appEnv: 'test',
   scheme: 'taito-template-test',
   apiUrl: 'https://api.example.com',
-  appIdSuffix: '.dev', // NOTE: dev/test/stag share the same app id!
+  appIdSuffix: '.dev', // NOTE: dev/test share the same app id!
   iconImage: './src/design-system/assets/icon-test.png',
   adaptiveIcon: {
     foregroundImage: './src/design-system/assets/adaptive-icon-test.png',

config/types.ts

@@ -1,5 +1,5 @@
 export type Config = {
-  appEnv: 'dev' | 'test' | 'stag' | 'prod';
+  appEnv: 'dev' | 'test' | 'prod';
   scheme: string;
   apiUrl: string;
   appIdSuffix?: string;

config/utils.ts

@@ -1,21 +1,18 @@
 import { config as devConfig } from './dev.config';
-import { config as testConfig } from './test.config';
-import { config as stagConfig } from './stag.config';
 import { config as prodConfig } from './prod.config';
+import { config as testConfig } from './test.config';
 
 export function getConfig(env: string) {
   switch (env) {
     case 'dev':
       return devConfig;
     case 'test':
       return testConfig;
-    case 'stag':
-      return stagConfig;
     case 'prod':
       return prodConfig;
     default:
       throw new Error(
-        `Invalid app env: ${env}! Must be one of 'dev', 'test', 'stag' or 'prod'.`
+        `Invalid app env: ${env}! Must be one of 'dev', 'test' or 'prod'.`
       );
   }
 }

docs/BUILDS.md

@@ -1,6 +1,6 @@
 # Builds
 
-We use [Expo Application Services (EAS)](https://expo.dev/eas) to build the app. EAS enables us to seamlessly create builds for different environments, such as **dev**, **test**, **staging**, and **production**.
+We use [Expo Application Services (EAS)](https://expo.dev/eas) to build the app. EAS enables us to seamlessly create builds for different environments, such as **dev**, **test**, and **production**.
 
 Depending on your project’s needs, there are several ways to trigger the build process.
 
@@ -23,7 +23,7 @@ This script helps generate the necessary build command and triggers the build pr
 
 ## Manual GitHub Actions
 
-You can also trigger builds using **GitHub Actions** for the **Test**, **Staging**, and **Production** environments. To do so:
+You can also trigger builds using **GitHub Actions** for the **Development**, **Test** and **Production** environments. To do so:
 
 1. Navigate to the [GitHub Actions tab](https://github.com/TaitoUnited/react-native-template/actions).
 2. Select the appropriate workflow and click the _“Run workflow”_ button.
@@ -36,7 +36,7 @@ The GitHub Action workflows for building are located in `.github/workflows/build
 
 ## Automatic EAS Github Actions
 
-EAS also allows for automatic builds whenever code is merged into key branches (`dev`, `test`, `stag` or `prod`). This eliminates the need to manually trigger builds.
+EAS also allows for automatic builds whenever code is merged into key branches (`dev`, `test` or `prod`). This eliminates the need to manually trigger builds.
 
 > [!NOTE]
 > When code is merged into the **prod** branch, the build will automatically be submitted to the app stores (Google Play and Apple App Store).

docs/CICD.md

@@ -90,7 +90,7 @@ You can check the list of registered devices by running `eas device:list` to mak
 
 Once you have correctly added the devices to the team, you need to resign your latest build to include the new devices in the provisioning profile, so the app can be installed on those new devices.
 
-You can do it by running `eas build:resign --profile (test|stag|prod)`, select iOS, the relevant team and edit the devices selection. This will create a new build with the same credentials as the previous one but with the new devices added to the provisioning profile.
+You can do it by running `eas build:resign --profile (dev|test|prod)`, select iOS, the relevant team and edit the devices selection. This will create a new build with the same credentials as the previous one but with the new devices added to the provisioning profile.
 
 **Important**
 

docs/CODE_SIGNING.md

@@ -66,7 +66,7 @@ If you are working on a project that was started before 2024, you will need to m
 
 14. If you are using AppCenter, you need to update the branches to use the new certificates and provisioning profiles. If you haven't already, you can download the provisioning profile from the Apple Developer portal and the certificate from 1Password. The password should be there as well. Select your branch and click on the tool icon on the right. Then click on _Sign_ and upload the files. Click on _Save & build_ to make sure it works properly.
 
-> Note: test branches (e.g. `test`, `stag`) should use the Ad Hoc profile and the production branch (e.g. `master`) should use the Distribution profile.
+> Note: test branches (`dev` and `test`) should use the Ad Hoc profile and the production branch (e.g. `master`) should use the Distribution profile.
 
 ## Manual code signing for Android
 

docs/SECRETS.md

@@ -0,0 +1,33 @@
+# Secrets & Environment Variables
+
+We are using EAS Environment Variables to store secrets and environment variables. You can find more information in the [EAS documentation](https://docs.expo.dev/eas/environment-variables/).
+
+## Getting environment variables from EAS
+
+You can retrieve the environment variables from EAS by running the following command to use for local development:
+
+```bash
+eas env:pull
+```
+
+It will create a `.env.local` file in the root of the project with the environment variables. You can then use them in the project.
+
+> Note: It will not be able to pull the ones with the visibility set to "secret" for security reasons. These should be available in the password vault of the project.
+
+## Adding environment variables to EAS
+
+### Via CLI
+
+You can add environment variables to EAS via the CLI by running the following command:
+
+```bash
+eas env:push
+```
+
+It will ask you for which environment you want to push to variables.
+
+> Note: It will take **all** the variables from the `.env` file you provide.
+
+### Via Web UI
+
+You can manually add environment variables to EAS in _Configuration_ -> _Environment variables_. You can add them one by one or in bulk by uploading a `.env` file.

docs/UPDATES.md

@@ -9,5 +9,3 @@ You can find the Expo documentation [here](https://docs.expo.dev/versions/latest
 We built a custom script to make it easier to publish updates. You can run the script `eas:update` to publish an update to the app.
 
 The script will ask you for which environment you want to publish the update to (e.g. **Testing** or **Production**) and for a description of the update (e.g. _"Fixing the login issue"_), which will be helpful to know what was changed in the update when looking at the EAS dashboard.
-
-> Note: EAS Updates does not read EAS secrets the way EAS builds do. For that reason, the script will read your `.env` file to give the necessary information to publish the update by appending it to the command. Make sure to have the `.env` file in the root of your project with up-to-date information.

eas.json

@@ -10,62 +10,49 @@
       "distribution": "internal",
       "android": { "image": "latest" },
       "ios": { "simulator": true, "image": "latest" },
-      "env": {
-        "APP_ENV": "dev"
-      }
+      "environment": "development",
+      "env": { "APP_ENV": "dev" },
+      "channel": "dev"
     },
     "dev": {
+      "developmentClient": false,
       "distribution": "internal",
       "android": { "image": "latest" },
       "ios": { "image": "latest" },
-      "env": {
-        "APP_ENV": "dev"
-      }
+      "environment": "development",
+      "env": { "APP_ENV": "dev" },
+      "channel": "dev"
     },
     "test": {
       "distribution": "internal",
       "android": { "image": "latest" },
       "ios": { "image": "latest" },
-      "env": {
-        "APP_ENV": "test"
-      },
+      "environment": "preview",
+      "env": { "APP_ENV": "test" },
       "channel": "test"
     },
-    "stag": {
-      "distribution": "internal",
-      "android": { "image": "latest" },
-      "ios": { "image": "latest" },
-      "env": {
-        "APP_ENV": "stag"
-      },
-      "channel": "stag"
-    },
     "prod-internal": {
       "distribution": "internal",
       "android": { "image": "latest" },
       "ios": { "image": "latest" },
       "autoIncrement": false,
-      "env": {
-        "APP_ENV": "prod"
-      },
+      "environment": "production",
+      "env": { "APP_ENV": "prod" },
       "channel": "prod-internal"
     },
     "prod": {
       "distribution": "store",
       "android": { "image": "latest" },
       "ios": { "image": "latest" },
       "autoIncrement": true,
-      "env": {
-        "APP_ENV": "prod"
-      },
+      "environment": "production",
+      "env": { "APP_ENV": "prod" },
       "channel": "prod"
     }
   },
   "submit": {
     "prod": {
-      "android": {
-        "track": "internal"
-      },
+      "android": { "track": "internal" },
       "ios": {
         "bundleIdentifier": "com.taito.template",
         "appleTeamId": "EPATC4S9N2",

package.json

@@ -9,17 +9,14 @@
     "android": "npx expo run:android",
     "android:clean": "npx expo run:android --no-build-cache",
     "android:test": "APP_ENV=test npx expo run:android",
-    "android:stag": "APP_ENV=stag npx expo run:android",
     "android:prod": "APP_ENV=prod npx expo run:android",
     "ios": "npx expo run:ios",
     "ios:clean": "npx expo run:ios --no-build-cache",
     "ios:test": "APP_ENV=test npx expo run:ios",
-    "ios:stag": "APP_ENV=stag npx expo run:ios",
     "ios:prod": "APP_ENV=prod npx expo run:ios",
     "prebuild": "npx expo prebuild",
     "prebuild:clean": "npx expo prebuild --clean",
     "prebuild:test": "APP_ENV=test npm run prebuild",
-    "prebuild:stag": "APP_ENV=stag npm run prebuild",
     "prebuild:prod": "APP_ENV=prod npm run prebuild",
     "design-system:sync": "npm run design-system:tokenize && npm run design-system:codegen && npm run design-system:format",
     "design-system:tokenize": "figmage tokenize --env ./config/.env.figma",

post-install.sh

@@ -6,7 +6,7 @@ echo "Pre-build script start"
 echo "Compiling language files..."
 npm run i18n:extract
 
-if [ "$APP_ENV" == "prod" ] || [ "$APP_ENV" == "stag" ]; then
+if [ "$APP_ENV" == "prod" ]; then
   npm run i18n:compile:strict
 else
   npm run i18n:compile

scripts/build.mjs

@@ -48,7 +48,7 @@ async function gatherInputs() {
       type: 'list',
       name: 'profile',
       message: 'Select the profile:',
-      choices: ['Development', 'Testing', 'Staging', 'Production'],
+      choices: ['Development', 'Testing', 'Production'],
     },
   ]);
 
@@ -109,7 +109,6 @@ function constructBuildCommand(answers) {
     Simulator: 'dev:simulator',
     Development: 'dev',
     Testing: 'test',
-    Staging: 'stag',
     'Production (Internal)': 'prod-internal',
     Production: 'prod',
   };