A starter template for building nodejs API and react/redux apps

To get started, run npm install and then npm run dev to start developing the server side monitored for changes by nodemon and hot module reload on the client side via webpack-dev-server.

To run in production mode, run npm run start which will build the whole solution and run from the build.

The client side is built with the following tools:

• ReactJS for client side interface (using ES6+!)
• redux for maintaining app state, instead of Flux
  • redux-thunk which lets you write action creators that return a function instead of an action
  • react-router for routing on the client side
  • redux-logger for debugging redux store via the browser console
  • modular 'ducks' pattern for better organization
• axios for a promise based HTTP client
• webpack for bundling the client JavaScript
  • webpack-dev-server for hot module reload in development mode
  • See here for a beginner guide in setting up stack
• babel for transpiling next-gen JavaScript (i.e. ES6, ReactJS) into browser compatible JavaScript
• eslint for identifying and reporting on patterns in JavaScript
  • airbnb's style guide for enforcing 'a reasonable approach to JavaScript'

The client side project folder structure is:

• components
  • The reusable UI components where all state is injected by their parent container
• containers
  • The special components who have the redux store's state bound to this properties
  • The containers load dummy components and inject the state into them
  • A container is usually equivalent to a web page
• redux
  • Where the applications state is managed via independent reducers and a redux store. See React-Redux for more
  • Each module defines its own action types, action creators, and a reducer
• templates
  • Where the index.html and favicon.ico are kept
  • All UI is managed via the components
• client.js
  • Where the React app is initialized and routes are defined

To start developing an app, you'll want to identify your containers (i.e. pages or views), components (i.e re-usable UI controls), and reducers (i.e. how the app state is to be managed).

New containers must be added to client.js using the React router. New reducers must be loaded into the Redux store by using combineReducers in store.js.

The server side is built with the following tools:

• express for web server
  • When NODE_ENV=production webpack-dev-server will be started on port configured at webpack.config.dev => devServer.port. All requests will be proxied back to express server running on dev port 3000.
• mongoose for asynchronous access to MongoDB

To build a docker image from the production build, run the following from the root directory:

npm install
npm run build
docker build -t {repo}/{app-name} .