React & Docker for Development and Production

Why you would want to use Docker for dev and production:

• Quick on-boarding (anyone with Docker installed can start coding without setting up any other dependencies)
• Dev environment is the same as production

What you will learn in this article:

• How to write a single Dockerfile that allows you to build a dev container that will reload code changes you make locally (without rebuilding the container) and a production container that serves the static files
• This is done using shared volumes, create-react scripts, and build arguments

How to do it:

For this demonstration we will use Facebook’s create-react-app tool. This tool allows the quick set up of code hot-reloading for development and optimized static files for production. To install run the following command in your terminal:

$ npm install -g create-react-app

Then create a new project:

$ mkdir myApp
$ cd myApp
$ create-react-app frontend

Now add a Docker file with the following code: