DEV Community

Cover image for How to Dockerize a React Application

How to Dockerize a React Application

Ayesh Nipun on August 16, 2023

What is docker? Docker is one of the most used platforms in the world. With Docker, developers can containerize their application (Back ...
Read full post
Collapse
 
sebosek profile image
Sebastian •

I am missing the nginx configuration for URL based routing.

Collapse
 
ayesh_nipun profile image
Ayesh Nipun • • Edited

Since this is a basic guide, I haven't included that part. But you can follow the below steps to achieve that.

1) Create an NGINX configuration file (nginx.conf) in the same directory as your Dockerfile.

2) Add below code as the nginx configuration

# nginx.conf

server {
    listen 80;
    server_name your_domain.com; # Change this to your domain or IP address

    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri /index.html; # Enable client-side routing
    }

    error_page 404 /index.html; # Handle 404 errors with React app
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
sebosek profile image
Sebastian •

3) add a new config layer in your dockerfile which copy the file to the /etc/nginx
4) use this new layer and copy build application to the destination and start nginx deamon

Collapse
 
onlinemsr profile image
Raja MSR •

Thank you for sharing this amazing tutorial on how to dockerize a React application. Your step-by-step guide was very easy to follow and helped me understand the process better.

docker build -t docker-react-image:1.0 .

How to change this tag value for next build dynamically?

I appreciate the time and effort you put into creating this post. Keep up the great work!

Collapse
 
ayesh_nipun profile image
Ayesh Nipun • • Edited

Thank you for your comment.

You can pass the build id or commit hash to the tag value.

Get the current Git commit hash

COMMIT_HASH=$(git rev-parse --short HEAD)

Build the Docker image with the commit hash as the tag

docker build -t docker-react-image:$COMMIT_HASH .

Note that this is the way you should do when we are using a service like Azure DevOps or GitHub Actions.

I used terminal to run the command since this is basic guide.

Collapse
 
onlinemsr profile image
Raja MSR •

Thanks, got it !

Collapse
 
mjoycemilburn profile image
MartinJ •

Thanks Ayesh - that's very helpful.

Collapse
 
ayesh_nipun profile image
Ayesh Nipun •

Thank you!

Collapse
 
pierre profile image
Pierre-Henry Soria ✨ •

Excellent article Ayesh! Great share 👌

Collapse
 
ayesh_nipun profile image
Ayesh Nipun •

Thank you!

Collapse
 
jburky15 profile image
Joe Burkhart •

This was awesome. I have a couple of friends who talk a lot about using Docker and I never fully understood how it functioned. This has given me a solid foundation to work from, thanks for this!

Collapse
 
ayesh_nipun profile image
Ayesh Nipun •

I'm glad that this gives you an idea of Docker. Keep crushing

Collapse
 
miron4dev profile image
Evgeny Mironenko •

Why use Docker for a React app when its output is just static files that you can easily host on any CDN? 🤔