It is built on express using React and Flux with yahoo/fluxible. It is developed with webpack and react-hot-loader and written with babeljs with the help of eslint.

Start the app

npm run dev

and open localhost:3000.

You can also built the app:

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

then open localhost:8080.

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.

The production config is used to build the production version with npm run build: similar to the dev config, it minifies the JS files, removes the debug statements and produces an external .css file. Files are served from a express static directory (i.e. /public/assets).

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

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

To run the tests, use this command:

npm test

The app uses debug to log debug messages. You can enable/disable the logging from Node by setting the DEBUG environment variable before running the server:

# enable logging for hubrickFrontendChallenge and Fluxible
DEBUG=hubrickFrontendChallenge,Fluxible node index

# disable logging
DEBUG= node index

From the browser, you can enable/disable them by sending this command in the JavaScript console:

debug.enable('hubrickFrontendChallenge')
debug.disable()
// then, refresh!