React Native Boilerplate

A feature-oriented react native boilerplate using functional patterns and tools

tltr;
Architecture
Getting started
- Requirements
- Installation
Development workflow
- Run the app
- Test the app
Debugging
Deployment
Licensing

tltr;

Sounds good and you just want to see how it works? Here is a quick start guide:

$ git clone https://github.com/phanhoangloc/react-native-boilerplate
$ cd react-native-ts
$ yarn install
$ yarn start

Architecture

Details

Please note that in this boilerplate, we use JavaScript + Flow instead of TypeScript

Getting started

Requirements

Before you get started, make sure you have the following dependencies installed on your machine:

NodeJS >= 8.11 with yarn and npm 5
Latest React Native CLI

$ npm install -g react-native-cli

Expo CLI

$ npm install -g expo-cli

Installation

Install dependencies

$ yarn install

Create configuration files

$ yarn setup

Development workflow

Run the app

Start a local server for your app

$ yarn start

Opens your app in Expo in a currently running iOS simulator on your computer

$ yarn ios

Opens your app in Expo on a connected Android device

$ yarn android

Test the app

Run unit tests

$ yarn test

Run tests every time code changes

$ yarn test:watch

Generate code coverage report

$ yarn test:coverage

Run tests every time code changes and generate code coverage report

$ yarn test:wc

It's quite slow to watch file changes and then generate code coverage report. Despite that, it's useful to run it on isolated/small test cases

Debugging

For standard debugging select Debug JS Remotely from the React Native Development context menu (To open the context menu, press CMD+D in iOS or D+D in Android). This will open a new Chrome tab under http://localhost:8081/debugger-ui and prints all actions to the console.

For advanced debugging under MacOS we suggest using the standalone React Native Debugger, which is based on the official debugger of React Native. It includes the React Inspector and Redux DevTools so you can inspect React views and get a detailed history of the Redux state.

You can install it via brew and run it as a standalone app:

$ brew update && brew cask install react-native-debugger

Open React Native Debugger on a different port (i.e 19002)

$ open "rndebugger://set-debugger-loc?host=localhost&port=19002"

Note: Make sure you close all active chrome debugger tabs and then restart the debugger from the React Native Development context menu.

Deployment

Login to Expo

Make sure to login to the correct account

$ expo login
$ expo whoami // check the current user

Publish to Expo

We need to specify the environment and the release channel for deployment

Publish to staging

$ ENV=staging CHANNEL=staging yarn deploy

Publish to production (we use the default channel for production)

$ ENV=production yarn deploy

There is a post publish hook that we can benefit to do extra stuff:

notify the new build on Slack
build and upload source maps for an error reporting service (i.e Sentry)
...

Make a new release

We show the build info directly in the app: app version, build time, environment, etc. Here are the steps to increase the app version when deploying:

Open app.json in the target environment. Example: You are deploying to staging, the file would be ./src/environments/staging/app.json
Update the key expo.version
Commit the change and push it to the repository

Licensing

MIT

locphan87 / react-native-boilerplate Goto Github PK