How to Docker with React

 by Robin Wieruch
 - Edit this Post

This tutorial is part 2 of 2 in the series.

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 . 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 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 .

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 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.

Continue Reading:
Continue Reading:

Keep reading about 

A collection of all the Docker commands I am using on a regular basis for developing applications with Docker. Docker Machine List all Docker engines: Create a Docker engine: Set environment variables…

Just recently I had to use Docker for my create-react-app 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…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.