Written by

![Sourab Pramanik](data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2246%22%20height%3D%2246%22%20viewBox%3D%220%200%2046%2046%22%3E%0A%20%20%3Ccircle%20cx%3D%2223%22%20cy%3D%2223%22%20r%3D%2223%22%20fill%3D%22%23E5E5E5%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dy%3D%22.35em%22%20text-anchor%3D%22middle%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20BlinkMacSystemFont%2C%20'Segoe%20UI'%2C%20sans-serif%22%20font-size%3D%2220%22%20fill%3D%22%23555555%22%3E%0A%20%20%20%20S%0A%20%20%3C%2Ftext%3E%0A%3C%2Fsvg%3E)

Sourab Pramanik

April 23, 2025 6:00 am

Share this

[![X social media logo](https://updot.co/blog/x.svg)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fupdot.co%2Finsights%2Fdeploy-your-react-app-using-docker-and-nginx&text=Deploy%20your%20React%20App%20using%20Docker%20and%20Nginx)[![LinkedIn social media logo](https://updot.co/blog/linkedin.svg)](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fupdot.co%2Finsights%2Fdeploy-your-react-app-using-docker-and-nginx&title=Deploy%20your%20React%20App%20using%20Docker%20and%20Nginx)

![Deploy your React App using Docker and Nginx](https://cdn.updot.co/media/Group%201597885095.webp)![Docker](https://cdn.updot.co/media/Group%201597885095.webp)

# Deploy your React App using Docker and Nginx

Hello reader, it's Sourab here. Recently in one of my projects I used [Docker](https://docs.docker.com/) and [Nginx](https://docs.nginx.com/) for deploying a [React App](https://react.dev/) to a front-end server. Let's see how I did it.

First, we will need a React project so you can skip creating a new React project if you already have one.

  

### Create a new React project and spin it up

npx create-react-app with-docker  
cd with-docker  
npm start

It will start your react app at port 3000 and open up in the browser with this interface below

![alt1](https://cdn.updot.co/media/67400f8351e15e8117eact.png)

Our app is running fine. So let's close it now and move to the next step.

  

### Create a Dockerfile

In the root directory of your project, we will create a new file and name it Dockerfile. It will look something like this in your project directory

![alt1](https://cdn.updot.co/media/67400f8351e15e8ockerfile.jpeg)

and add this code to that Dockerfile

#React app image  
FROM node:lts-alpine as build  
  
WORKDIR /app  
  
COPY package\*.json ./  
  
RUN npm ci  
  
COPY . .  
  
RUN npm run build  

FROM node:lts-alpine as build will tell docker to download a slim LTS(Long Term Support) version of Node image from [Docker Hub](https://hub.docker.com/) and set up a Node environment with all base requirements needed to run a Node project in our case a React project for production that.

WORKDIR /app will tell the docker that in that image we need a dedicated director i.e. /app where the whole project will sit. And whatever changes we make using the steps in this Dockerfile will only affect that /app directory nothing else.

COPY package\*.json ./ will copy all the files having the prefix package and suffix .json into the working directory.

RUN npm ci will install all the packages specified in the package.json file of our project into the image.

COPY . . will copy the source directory in the working directory.

RUN npm run build will execute the npm run build script from package.json which will then generate a build directory and all our code will be minified, streamlined, and bundled together into static HTML, CSS, and JavaScript files. This build is highly compressed, optimized, and ready for production. We will use this build to serve.

  

### Nginx Configuration

In the root directory of our project, we will create one file named nginx.conf and paste this code:

http {  
  
include mime.types;  
  
set\_real\_ip\_from 0.0.0.0/0;  
real\_ip\_recursive on;  
real\_ip\_header X-Forward-For;  
limit\_req\_zone $binary\_remote\_addr zone=mylimit:10m rate=10r/s;  
  
server {  
listen 80;  
server\_name localhost;  
root /proxy;  
limit\_req zone=mylimit burst=70 nodelay;  
  
location / {  
root /usr/share/nginx/html;  
index index.html index.htm;  
try\_files $uri /index.html;  
}  
  
error\_page 500 502 503 504 /50x.html;  
location = /50x.html {  
root /usr/share/nginx/html;  
}  
}  
}  
  
events {}  

Nginx will need this configuration to listen for any connection at port 80 and serve the contents of /usr/share/nginx/html. This configuration may change based on your requirements.

  

### Update the Dockerfile for Nginx

For now, our Dockerfile is only going to build a React app image but we can also create another image for Nginx which will save us from manual setup of Nginx on any target machine and configure it for our app.

So open up the Dockerfile again and add these steps at the bottom of the file.

FROM nginx:latest as prod  
  
COPY --from=build /app/build /usr/share/nginx/html  
COPY nginx.conf /etc/nginx/nginx.conf  
  
EXPOSE 80/tcp  
  
CMD \["/usr/sbin/nginx", "-g", "daemon off;"\]  

FROM nginx:latest as prod gets the latest Nginx docker image and annotates it as prod for production usage.

COPY --from=build /app/build /usr/share/nginx/html from the build stage of the image copy the build directory contents from /app/build to /usr/share/nginx/html which is the default directory for Nginx to server html contents but it can be changed if needed.

COPY nginx.conf /etc/nginx/nginx.conf This will copy the nginx.conf file created earlier and replace the contents of the /etc/nginx/nginx.conf in the target machine.

EXPOSE 80/tcp exposes port 80 and listens for incoming connections and serves the React app.

CMD \["/usr/sbin/nginx", "-g", "daemon off;"\] fire up the nginx server and keep it alive.

NOTE: These types of images where we have two different stages of builds (i.e. React app and Nginx) are called Multi-stage builds.

  

### Finally build a docker image and run the docker container

To build the docker image use this command

docker build -t with-docker:1.0.0-prod .  

After the image build is complete run the container using this image with this command

docker run -d -p 80:80 --name react-server with-docker  

Now your Nginx server is listening at port 80 and will serve your React app.

  

### Thank you for reading. Peace out.

Last Updated

April 23, 2025 6:00 am

On this page

![toggle icon](https://updot.co/blog/plus.svg)

*   [
    
    Create a new React project and spin it up
    
    ](#create-a-new-react-project-and-spin-it-up)
*   [
    
    Create a Dockerfile
    
    ](#create-a-dockerfile)
*   [
    
    Nginx Configuration
    
    ](#nginx-configuration)
*   [
    
    Update the Dockerfile for Nginx
    
    ](#update-the-dockerfile-for-nginx)
*   [
    
    Finally build a docker image and run the docker container
    
    ](#finally-build-a-docker-image-and-run-the-docker-container)
*   [
    
    Thank you for reading. Peace out.
    
    ](#thank-you-for-reading-peace-out)

### Connect with us now!

Enter your contact details

Full Name

Email

I agree to be contacted by UPDOT for promotional and informational purposes.

![arrow icon](https://updot.co/navbar-arrow.svg)

Submit

![arrow icon](https://updot.co/navbar-arrow.svg)

## Related Articles

[

![](https://cdn.updot.co/media/Group%201597885078.webp)

## DRUPAL vs. SITECORE - A detailed comparision

Drupal and Sitecore are two well-known CMS platforms. If you are stuck between which one to choose, here is a detailed comparison between both.

By Dupee Taipodia | April 28, 2026 11:57 am

](https://updot.co/insights/drupal-vs-sitecore-a-detailed-comparision)

![](https://updot.co/dummy/home/model-bg.jpg)

## The big names said yes.

Teams inside some of the world's biggest companies picked us for work that mattered. Tell us what you're building and we'll show you why.

*   ![Fortune Global 500](https://updot.co/dummy/home/logo-sm-1.png)
*   ![Financial Times](https://updot.co/dummy/home/logo-sm-2.png)
*   ![TIME100 Most Influential Companies](https://updot.co/dummy/home/logo-sm-4.png)
*   ![The Crunchbase Unicorn Board](https://updot.co/dummy/home/logo-sm-6.png)

*   ![Inc. 5000](https://updot.co/dummy/home/logo-sm-3.png)
*   ![Fortune 500](https://updot.co/dummy/home/logo-sm-5.png)
*   ![Global 100 Most Sustainable Corporations 2025](https://updot.co/dummy/home/logo-sm-7.png)

Full Name\*Please enter your name

Email\*Please enter a valid email address

Phone Number\*Please enter a valid phone number

Message\*Please tell us about your project

Your details stay with us. See our [Privacy Notice](https://updot.co/privacy-policy)Please accept the Privacy Notice to continue

Submit

## On this site

- [About](https://updot.co/about-us)
- [Case Studies](https://updot.co/case-studies)
- [Careers](https://updot.co/careers)
- [Contact Us](https://updot.co/contact-us)
- [Web Engineering](https://updot.co/services/web-engineering)
- [Mobile Engineering](https://updot.co/services/mobile-engineering)
- [Software Engineering](https://updot.co/services/software-development)
- [DevOps & Cloud](https://updot.co/services/devops-cloud)
- [UX/UI Design](https://updot.co/services/ux-ui-design)
- [Maintenance & Upgrades](https://updot.co/services/maintenance-and-upgrades)
- [Terms and Conditions](https://updot.co/terms-and-conditions)