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.
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:
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 :
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:
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:
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:
Before we can visit our application in the browser, we need to find out the IP address of our running Docker engine:
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.