Dockerizing React App

Kvs Sankar
Dec 24, 2020 Β· 2 min read

Make your app more awesome. 😎😎😎

Image for post
Image for post

Why docker?

Docker is an open-source containerization platform. Docker enables developers to package applications into containers β€” standardized executable components that combine application source code with all the operating system (OS) libraries and dependencies required to run the code in any environment.

To make your react app ready for hosting, we must dockerize it.

Don't worry if you do not know much about docker; follow me for my next article for docker basics to advance. πŸ˜‰

Let the fun begin. πŸ₯³πŸ₯³πŸ₯³

Steps to dockerize your React app:

Our react app need two images one is a node for compiling and building, and the other is nginx for running our HTML

The working directory in a node is /app, and for nginx, it is /usr/share/nginx/html

  1. Use the alpine stable version of node and nginx.
  2. Name the node image container as build so that after we build it, we can refer to build and copy the files from there.
  3. Copy package.json and package-lock.json to install the package instead so copying from the working directory in your local computer.
  4. After installing packages, copy the files from the local computer to the container.
  5. Install react scripts and run npm build
  6. Use an nginx image, copy the build folder from build to /usr/share/nginx/html
  7. Since our application uses a react-router if it has nested and deep routes, it creates an issue in nginx.
  8. Create an nginx.config file and copy it to /etc/nginx/conf.d/default.conf

9. Expose port 80

10. To run nginx within the container without halting, we should use daemon off configuration directive described in official docs.

Finally, create a docker image from the docker file using the following commands:

docker image build -t <username>/<image-name> .docker push <username>/<image-name>

To test it before pushing, use :

docker container run -d -p 8080:80 <username>/<image-name>

I highly recommend to use eslint vs-code extension while developing because even if there is a simple error your page won’t show up and it will be very difficult to know if it's a problem with dockerizing or application code.

One can use docker-compose also for speeding up the testing and building. image simultaneously in a better way

Create a docker-compose.yml file and run the following commands:

docker-compose up

If you have come this far, you definitely liked the article. Please do consider applauding the article and following me for more such articles.

I have written an article on making your react app ready for hosting by making it a progressive web app, server-side rendering, dockerizing, and deploying in AWS using Terraform.

Click here to visit the article πŸ˜‹πŸ˜‹πŸ˜‹

Frontend Weekly

It's really hard to keep up with all the front-end…

Kvs Sankar

Written by

Web developer | Competitive Programmer β€” Visit github.com/kvssankar

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Kvs Sankar

Written by

Web developer | Competitive Programmer β€” Visit github.com/kvssankar

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer β€” welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store