DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Docker Bake: A Modern Approach to Container Building
  • Auto-Scaling a Spring Boot Native App With Nomad
  • Reactive Kafka With Streaming in Spring Boot
  • How to Use Shipa to Make Kubernetes Adoption Easier for Developers

Trending

  • Vibe Coding With GitHub Copilot: Optimizing API Performance in Fintech Microservices
  • A Modern Stack for Building Scalable Systems
  • Unmasking Entity-Based Data Masking: Best Practices 2025
  • Agile and Quality Engineering: A Holistic Perspective
  1. DZone
  2. Software Design and Architecture
  3. Cloud Architecture
  4. How to Dockerize a ReactJS App?

How to Dockerize a ReactJS App?

Learn how to Dockerize ReactJS App in detail with examples and photos to help you follow along with this tutorial!

By 
Sanjay Saini user avatar
Sanjay Saini
·
Sep. 08, 20 · Tutorial
Likes (6)
Comment
Save
Tweet
Share
61.2K Views

Join the DZone community and get the full member experience.

Join For Free

In this article I will explain to you how to dockerize a ReactJS App from scratch. Some time back, I had created a Todo app using ReactJS and wanted to dockerize it.

So, one fine day, while doing so, I thought to note down the steps as well and share it with fellow developers. The result is this article.

If you have some basic idea about Docker or have just heard about it and want to learn how to dockerize ReactJS app, then this article is for you.

What Is Docker?

In brief, Docker is an open source DevOps tool designed to help developers and operations to streamline application development and deployment.

By dockerizing an application, you can deploy and run an application using containers.

Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and deploy it as one package.

By doing so application can be deployed on any target environment/machine regardless of any customized settings that machine might have that could differ from the machine used for writing and testing the code. 

Thus removing the deployment issues that occur due to various environment spec mismatch.

To learn more about docker checkout this link.

Prerequisites

  • First, we need to have docker installed on our machine so that we can build docker image and run docker containers. There are different installation for Mac and Windows. For Windows 10 Professional and Enterprise install docker for desktop from this link but if you have Windows 10 Home edition like I have then you will have to installed Docker Toolbox from this link.
  • We also need to have account at Docker Hub registry so that we can pull and push Docker images. It’s free so if you already haven’t one, checkout this link to create one for yourself.
  • Last, we need ReactJS application that we want to dockerize. So if you already have one that’s great but if you don’t then you can get the ReactJS app code that I am using in this article from my GitHub repository from this link.

Get Started…

In order to dockerize our ReactJS App we need to perform following steps.

  • Launch the Docker machine.
  • Create Dockerfile in our app folder.
  • Create Docker image from the Dockerfile.
  • And last, run the ReactJS Todo App in the container using Docker image. 

So let’s get started…

Launch Docker Machine

Docker machine is a small Linux VM that hosts the Docker Engine, which is a client-server application con of Docker Daemon and Docker CLI that interacts with Docker Daemon to create Docker images or running containers etc.

  • In case, you have installed Docker Desktop for Window or Mac when the installation finishes, Docker Machine is launched automatically. The whale image in the notification area indicates that Docker is running, and accessible from a terminal.
  • If you have installed Docker Toolbox then there are 2 ways to create docker machine locally.
    • By double clicking on the docker Quick Start Terminal icon on your desktop.
    • Using docker-machine CLI “create” command to create new Docker machine.

Since I have Docker Toolbox installed so I will choose the easy way and click on the Quick Start Terminal icon that will open the terminal and launch the Docker machine.

Docker running in terminal


You can run following docker-machine CLI command to check the Docker machine details and note the URL that we will use to open our ReactJS app in the browser.

$ docker-machine ls

You can do much more with docker-machine CLI commands like create, kill, start, stop Docker machine and much more but that is not in scope for this article however you can check-out docker.com for complete documentation on docker-machine CLI and also docker CLI as well.

Since now our Docker setup is up and running now we will focus on creating Dockerfile for our ReactJS app.

Create a Dockerfile

Now, in the terminal, change directory to your ReactJS app folder and create a file name “Dockerfile” without any file extension using any dev editor like VS Code or just use Notepad.

Write following instructions in the Dockerfile and save it.

YAML
 




x
24


 
1
# Step 1
2
 
          
3
FROM node:10-alpine as build-step
4
 
          
5
RUN mkdir /app
6
 
          
7
WORKDIR /app
8
 
          
9
COPY package.json /app
10
 
          
11
RUN npm install
12
 
          
13
COPY . /app
14
 
          
15
RUN npm run build
16
 
          
17
 
18
 
          
19
# Stage 2
20
 
          
21
FROM nginx:1.17.1-alpine
22
 
          
23
COPY --from=build-step /app/build /usr/share/nginx/html



Explanation

  • In Stage 1, we are copying our app code in the “app” folder and installing app dependencies from package.json file and creating production build using Node image.
  • In the Stage 2, we are using nginx server image to create nginx server and deploy our app on it by copying build items from */app/build* folder to nginx server at */usr/share/nginx/html* location.

Create a .dockerignore file

Although it’s not necessary to have this file, it’s a good practice to have it since it can speed up image build process and also keep the image lean by excluding the unnecessary code from the Docker build context so that it doesn’t get into the image.

So just the way we created Dockerfile at the same location, we create a .dockerignore file and add following items that we don’t want to be copied into our docker image. 

GitHub Flavored Markdown
xxxxxxxxxx
1
 
1
/node_modules
2
 
          
3
/build
4
 
          
5
.git
6
 
          
7
*.md
8
 
          
9
.gitignore

 

Create a Docker Image

Now, run the Docker build command to build Docker image of our app using Dockerfile that we have just created.

Note that I have given sanjaysaini2000/react-app as name to my Docker image but you must replace it with the name you want to give to your app’s Docker image.

Also note that image name must be followed by the dot which means that the path of the Docker build context and Dockerfile is the current folder. 

$ docker build -t sanjaysaini2000/react-app .

Running Docker build command

This process will take 1-2 minutes to complete, and at the end, you will get successful message with image tag name.

Container successfully built

You can run following Docker command to list the images created along with your ReactJS app image. You will also find node and nginx images that we used to create our app image and an intermediate image <none>. However these images are not required and can be deleted.

 $ docker images

Docker images command output

Run the Docker Container

Finally run the following command in the terminal to run your ReactJS Todo App in the Docker container and make sure to replace sanjaysaini2000/react-app with your image name in this command.

$ docker run -d -it  -p 80:80/tcp --name react-app sanjaysaini2000/react-app:
latest

Running a Docker container

Basically, we want to create and run an interactive container in the background so we have used options –d and –it with the Docker run command. Since app in the container is available at port 80 so we used –p option and map the container port to the external host port using 80:80/tcp and name our container using –name option to react-app followed by the image name. 

Now open the browser and type URL  http://<docker machine url>:80 in the address bar.

In my case it's http://192.168.99.100:80

Congratulations…you have successfully dockerize and hosted ReactJS app in a Docker container.

Dockerized React app


This Docker image is also available at my Docker Hub registry as well. So if you don’t want to go through above process and only interested in test running this ReactJS app in the Docker container then You can get it from my react-app repository at Docker Hub registry.

Keep reading and learning…Cheers!!! 

Docker (software) app

Opinions expressed by DZone contributors are their own.

Related

  • Docker Bake: A Modern Approach to Container Building
  • Auto-Scaling a Spring Boot Native App With Nomad
  • Reactive Kafka With Streaming in Spring Boot
  • How to Use Shipa to Make Kubernetes Adoption Easier for Developers

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!