Build Automation Tools

npm install

• Install npm packages

npm start (start.js)

• Cleans up the output /build directory (clean.js)
• Copies static files to the output folder (copy.js)
• Launches Webpack compiler in a watch mode (via webpack-middleware)
• Launches Node.js server from the compiled output folder (runServer.js)
• Launches Browsersync, HMR, and React Transform

npm run build (build.js)

• Cleans up the output /build folder (clean.js)
• Copies static files to the output folder (copy.js)
• Creates application bundles with Webpack (bundle.js, webpack.config.js)

npm run deploy (deploy.js)

• Builds the project from source files (build.js)
• Pushes the contents of the /build folder to a remote server with Git

Options

Flag	Description
--release	Minimizes and optimizes the compiled output
--verbose	Prints detailed information to the console
--static	Renders specified routes as static html files

For example:

$ npm run build -- --release --verbose   # Build the app in production mode

or

$ npm start -- --release                 # Launch dev server in production mode

Misc

• webpack.config.js - Webpack configuration for both client-side and server-side bundles
• run.js - Helps to launch other scripts with babel-node (e.g. babel-node tools/run build)
• .eslintrc - ESLint overrides for built automation scripts

Challenges Encountered

• Setting up build tool, finally using from ReactStarterKit
• Setting up router structure and server side rendering.

Main Objectives

• Used ES7 Decorators (Stage 1)
• Used Class Properties (Stage 1)
• Used Spread Operator (Stage 1)
• Used Express (and for server side rendering)
• Used Mocha as a JavaScript test framework, and Chai as a assertion library
• Used Jade as a Template Engine
• Used AirBnb JavaScript Style Guide see .eslintrc file
• Used Enzyme as a JavaScript Testing utility for React

Demo