diff --git a/Makefile b/Makefile deleted file mode 100644 index 1b1a8e35..00000000 --- a/Makefile +++ /dev/null @@ -1,95 +0,0 @@ -### Dependencies ### - -install: ## Install all dependencies - yarn install - cd ios && pod install - -clean: ## Clean the project - rm -rf $TMPDIR/react-* - rm -rf $TMPDIR/metro-* - rm -rf node_modules - rm -rf ios/Pods - yarn - cd ios && pod install - - -### Simulators ### - -android-run-development: ## Run the Android app in the development env - react-native run-android --variant=developmentDebug --appIdSuffix=development - -android-run-staging: ## Run the Android app in the staging env - react-native run-android --variant=stagingDebug --appIdSuffix=staging - -android-run-production: ## Run the Android app in the production env - react-native run-android --variant=productionDebug - -ios-run-development: ## Run the iOS app in the development env - react-native run-ios --scheme=rnStarter-development - -ios-run-staging: ## Run the iOS app in the staging env - react-native run-ios --scheme=rnStarter-staging - -ios-run-production: ## Run the iOS app in the production env - react-native run-ios --scheme=rnStarter-production - - -### Code checks ### - -test: ## Run Jest tests - jest --runInBand --outputFile test-results.json --json - -tsc: ## Check code against Typescript config - tsc --noEmit --project tsconfig.json - -lint: ## Check the code with ESLint - eslint ./ --ext .js,.ts,.tsx --cache --fix --ignore-path .gitignore - -prettify: ## Run prettier on all files - yarn prettier --write './**/*.{ts,tsx}' - - -## E2E tests ## - -detox-ios-debug: ## Run Detox E2E tests on an iOS debug simulator - npx detox build -c debug ios.sim.debug - npx detox test -c debug ios.sim.debug - -detox-ios-prod: ## Run Detox E2E tests on an iOS release simulator - npx detox build -c release ios.sim.release - npx detox test -c release ios.sim.release - -detox-android-debug: ## Run Detox E2E tests on an Android debug simulator - npx detox build -c debug android.emu.debug - npx detox test -c debug android.emu.debug - -detox-android-prod: ## Run Detox E2E tests on an Android release simulator - npx detox build -c release android.emu.release - npx detox test -c release android.emu.release - - -### Release management ### - -ios-patch: ## Create a patch semver version for iOS - cd ios && fastlane incrementVersionNumber bump_type:patch - -ios-minor: ## Create a minor semver version for iOS - cd ios && fastlane incrementVersionNumber bump_type:minor - -ios-major: ## Create a major semver version for iOS - cd ios && fastlane incrementVersionNumber bump_type:major - -ios-beta: ## Release a beta version for iOS - cd ios && fastlane beta - -ios-match-pull: ## Pull the latest iOS certificates - cd ios && fastlane matchPull - -ios-add-testers: ## Add new test devices to the certificate - cd ios && fastlane addTesters - -android-beta: ## Release a beta version for Android - cd android && fastlane beta - -android-release: ## Release a production version for Android - cd android && fastlane deploy \ No newline at end of file diff --git a/README.md b/README.md index 6a5c4805..b2429025 100644 --- a/README.md +++ b/README.md @@ -1,76 +1,43 @@ # React Native Starter -[![Build Status](https://travis-ci.org/tsyirvo/react-native-starter.svg?branch=develop)](https://travis-ci.org/tsyirvo/react-native-starter) + - [Explanations](#explanations) + - [The setup](#the-setup) + - [Runing the project](#runing-the-project) + - [Stack](#stack) + - [Internationalization](#internationalization) + - [Adding images](#adding-images) + - [Generate new components](#generate-new-components) + - [Using the storybook](#using-the-storybook) + - [Tests](#tests) + - [Formatting and type checking](#formatting-and-type-checking) + - [Github Actions](#github-actions) + - [CodePush](#codepush) + - [Release and Beta deployments](#release-and-beta-deployments) + - [Tips](#tips) --- -## The setup - -### React Native setup - -Those steps apply for a MacOS setup with the use of `brew` to install the tools. - -You need to have Node (at least version 10) and Watchman installed: - -``` -brew install node -brew install watchman -``` +## Explanations -Install the React Native CLI: +This starter is the one I used in all my personal projects. -``` -yarn global add react-native-cli -``` +It's a basic start, but with most of the common dependencies I use so I can start new projetcts more easily. -### iOS setup +For the app itself there are already multiple environments (dev, staging and prod), a navigation library, internationalization, OTA updates with *Code Push*, some base components primitives with *Styled System*. -You need to have Xcode installed with the `Command Line Tools` downloaded. +On the dev side, a test stack is setup (unit and E2E), a CI on *Github Actions* with release automation thanks to *Fastlane*, a *Storybook* with some base addons, *TypeScript* is also configured with *ESLint* and *Prettier*, commits are linted to automated the release workflows and changelog generation. -Install Cocoapods if needed: +There are also some utilities to generate new components or pages automatically, a script to compress images and add them to the native catalogs. A pre commit hook runs on staged files for code quality checks. -``` -sudo gem install cocoapods -``` +There is no data handling library since it varies from one project to the next. -### Android setup - -You first need to have the Java Development Kit installed: - -``` -brew cask install adoptopenjdk/openjdk/adoptopenjdk8 -``` - -You can now install [Android Studio](https://developer.android.com/studio) and with it, download the following: - -- Android SDK -- Android SDK Platform -- Android NDK -- Android Virtual Device - -Once it's done, add the `sdk` to your environment variables and the following folders to your path: - -``` -ANDROID_HOME=$HOME/Library/Android/sdk -$ANDROID_HOME/emulator -$ANDROID_HOME/tools -$ANDROID_HOME/tools/bin -$ANDROID_HOME/platform-tools - -``` - -### Dependencies installations - -Install the packages: +## The setup -``` -yarn -``` -For iOS, you need to install the pods. +Install the packages and iOS Pods: ``` -cd ios && pod install +yarn install:all ``` ## Runing the project @@ -81,23 +48,16 @@ To launch the React Native packager: yarn start ``` -You can run the simulators with the commands below: +You can launch the simulators with the following commands: ``` -make ios-run-[development|staging|production] -or -make android-run-[development|staging|production] +yarn ios:[development|staging|production] ``` +or -## Run in a specific environment - -The iOS app and the Android one both support 3 (development, staging and production) different environments, backed by the corresponding `.env` file. - -To launch the app in a specific environment, the steps varies depending on the platform you're using: - -For iOS: select the corresponding `Target` and `Scheme` then launch the app. - -For Android: in the `Build Variants` tab, select the environment and build mode in which you want to launch the app then run it. +``` +yarn android:[development|staging|production] +``` ## Stack @@ -123,16 +83,16 @@ For Android: in the `Build Variants` tab, select the environment and build mode All the translations are managed on separate `.json` file located in the `src/i18n/locales/` folder. -Refer to the documentation of React i18Next for explanation on how to use the library. +Refer to the documentation of [React i18Next](https://react.i18next.com/) for explanations on how to use the library. ## Adding images -All images are stored in the native images catalogs for both iOS and Android. +All images are stored in the native images catalogs for both *iOS* and *Android*. -To simplify the adding process, and optimizing those images, you can run the following command (as many as you want or a whole folder): +To simplify the adding process, and optimizing those images, you can run the following command: ``` -yarn add-image [path/to/the/image/to/add | path/to/the/folder] +yarn image:add [path/to/the/image/to/add|path/to/the/folder] ``` ## Generate new components @@ -140,18 +100,14 @@ yarn add-image [path/to/the/image/to/add | path/to/the/folder] You can automaticaly generated new pages or components (functional or class ones) with all necessary imports and default content with thoses commands: ``` -yarn generate:page -or -yarn generate:fc -or -yarn generate:class +yarn generate:[page|fc|class] ``` A CLI prompt will ask you all the infos. -## Use the storybook +## Using the storybook -A Storybook is already configured with some addons. +A *Storybook* is already configured with some addons. To access it, you can access the dev menu on the device and select _Toggle Storybook_ to have it shown in place of the app. @@ -168,13 +124,13 @@ yarn test For E2E tests, you can use [Detox](https://github.com/wix/Detox) for both OS: ``` -npx detox build -c [release|debug] ios.sim.[release|debug] -npx detox test -c [release|debug] ios.sim.[release|debug] +npx detox build -c ios.sim.[release|debug] +npx detox test -c ios.sim.[release|debug] or -npx detox build -c [release|debug] android.emu.[release|debug] -npx detox test -c [release|debug] android.emu.[release|debug] +npx detox build -c android.emu.[release|debug] +npx detox test -c android.emu.[release|debug] ``` ## Formatting and type checking @@ -189,21 +145,29 @@ yarn tsc There is a precommit git hook that run the prettify command to have a consistent formatting. -## CodePush +## Github Actions -You have the possibility to bypass updating your apps via the platform stores when updating only JS files or image assets. +The project is configured to have the CI running on *Github Actions* with a *Git Flow*. + +The two main workflows are the following: -You first need to configure you app token for iOS and Android (read [here](https://github.com/microsoft/react-native-code-push)), add it where needed, then create a new release. +A *Quality* workflow runs against all PR targetting *develop*. It handles running tests, linting and TypeScript checks. -For iOS, check the individual targets `.plist` files and insert the value for `CODEPUSH_KEY`. +A *Deploy* one, which release a new build of the app on App Center and on the stores. -For Android, in `app/build.gradle`, where the flavors are defined, insert the key values. +You can look at the *.yml* files to view all the workflows, and check the Github environment variables you will need if you want it to run on your end. + +## CodePush + +You have the possibility to bypass updating your apps via the platform stores when updating only JS files or image assets. + +You first need to configure you app token for iOS and Android (read [here](https://github.com/microsoft/react-native-code-push)), add it to the env files, then create a new release. By default, the development env can be left out of the config and only the staging and production one have to be setup with the keys. -## Releases and Beta deployments +## Release and Beta deployments -The releases automation is handled with [Fastlane](https://fastlane.tools/). You will need to install it before using it. +The releases automation is handled with [Fastlane](https://fastlane.tools/). You will need to install it before using it locally. You will have to complete the `.env` files in both fastlane directories (ios and android) before being able to run the following lanes. @@ -211,39 +175,29 @@ There are multiples lanes to do the most common things, and they need to be laun The versions are automaticaly handled based on the commit history. -For both Android and iOS, you can release beta versions to [App Center](https://appcenter.ms/) that either use the production or the staging env: +For both Android and iOS, you can release beta versions to [App Center](https://appcenter.ms/): ``` -fastlane beta env:[staging|prod] +fastlane release_staging ``` The same is applicable to deploy the apps to the respective stores platforms (Play Store & Apple Connect) with the commands: ``` -fastlane release env:[staging|prod] +fastlane release_production ``` -There are also platform specific lanes. +For iOS, you have to manage the signing and adding testers to your profiles. It is done here with [Fastlane Match](https://docs.fastlane.tools/actions/match/). -For Android:, the AABs uploaded to the play store are in the alpha track by default, so you can move it up with those commands: - -``` -fastlane promote_alpha_to_beta -and -fastlane promote_beta_to_production -``` - -For iOS, you have to manage the signing and adding testers to your profiles. - -To add testers to you App Center beta releases, their devices UUIDs need to be added to your account, simply add their devices info to the `ios/fastlane/devices.txt` file. +To add testers to your App Center beta releases, their devices UDIDs need to be added to your account, simply add their devices info to the `ios/fastlane/devices.txt` file. To generate new profiles to be able to deploy to theses users, run: ``` -fastlane match_pull_all readonly:false +fastlane add_testers ``` -On a new machine or if you need to fetch the latest certificates and profiles, run the command without options like so: +On a new machine or if you need to fetch the latest certificates and profiles, run the command like so: ``` fastlane match_pull_all @@ -260,5 +214,10 @@ fastlane pem_check Sometimes, React Native can produce cryptic errors... To handle thoses scenarios, you can use the following command: ``` -make clean +yarn clean +``` +then + +``` +yarn install:all ``` diff --git a/package.json b/package.json index db95d58f..55f3dc67 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,20 @@ }, "scripts": { "start": "react-native start", - "clean": "watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf node_modules && yarn", + "ios:development": "react-native run-ios --scheme=rnStarter-development", + "ios:staging": "react-native run-ios --scheme=rnStarter-staging", + "ios:production": "react-native run-ios --scheme=rnStarter-production", + "android:development": "react-native run-android --variant=developmentDebug --appIdSuffix=development", + "android:staging": "react-native run-android --variant=stagingDebug --appIdSuffix=staging", + "android:production": "react-native run-android --variant=productionDebug", + "clean": "watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf node_modules", + "install:all": "yarn && npx pod-install", "test": "jest --runInBand --outputFile test-results.json --json", "test:staged": "jest -o --passWithNoTests --runInBand", "tsc": "tsc --noEmit --project tsconfig.json", "lint": "eslint ./ --ext .js,.ts,.tsx --cache --fix --ignore-path .gitignore", "prettify": "yarn prettier --write './**/*.{ts,tsx}'", - "add-image": "node scripts/images.js", + "image:add": "node scripts/images.js", "generate:page": "npx hygen generators page", "generate:fc": "npx hygen generators fc", "generate:class": "npx hygen generators class",