This tutorial is part 2 of 2 in the series.
- Part 1: How to install Docker on MacOS
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:
And enter the following content to the Dockerfile:
# Docker Image which is used as foundation to create# a custom Docker Image with this DockerfileFROM node:10# A directory within the virtualized Docker environment# Becomes more relevant when using Docker Compose laterWORKDIR /usr/src/app# Copies package.json and package-lock.json to Docker environmentCOPY package*.json ./# Installs all node packagesRUN npm install# Copies everything over to Docker environmentCOPY . .# Uses port which is used by the actual applicationEXPOSE 8080# Finally runs the applicationCMD [ "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:
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 imagesREPOSITORY TAG IMAGE ID CREATED SIZE<username>/my-custom-react-app latest 036d38e931e4 5 minutes ago 153MBnode alpine 532fd65ecacd 9 days ago 113MBhello-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 psCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMESab03066fb631 <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.