startupjs

StartupJS

:fire: React (Native + Web) starter kit and realtime model synchronization engine for Node.js with ORM (full-stack framework).

Intro

This boilerplate launches with a React web app and React Native app and allows to use a single code for all platforms.

The project is super helpful to kick-start your next project, as it provides a lot of the common tools you may reach for, all ready to go. Specifically:

• React Router for routing and navigation with ability to separate project to multi apps
• Model using Racer and ShareDB for working with local data stored in memory and remote data synced via ShareDB (in our case, MongoDB).
• ORM system for Racer and ShareDB
• CodePush for dynamic updates React Native apps
• Node.js as engine
• Express as web server
• MongoDB as database
• Redis as pub/sub adapter for Racer
• Code Quality
  • [Flow] (https://flow.org/en/docs/react/)
  • [ESLint] (https://eslint.org/)

Requirements

• Node >= 12.0
• Yarn
• MongoDB 4.0
• Redis 5.0
• Xcode for iOS Development
• Android SDK for Android development

OR

• Docker (See Docker development section for details)

Quick start

1. Initialize a new boilerplate project. Change myapp to your project name (use lower case)

npx startupjs init myapp --version=latest && cd myapp

1. Start server (in a separate terminal tab)

yarn server

1. Start web (in a separate terminal tab). Open http://localhost:3000

yarn web

1. Start metro, if you want to develop native iOS or Android apps (in a separate terminal tab)

yarn metro

1. Run android (in a separate terminal tab)

yarn android

1. Run ios (in a separate terminal tab)

yarn ios

Docker development

Alternatively you can run a docker development image which has node, yarn, mongo and redis already built in. You only need docker for this. And it works everywhere -- Windows, MacOS, Linux.

Keep in mind though that since docker uses its own driver to mount folders, performance (especially when installing modules) might be considerably slower compared to the native installation when working with the large amount of files.

1. Initialize a new project (change awesomeapp at the end to your app name):

docker run --rm -it -v ${PWD}:/ws:delegated startupjs/dev init awesomeapp

1. Go into the created project folder. Then run the development docker container with:

./docker

1. While inside the running container, start your app with:

yarn start

Open http://localhost:3000 and you should see your app.

1. You can quickly exec into the running container from another terminal window using:

./docker exec

Packages configuration

To get this project running with all dependencies, follow steps given below:

CodePush

CodePush is a cloud service that enables React Native developers to deploy mobile app updates instantly to their user's devices. Following steps will help in configuring CodePush for project.

1. Install CodePush CLI

npm install -g code-push-cli

1. Create/Login a CodePush account

// Register
code-push register

// Login if registered already
code-push login

1. Register your app

// For Android
code-push app add <App-Name-Android> android react-native

// For iOS
code-push app add <App-Name-Ios> ios react-native

For Android

1. Add empty reactNativeCodePush_androidDeploymentKey string item to /path_to_your_app/android/app/src/main/res/values/strings.xml. It may looks like this:

<resources>
  <string name="reactNativeCodePush_androidDeploymentKey" moduleConfig="true"></string>
  <string name="app_name">Lingua.Live</string>
</resources>

1. Get keys using code-push deployment ls <App-Name-Android> --displayKeys and copy both Debug and Release key in /path_to_your_app/android/app/build.gradle

1. Go to /path_to_your_app/android/app/src/main/java/com/lingua/MainApplication.java and add code which set keys. It may looks like this:

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  // Set CodePush deployment keys here, because
  // we can't set different keys for debug and
  // release on strings.xml (reactNativeCodePush_androidDeploymentKey)
  for(ReactPackage reactPackage: packages) {
    if (reactPackage instanceof CodePush) {
      ((CodePush)reactPackage).setDeploymentKey(BuildConfig.CODEPUSH_KEY);
    }
  }
  return packages;
}

For iOS

1. Add CodePushDeploymentKey string item with value $(CODEPUSH_KEY) to /path_to_your_app/ios/your_app/Info.plist. It may looks like this:

<plist version="1.0">
<dict>
<!-- ...other configs... -->
<key>CFBundleVersion</key>
<string>1</string>
<key>CodePushDeploymentKey</key>
<string>$(CODEPUSH_KEY)</string>
<key>LSRequiresIPhoneOS</key>
<!-- ...other configs... -->
</dict>
</plist>

1. Get keys using code-push deployment ls --displayKeys then open /path_to_your_app/ios using Xcode and copy both Debug and Release key in

Packages

• App

• Backend

• Bundler

• CLI

• Cron

• Init

• Model

• Offline

• ORM

• React sharedb

• Routes middleware

• Server

Troubleshooting

If you have any problem, search for the issues in this repository. If you don't find anything, you can raise an issue here.

References

• Generating keystores
• CodePush
• Checklist for deploying app

Licence

(MIT)