Boiler plate for Setlife React apps
Clone or download
Pull request Compare This branch is 30 commits ahead, 1 commit behind vdegandesa:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A React app boilerplate maintained by The SetLife Network

Libaries used: Express, React, Redux, React Router, Webpack


  1. Clone the repo git clone

  2. Move into the directory cd setlife-react-node-boilerplate

  3. Install dependencies npm install

Directory Layout

Get familiar with the setlife folder structure

|-- /api/                           # Application source code
    |-- /config/                    # Configuration files (database options, keys, constants, etc) 
    |-- /handlers/                  # Handle 3rd party APIs here with request.js
    |-- /models/                    # Database model definitions
    |-- /modules/                   # Holds files with modular functionality
    |-- /types/                     # GraphQL type definitions
    |-- schema.js                   # Root file serving as an index of API endpoints
|-- /public/                        # Holds all compiled and static files such as fonts and images
	|-- /fonts/						# Avenir Font included
	|-- /images/					# Store all photos here
|-- /src/							# Application source code
	|-- /components/			    # React components
	|-- /constants/					# Any constant variable used throughout the app
	|-- /reducers/					# Redux Reducers + Redux Actions in the same file
	|-- /scripts/					# Functions for API calls, data formatters, validators, etc
	|-- /styles/					# All .less stylesheets



React+Redux front-end development files are served from webpack-dev-server, configured with webpack.config.js, and hot-reloaded automatically on every save.

to start webpack-dev-server run:

npm run dev

this command will bundle up files for webpack-dev-sever and host them on:


to start the Node+Express application sourced in the /api folder run:

node server

Hot-reloading is only enabled for files in the /src folder. Changes to any files in the /api folder will usually require a server restart


In development, the bundle is created behind the scenes and is not production ready. The production-ready bundle is served from webpack using the configuration file ~/webpack.config.production.js. To create a production-ready bundle run:

npm run deploy

this command will bundle up files and export them to public folder:


Testing your production bundle

Testing the production bundle can be done by running an express server from server.js in the root directory. To start the server run:

node server

This script will serve your app from the production bundle in the public folder. To access the app go to


Make sure to terminate the server when finished testing

to terminate the express server press CTRL + c:

Automated Programming - CLI Tools

The setlife.js file enables convenience tools that generate React components based off the templates in /src/templates and /api/templates

  • Run npm install -g to enable setlife CLI tools
  • setlife create-component <name> creates a standard component in /src/components
  • Add the option --redux or -r for Redux-enabled components with mapStateToProps and mapDispatchToProps functions connected to the component
  • Add the option --style or -s to generate the corresponding stylesheet and add it to the index

  • setlife create-model <name> creates a standard model in /api/models
  • Add the option --type or -t to create the associated Bookshelf-GraphQL Type