How to Docker with React

Just recently I had to use Docker for my React web application development. Here I want to give you a brief walkthrough on how to achieve it. First of all, we need a React application. Either create a React app yourself, or follow this minimal React with Webpack setup guide. The React + Webpack application can be found on GitHub too.

Note: If you are using create-react-app and not a custom React setup (e.g. React with Webpack), check out this Docker with create-react-app tutorial instead.

After you have set up your React project, visit it on http://localhost:8080 to see the rendered React app. Everything should work as expected.

Before we can continue with Docker, we need to change one line in our package.json for starting the Webpack development server. The host has to be specified as 0.0.0.0. if you want to make the development server accessible to the outside; meaning: making it accessible for Docker.

"start": "webpack  --host 0.0.0.0 --config ./webpack.config.js --mode development",

Now, we will ship this React application in a Docker container by using Docker image. First of all, create a so-called Dockerfile:

touch Dockerfile

And enter the following content to the Dockerfile:

# Docker Image which is used as foundation to create
# a custom Docker Image with this Dockerfile
FROM node:10

# A directory within the virtualized Docker environment
# Becomes more relevant when using Docker Compose later
WORKDIR /usr/src/app

# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./

# Installs all node packages
RUN npm install

# Copies everything over to Docker environment
COPY . .

# Uses port which is used by the actual application
EXPOSE 8080

# Finally runs the application
CMD [ "npm", "start" ]

Everything in this Dockerfile is read by the Docker interpreter line by line. In the end, it's the blueprint to create a your custom Docker Image suited for your application. The foundational image (here FROM) we are using here makes sure that all Node/npm commands are available in the Dockerfile. Otherwise, if using a non related Node image, we would need to install Node in the Dockerfile ourselves before we could use the Node specific commands.

Optionally create a .dockerignore file to exclude folders and files from the Docker process. For example, the node_modules don't need to be included for the Docker image, because they will be installed in the process with npm install (see Dockerfile). Therefore, the content of the .dockerignore file could be:

node_modules

Next, create an account on the official Docker Hub. Afterward, you should have a Docker Hub username which can be used to build your first Docker image:

docker build -t <username>/my-custom-react-app .

If the output after this command says "Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?", you need to make sure that everything Docker related is set up and running properly. Even if it's running properly when printing all Docker engines with docker-machine ls, you may need to set the environment variables for the Docker engine again.

If the build for the Docker image runs successfully, you should be able to list your images with the following command:

docker images

REPOSITORY                         TAG                 IMAGE ID            CREATED             SIZE
<username>/my-custom-react-app     latest              036d38e931e4        5 minutes ago       153MB
node                               alpine              532fd65ecacd        9 days ago          113MB
hello-world                        latest              fce289e99eb9        13 months ago       1.84kB

This Docker image is everything you need to run a Docker application in a Docker container. One Docker image can be used to start multiple Docker containers which helps to scale application size horizontally or to run applications with different container configuration. For now, we will only run one Docker container based on this Docker image:

docker run --name my-custom-react-app -p 4680:8080 -d <username>/my-custom-react-app

This command creates and runs a Docker container with a specific name, a mapping of two ports, and a Docker image. Even though the Dockerfile defines a specific port, we can redirect this to a custom port for this particular Docker container. After creating and running the Docker container based on the Docker image, we should be able to list all Docker containers:

docker ps

CONTAINER ID        IMAGE                              COMMAND                  CREATED             STATUS              PORTS                         NAMES
ab03066fb631        <username>/my-custom-react-app     "docker-entrypoint.s…"   9 minutes ago       Up 9 minutes        0.0.0.0:4680->8080/tcp/tcp   my-custom-react-app

Before we can visit our application in the browser, we need to find out the IP address of our running Docker engine:

docker-machine ip default

-> 192.168.99.100

Finally you should be able to visit http://192.168.99.100:4680. Beware that your IP address and port may vary. Congratulations, you have shipped your first React web app in a Docker container.