React Native Typescript Template with scalable design and cutting edge technologies like CodePush, Sentry and other libraries pre-configured to save your time.

Overview

DESCRIPTION

A React Native Template/Boilerplate containing the best practices and scalable design with cutting edge technologies like CodePush/Sentry and all other neccessary libraries pre-configured and basic helper functions and components to help you save your time and make your App super fast.


INITIALIZE RN WITH THIS TEMPLATE

Command:

npx react-native init AppName --template https://github.com/SMKH-PRO/ReactNative_CodePush_Template.git

STEPS TO FOLLOW

1. Install dependencies

Note: Dependencies will most probably be automatically installed when you initialize the project so you can skip this step.

Commands:

  1. yarn or npm i
    and also install Pods:
  2. cd ios
  3. pod install

2. Prepare Husky

This project is pre-configured with husky, but you've to follow a few steps to enable it for you! before going through the following steps, please make sure that the project is initialized inside a git repository.

  1. Open package.json file
  2. In the scripts object add new property prepare with value husky install.
    Your Scripts object will look something like this:
"scripts": {
    // other script ...
    "prepare":"husky install"
  }
  1. Run the newly added script with command yarn prepare or npm run prepare

that's it, husky is now succesfully installed with a pre-commit that will check linting everytime you commit.


2. Setup Sentry

Commands:

npx @sentry/wizard -i reactNative -p ios android

modify the SENTRY URL from .env file (if .env does not exist, make one with "SENTRY" variable).

Your .env file will look like this:

SENTRY=https://[email protected]/6629304


4. CodePush Setup

CodePush is pre-configured but you need to setup your keys, to do that follow the steps below:

Install CLI
npm install -g appcenter-cli

Generate Private Key files for code signing:
We will need these files later for code signing in Android & iOS Commands:

For Private Key:

openssl genrsa -out codePushPrivateKey.pem

For Public Key:

openssl rsa -pubout -in codePushPrivateKey.pem -out codePushPublicKey.pem

CodePush iOS Setup

Integrate the SDK in iOS

Open ios/AppName/AppCenter-Config.plist file in XCODE or VS and replace {Your app secret here} with your actual app secret key.

The AppCenter-Config.plist file looks like this when you open with VS CODE:

AppSecret {Your app secret here} ">



    
    AppSecret
    {Your app secret here}
    



And will look like following on XCODE:

XCODE AppCenter-Config.plist screenshot Double click on the {Your app secret here} and replace the value with actual app secret.

Reminder: You can get the app secret from codepush app's overview page.


MutliDeployment Configuration iOS

Custom build setting has already been configured in iOS but you need to add your deployment keys.

To set this up, follow these steps:

  1. Open up your Xcode project and select your project in the Project navigator window

  2. Ensure the project node is selected, as opposed to one of your targets

  3. Select the Build Settings tab

  4. In User-Defined section, You'll see a setting named "CODEPUSH_KEY" open this setting and write your stagingand Release deployment keys.

XCODE Build Setting screenshot

Replace DEPLOYMENT_KEY_FOR_PRODUCTION with your Production key, and DEPLOYMENT_KEY_FOR_STAGING with your Staging key

And that's it! Now when you run or build your app, your staging builds will automatically be configured to sync with your Staging deployment, and your release builds will be configured to sync with your Production deployment.


How to create staging release on iOS?

To create a staging build you can just edit scheme to Staging.

Picture Guide

Edit Scheme: XCODE EditScheme screenshot

Scheme Selection: XCODE Staging Scheme screenshot

That's it, Now after selecting Staging for Archive build, you'll get the staging App when you build archive release.


Code Signing For iOS

In order to configure Public Key for bundle verification you need to edit record in Info.plist with name CodePushPublicKey and string value of public key content.
Replace the current public key with your own.

Example:

CodePushPublicKey -----BEGIN PUBLIC KEY----- MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ== -----END PUBLIC KEY----- ">

  
    

    CodePushPublicKey
        -----BEGIN PUBLIC KEY-----
MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANkWYydPuyOumR/sn2agNBVDnzyRpM16NAUpYPGxNgjSEp0etkDNgzzdzyvyl+OsAGBYF3jCxYOXozum+uV5hQECAwEAAQ==
-----END PUBLIC KEY-----

    
  


Picture Guide For Editing Public Key: XCODE info.plist screenshot


CodePush Android Setup

Integrate the SDK in Android

