Express-React-HMR-Boilerplate

This is a boilerplate for scaffolding MERN stack projects with livereload feature supported.

Demo

https://express-react-hmr-boilerplate.herokuapp.com/

Techniques

Nodejs + Express
Reactjs + Redux + Redux-Thunk + React-Router + Redux-Form + React-Intl
Mongodb + Mongoose + MongoLab
Livereload
Server-Side Rendering (SSR) & State Fetching (Isomorphic)
Webpack + Code Splitting
ES6/7 + Babel
Travis CI Template
Heroku Deploy Script
Examples
- CSS Modules
- Simple Todo List App
- Passport + Jwt Authentication
- i18n
- Upload avatar
- Ajax progress bar
React Native

Installation

npm install -g gulp
npm install

Integrate with MongoDB (Required)

Most services this boilerplate provides rely on mongoDB. You must config your own mongoDB URIs.

Add configs/project/mongo/credential.js

The file is where mongoDB URIs are stored. Here is the example template:

module.exports = {
  development: 'mongodb://<user>:<password>@<domain>:<port>/<db_development>',
  test: 'mongodb://<user>:<password>@<domain>:<port>/<db_test>',
  production: 'mongodb://<user>:<password>@<domain>:<port>/<db_production>',
};

Done

Integrate with Firebase (Optional)

Firebase provides 5GB/user file storage for free and is backed up by google cloud storage service. Thus we use firebase storage for free to host user avatars.

Follow the doc Add Firebase to your Server
Save the credential file to configs/project/firebase/credential.json
Update configs/project/firebase/client.js

Open Firebase console
Enter your app
Go to Auth page
Click on 網路設定 and get your configuration

Replace the following part with your configuration

var config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>'
};

Update configs/project/client.js and configs/project/server.js

Make sure there is a firebase entry in each file:

// configs/project/client.js
module.exports = {
  // ...
  firebase: require('./firebase/client'),
  // ...
};

// configs/project/server.js
module.exports = {
  // ...
  firebase: require('./firebase/credential.json'),
  // ...
};

Setup firebase storage security rule

We follow the doc Secure User Data, and use the following rules to restrict user permissions.

Don't forget to change the project name into your own

service firebase.storage {
  match /b/express-react-hmr-boilerplate.appspot.com/o {
    match /{env}/{userId}/avatar.jpg {
    	allow read;
      allow write: if request.auth.uid == userId;
    }
  }
}

Build & Run

For development:

gulp

For production:

gulp build:production
npm start

Test

npm test

Deploy on Heroku

Please login heroku first, and run the command

gulp build:production
gulp deploy [--app=<heroku_app_name>] [--create]

Options

-a, --app

Specify new or existing app name of heroku. Default will be package name inside package.json.
-c, --create

If you want to create new app on heroku, please use this switch.

React Native

For development, just use:

npm run android

For production or distributing APK, please refer to the setup part of Generating Signed APK. You can use helper scripts below:

npm run android-keygen
npm run release-android
npm run install-android

Setup a new project

cd <your_project>
git flow init -d
git remote add -t master mirror https://github.com/gocreating/express-react-hmr-boilerplate.git
git fetch mirror master:mirror # git fetch <remote> <rbranch>:<lbranch>

git flow feature start mirror
git merge --no-ff --no-edit mirror
git flow feature finish mirror

# git flow feature start tune-mirror
# tune the boilerplate to suit your own project
# git flow feature finish tune-mirror

git remote add origin <your_project.git>
git push -u origin master

joey3060/express-react-hmr-boilerplate