react-docker-app

Build a React.js app with a compile, bundle, and test pipeline already in place.

Development

Get Docker (preferably Docker Mac Beta if you're on a Mac).

In Docker

Start the containers, and write your application.

$ docker-compose up -d
$ docker-compose logs -f

We support Docker Mac. To activate it

$ echo "DOCKER_MAC_BETA=1" >> .env

Visit http://$(docker-machine ip):8000 to see your changes if you're not using Docker Mac, else visit http://localhost:8000.

Not in Docker

This is discouraged, but there might be some unforeseen reason you'd like to develop outside the container. In that case, just run

$ npm run dev

and visit http://localhost:8000.

Debugging

Development tooling includes

• sourcemaps
• Redux DevTools - for monitoring state and "time travel"
• React DevTools - inspect components in the DOM

Production

Set NODE_ENV=production in .env, then

$ docker-compose up -d

The build directory in the container is /var/www/react-docker-app/dist. These files are served by an NGINX front-end. Logs are located in /var/www/react-docker-app/logs.

ES6 and SASS modules

ES6 and SASS modules can be imported using relative file URLs or using Webpack's module resolution from the root app/

import { ... } from 'auth' // maps to './auth';
import { ... } from 'util' // maps to './util';

@import '~app.scss';
@import '~counter/counter.scss';

Features

• React.js v15.0.x
• React Router
• Redux
• Redux Thunk
• reselect
• ES6 everywhere
• JSX/SASS Hot Reloading
• Auth0 authentication
• Material UI
• sourcemaps
• continuous bundling
• continuous linting
• continuous testing
• minification when NODE_ENV=production