Open file with the filename appcenter-config.json in android/app/src/main/assets/ with the following content:

{
  "app_secret": "{Your app secret here}"
}

Replace {Your app secret here} with your actual app secret.


MutliDeployment Configuration Android

  1. Open the project's app level build.gradle file (for example android/app/build.gradle in standard React Native projects)

  2. Find the android { productFlavors {} } section and edit resValue entries for both your Staging and Production build variants also replace AppName strings with your actual App Display Name.

If you're in the correct gradle file, It will look like this:

XCODE android build.gradle screenshot

From this file replace with your own Deployment key for Staging.

and Replace with your deployment key for Production.

and Replace appName with your actual App Display Name.

That's it, No need to change anything else in this file.


How to create staging release on Android?

Note: the following commands assume that you're not already in the Android folder, if you're already inside project's android folder just ignore the cd android && part of the commands.

To build an staging apk, the command for that will be

cd android && ./gradlew assembleStagingRelease

and you'll find the output on android/app/build/outputs/apk/staging

For Production Build

cd android && ./gradlew assembleProductionRelease

and you'll find the output on android/app/build/outputs/apk/production

OR BUILD BOTH

// It will create the Apk for both, production and staging.

cd android && ./gradlew assembleRelease

and you'll find the output on android/app/build/outputs/apk/staging and android/app/build/outputs/apk/production both.

Same goes for Bundle Release

// For Production
cd android && ./gradlew bundleProductionRelease

// For Staging
cd android && ./gradlew bundleStagingRelease

// Will generate bundle for Production & Staging, Both.
cd android && ./gradlew assembleRelease


Code Signing For Android

Edit CodePushPublicKey string item in /path_to_your_app/android/app/src/main/res/values/strings.xml file, It may looks like this:

my_app -----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtPSR9lkGzZ4FR0lxF+ZA P6jJ8+Xi5L601BPN4QESoRVSrJM08roOCVrs4qoYqYJy3Of2cQWvNBEh8ti3FhHu tiuLFpNdfzM4DjAw0Ti5hOTfTixqVBXTJPYpSjDh7K6tUvp9MV0l5q/Ps3se1vud M1/X6g54lIX/QoEXTdMgR+SKXvlUIC13T7GkDHT6Z4RlwxkWkOmf2tGguRcEBL6j ww7w/3g0kWILz7nNPtXyDhIB9WLH7MKSJWdVCZm+cAqabUfpCFo7sHiyHLnUxcVY OTw3sz9ceaci7z2r8SZdsfjyjiDJrq69eWtvKVUpredy9HtyALtNuLjDITahdh8A zwIDAQAB -----END PUBLIC KEY----- ">

   my_app
   -----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtPSR9lkGzZ4FR0lxF+ZA
P6jJ8+Xi5L601BPN4QESoRVSrJM08roOCVrs4qoYqYJy3Of2cQWvNBEh8ti3FhHu
tiuLFpNdfzM4DjAw0Ti5hOTfTixqVBXTJPYpSjDh7K6tUvp9MV0l5q/Ps3se1vud
M1/X6g54lIX/QoEXTdMgR+SKXvlUIC13T7GkDHT6Z4RlwxkWkOmf2tGguRcEBL6j
ww7w/3g0kWILz7nNPtXyDhIB9WLH7MKSJWdVCZm+cAqabUfpCFo7sHiyHLnUxcVY
OTw3sz9ceaci7z2r8SZdsfjyjiDJrq69eWtvKVUpredy9HtyALtNuLjDITahdh8A
zwIDAQAB
-----END PUBLIC KEY-----

Replace the previous PUBLIC KEY with your own.


How to get CodePush deployment keys?

As a reminder, you can retrieve deployment keys by running command appcenter codepush deployment list -a / -k from your terminal

OR

Go to CodePush dashboard open the app and navigate to distribute > codepush now, on this screen click on Create standard deployments button, after clicking this button you'll see a setting icon at top right corner, click on it and you'll get deployment keys for both staging and production deployment/environments.

XCODE Staging Scheme screenshot


Change Package.json Scripts.

The package.json file has script to create codepush releases.
it may look like this:

"scripts": {
    "codepush-android-stage": "appcenter codepush release-react -a owner/appName -d Staging -k codePushPrivateKey.pem --sourcemap-output --output-dir ./build",
    "codepush-android-prod": "appcenter codepush release-react -a owner/Appname -d Production -k codePushPrivateKey.pem --sourcemap-output --output-dir ./build",
    "codepush-ios-stage": "appcenter codepush release-react -a owner/appName -d Staging -k codePushPrivateKey.pem --sourcemap-output --output-dir ./build",
    "codepush-ios-prod"
     ...
  }

