guitu500

Note This app has been tested on node 4

git clone https://github.com/react-li/guitu500.git
cd guitu500
npm install

Start the app

npm run dev

and open localhost:3000.

You can also try the built app:

npm run build   # First, build for production
npm run prod    # then, run the production version

then open localhost:8080.

Development

Run the development version with

npm run dev

nodemon

This task runs the server with nodemon. Nodemon will restart the server when some of the files specified in its config change.

Webpack

Webpack is used as commonjs module bundler, css builder (using sass-loader) and assets loader (images and svg files).

The development config enables source maps, the Hot Module Replacement and react-hot-loader. It loads CSS styles with <style>, to enable styles live reload). This config is used by the webpack-dev-server, serving the files bundled by Webpack.

This config uses the webpack-error-notification plugin. To get notified on errors while compiling the code, on Mac you must brew install terminal-notifier.

The production config builds the client-side production bundle from npm run build.

Both configs set a process.env.BROWSER global variable, useful to require CSS from the components, e.g:

// MyComponent
if (process.env.BROWSER) {
  require('../style/MyComponent.scss');
}