Expo Application Template

This package helps to setup an Expo application using HubSpire's template.

Prerequisites

Make sure you have:

• set up a bitbucket repository for the project with write access.
• set up a Sentry account for the project.
• the development, staging and production base API URLs ready.

Usage

To create the Expo project using this template, run:

$ npx create-expo-app <ProjectName> --template @hubspire/expo-app

Getting Started

NOTE: When running scripts, it's important to initiate them from the top-level directory of the project.

Project setup

$ chmod +x project-setup.sh
$ ./project-setup.sh  

• Make sure that you are running this script before making any changes to the project by yourself. This shell script will :
• Create the default environment files with the required environment variables for you. It will also update the env field inside eas.json with the values you provide during setup. You can update their values later after the script execution.
• Remove/Update some values in the app.config.ts, eas.json, eas-build-on-success.sh and package.json files which are exclusive for the template project.
• Remove readme file used for the template project.
• Add secret folders and files to gitignore.
• Initialise new repository for the project.
• Remove the script file after execution.
• Publish an initial commit to the remote url you provided.

Add environment files

NOTE: You can skip this step if you have successfully executed the project-setup.sh.

Create .env.development, .env.test and .env.production files in project's root folder

$ touch .env.development.local
$ touch .env.development
$ touch .env.test
$ touch .env.production

//.env.development.local
//only required if you need to connect to backend using a local url for debugging
EXPO_PUBLIC_LOCAL_API_URL='local api url' 

//.env.development
EXPO_PUBLIC_APP_VARIANT=development
SENTRY_ORG='sentry org name'
SENTRY_PROJECT='sentry project name'
SENTRY_AUTH_TOKEN='sentry auth token'
EXPO_PUBLIC_SENTRY_DSN='sentry dsn'
EXPO_PUBLIC_API_URL='dev api url'
GOOGLE_SERVICES_JSON_DEV=./assets/secrets/google-services-dev.json

//.env.test
EXPO_PUBLIC_APP_VARIANT=staging
...
GOOGLE_SERVICES_JSON_STAGING=./assets/secrets/google-services-staging.json

//.env.production
EXPO_PUBLIC_APP_VARIANT=production
...
GOOGLE_SERVICES_JSON=./assets/secrets/google-services.json

Setup push notification

• Add your google-services.json (3 files for 3 environments) files inside assets/secrets folder.
• Add environment secrets GOOGLE_SERVICES_JSON(_STAGING/_DEV) with their corresponding values for eas build to have access to these variables.
• Make sure you have set up server credentials for android.
• Make sure you have enabled push notification and generated APNS key for your iOS build when prompted during eas build.
• Listeners to display notification, deep linking configurations for push notification and a button to send a test notification has been set up in the template.
• Refer this documentation for more.

Setup codegen

$ npm run codegen-compile

Expo Go

No additional setup is required to run the app in Expo Go.

$ npm run start-go:dev 

EAS

Make sure to remove extra.eas and updates fields (since these are the values used for the template project specifically). It will be generated again once you complete next steps.

NOTE: They will be already removed if you have executed the project-setup.sh.

Install eas cli.

$ npm install -g eas-cli

Login to Expo account if you haven't already.

$ eas login

Configure eas build.

$ npm run build:configure

Configure eas update.

$ npm run update:configure

Add SENTRY_AUTH_TOKEN environment variable in the Expo account and save the auth token generated from Sentry as its value. Refer this Documentation for more.

Build and run development build using eas

$ npm run build:ios-dev:eas
$ npm run build:android-dev:eas

Testing

Unit Testing: Jest

$ npm run test:unit

E2E Testing: Maestro

$ npm run test:e2e:production

CI/CD

Bitbucket: bitbucket-pipelines.yml

NOTE: Make sure you have set up the EXPO_TOKEN environment variable in your repository and MAESTRO_API_KEY as an environment secret.

Commits to release/staging branch will trigger Jest unit tests followed by an EAS build for Android and iOS using development:e2e profile.

Commits to release/production branch will trigger EAS build using production profile.

EAS: eas-build-on-success.sh

A successful EAS build with the development:e2e profile will trigger E2E testing using Maestro. The flows are expected to be located inside the .maestro folder at the top-level directory of the project.