/express-react-hmr-boilerplate

A boilerplate for scaffolding MERN stack projects with livereload feature supported

Primary LanguageJavaScript

Express-React-HMR-Boilerplate

Build Status Dependency Status

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.

  1. 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>',
};
  1. 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.

  1. Follow the doc Add Firebase to your Server
  2. Save the credential file to configs/project/firebase/credential.json
  3. 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>'
    };
    
  1. 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'),
  // ...
};
  1. 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

Roadmap

  • Integrate with redux-form
  • Integrate with form validation
  • Move imports-/exports-loader to devDependencies
  • i18n
  • Use redux-thunk
  • CookieStore
  • ES6 test scripts
  • Mail System
  • Asynchronous redux-form validation (detect duplicate username/email)
  • Error handling
  • Pagination
  • Disable submit button when form submitting
  • Todo#Update API & Todo#Edit Functionality
  • File Uploading (e.g. Avatar)
  • Facebook Login
  • Ajax progress bar