From all these 4 scripts, you need to replace owner/appName with your actual Owner Name and App Name.

Done.



MOTIVATON:

I used to initialize all my react-native projects with this configuration so I thought why not make it a template maybe it may help others save time too!.



--- END OF DOCS ---

Comments
Owner
KASHAN HAIDER
A passionate Programmer, Mern Stack Developer. Programming was never only a job for me It Is a hobby.
KASHAN HAIDER
A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box πŸ“¦

A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box ??

Patrick Jean Meurer 16 Dec 29, 2022
Node.js / GraphQL project template pre-configured with TypeScript, PostgreSQL, login flow, transactional emails, unit tests, CI/CD workflow.

Node.js API Starter Kit Node.js API Starter Kit is a project template for building Node.js backend applications optimized for serverless infrastructur

Kriasoft 119 Dec 30, 2022
CheatSheet - Pre-Configured list of Templates and Approval/Denial Reasons that is free for any Bot List or Bot List Staff to use

Pre-Configured list of templates that any Bot List or Bot List Staff are free to use!

InfinityBotList 5 Jul 28, 2022
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚑️ React 17 ?? TypeScript, of course ?? Jest - unitary testing made easy ?? Tailwind with JIT

Josep Vidal 141 Dec 29, 2022
A highly scalable boilerplate with pre added web3 and different wallets

NFT-Dapp-Boilerplate Start your next dapp / defi project in seconds A highly scalable boilerplate with pre added web3 and different wallets with a foc

Green Lettel 6 May 21, 2022
A template repo for creating react-ts apps based on vite. Libs like axios, antd, @apollo/client, eslint, stylelint, react-router-dom and @syy11cn/config-router are pre-installed.

Template Repo for React + Typescript + Vite Introduction This is a template repo for projects built with react and typescript on the basis of vite. Fe

Yiyang Sun 11 May 24, 2022
A react starter template configured with Webpack, Typescript and Redux

React Starter Kit ??‍?? A react starter template configured with Webpack, Typescript, Redux, and React Router. Features ?? ⚑️ Configured with typescri

Mounir Hanafi 14 Oct 2, 2022
React Dashboard made with Material UI’s components. Our pro template contains features like TypeScript version, authentication system with Firebase and Auth0 plus many other

Material Kit - React Free React Admin Dashboard made with Material UI's components, React and of course create-react-app to boost your app development

Devias 4.3k Dec 31, 2022
This is a template for a Typescript-powered, redux-equipped, React application template supported by Eslint and other basic rules.

Getting Started with React-TS-Redux-App This project was bootstrapped with Create React App. What is it This is a template for Typescript powered, red

Sachintha 2 Oct 25, 2021
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)

nwb nwb is a toolkit for: Quick Development with React, Inferno, Preact or vanilla JavaScript Developing: React Apps Preact Apps Inferno Apps Vanilla

Jonny Buchanan 5.5k Jan 3, 2023
A boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains

Bounties ?? Please notice: If you have your own custom project and you want to r

IoTeX Network 70 Nov 26, 2022
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Christian JosΓ© Torrealba RondΓ³n 4 Nov 11, 2022
An open source software engineering study tool that allows users to create topic categories and save useful resources as flashcards.

GitGood An open source software engineering study tool that allows users to create topic categories and save useful resources as flashcards. Want to C

GitGood 22 Jun 26, 2022
Locku-browser-extension - Simple Browser extension to save passwords across browsers

Locku A Simple browser extension for password management. Why another Password m

Solai Raj 3 Jul 27, 2022
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Daniel Nikravesh 7 Apr 14, 2022
Eth-time - ETH Time - A new NFT collection created to explore new ways of generating NFTs on-chain

ETH Time ETH Time is a new NFT collection created to explore new ways of generat

null 3 Jan 25, 2022
Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Kai Hotz 239 Dec 29, 2022
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Start your next react project in seconds A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices Cr

react-boilerplate 28.9k Jan 9, 2023
πŸ›‘οΈ βš›οΈ A simple, scalable, and powerful architecture for building production ready React applications.

??️ βš›οΈ A simple, scalable, and powerful architecture for building production ready React applications.

Alan Alickovic 16.1k Jan 7, 2023