Containerizing a simple React Application with focus on Docker Image, Docker Container, Port Mapping, File Persistent & Publishing to Docker Hub.
In this tutorial, we’ll make use of the create-react-app generator. To use the generator and run the React application server, ensure you have Node.js JavaScript runtime and npm (Node.js package manager) installed. Node.js includes npm, which you can obtain by downloading and installing Node.js from the Node.js downloads page.
Create a new React application
Now go ahead and create a new React application by typing npx create-react-app react-app where react-app can be substituted with your preferred folder name for your application.
Once that is completed, your folder structure should appear like the above.
Create a new file called DockerFile
Now we need to create a new file called DockerFile in the react-app folder. It is a text document that contains instructions for building a Docker image. The purpose of a Dockerfile is to automate the process of creating Docker images, ensuring consistency and reproducibility in deploying your applications. Simply copy the instruction below into the DockerFile created. It has been commented for easy understanding of what each command does.
# set the base image to create the image for react app
FROM node:20-alpine
# set the working directory to /app
WORKDIR /app
# copy package.json and package-lock.json to the working directory
COPY package*.json ./
# install dependencies
RUN npm install
# copy the rest of the files to the working directory
COPY . .
# expose port 3000 to tell Docker that the container listens on the specified network ports at runtime
EXPOSE 3000
# command to run the app
CMD npm start
Additionally create a .dockerignore file (similar to .gitignore) and add node_modules/ to exclude this folder from Docker because it’s not needed.
Once that is completed, then we are ready to build a Docker Image from the DockerFile.
Build Docker Image from DockerFile
Now from your terminal go ahead and navigate/change directory to yourreact-app folder, then execute the Docker Build command by typing docker build -t react-app . -f DockerFile
Running the Image to create a Container
Now to use the Docker Image we are going to run it by typing docker run react-appand this will build all the packages required to run our apps which create a running Docker container instance of our application.
As you can see it appears to be running on http://localhost:3000 but if we open the link the site isn’t reachable even after exposing port 3000 in our DockerFile.
EXPOSE only informs Docker that the container should listen to that specific exposed port in runtime BUT the HOST is unable to get this information because the containers runs in isolation and by default they dont expose their port to the HOST machine. So to make our HOST aware of this port we need to utilize the concept of Port Mapping which allows us to map port between Docker Container and Host Machine.
Port Mapping between Docker Container and Host
Now to map the port we need to kill and relaunch the terminal, navigate/change directory to yourreact-app folder again and type the commanddocker run -p 3000:3000 react-appand press enter.
This time around accessing http://localhost:3000 should load up the site nicely.
If at this point you are still not getting this nice looking page then you must have missed something, please go back and retrace your steps 😩.
Automatically build images
Previously, whenever we made file changes, we had to close our terminal, reopen it, navigate back to the folder, and rebuild the Docker image. Now, Docker can automatically rebuild images whenever we modify any files, saving us time from this repetitive process.
So one more time, we need to kill and relaunch the terminal, navigate/change directory to yourreact-app folder again and type the commanddocker run -p 3000:3000 -v "$(pwd):/app" -v /app/node_modules react-appand press enter.
What happens essentially is Docker mounts the current working directory into the app directory inside the container, which means local code is linked to the container and any changes made locally is persisted inside the running container.
Launch the site on http://localhost:3000 and then navigate to src/App.js make a change to the file and see the changes in real time.
Publish your Docker Image to Docker Hub
Now to publish your Docker Image, close and relaunch the terminal, navigate/change directory to yourreact-app type thedocker logincommand, if you were already logged in on Docker Desktop then it should authenticate you and login successfully.
Then we can publish our image using this command docker tag react-app <username>/react-app substitute your username appropriately and finally you can now push the image with this command docker push <username>/react-app
Congratulations, you have successfully published your Docker Image to Docker Hub.
You can find this image in the Hub section of your Docker Desktop.
It’s also available when you log in to your Docker Hub
If you found this guide helpful, please consider following me on Twitter and connecting on LinkedIn. Don’t forget to give this article a 👏 if you enjoyed reading it as a show of support. Thanks! ✌️
