Dockerize react application

Hey developers!!

Imagine a world where deploying your React application is as simple as a single command. No more worries about dependencies, libraries, or the 'it works on my machine' dilemma. Welcome to the world of Docker, where we encapsulate our apps, along with all their requirements, into portable containers. Dockerizing a React application is like putting your app inside a magic box, ensuring it runs consistently and seamlessly on any machine. In this blog, we'll embark on a journey into Docker's universe and discover how to containerize your React application. Let's break free from deployment nightmares and embrace the elegance of containerization!

Create a React application

create-react-app shopping-cart

Create an NGINX conf file for your react application

We will be using NGINX as our base image to build the container. Using Docker to not only encapsulate your final build but also to create the build itself, gives your project complete portability across environments. Developers only need Docker installed to build and run your React site.

More realistically, this image is ready to use with a CI server to build images in an automated fashion. As long as a Docker environment is available, you can convert your source code into a deployable image without any manual intervention.

Create an NGINX conf file and add the below code for routing to our container. This file will be replaced with the default config file in the docker container.

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    location /shopping-cart/static {
        alias /usr/share/nginx/html/static;
    }
}

Here we are adding routes for the static files that will be generated while building the app. In the NGINX conf file of the server where we deploy this application, we will have to provide the location for our /shopping-cart

Write a Dockerfile

The Dockerfile contains the instructions to build the Docker image. For a React app, a basic Dockerfile would look like this:

FROM nginx:stable-alpine
COPY ./build /usr/share/nginx/html
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

This Dockerfile:

• Uses the nginx:stable-alpine image as the base

• Copies the build directory generated while building the react app to the /usr/share/nginx/html directory. This directory is where the static files which are generated by the react app are served by the NGINX to your UI.

• Replace the container's NGINX conf file with our conf file.

• Export port 80

• The CMD command in the Dockerfile ensures that when the container starts, Nginx will be run with the daemon off option, causing it to run in the foreground and be managed properly by Docker.

  Without this command, Nginx would run as a daemon in the background by default, and Docker would lose control of the process.

Write a Docker compose file

version: "2"
services:
  shopping-cart:
    container_name: ${CONTAINER_NAME}
    image: ${IMAGE_NAME}
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - ${INTERNAL_PORT}:${EXTERNAL_PORT}
    environment:
      EXPOSE_PORT: ${INTERNAL_PORT}
      NODE_ENV: ${NODE_ENV}

• Specify the version of the docker-compose file format. In this case version 2.

• Define the docker service name. In this case "shopping-cart" is the name of the service

• Set the container name and the image name. In this project, we are taking these as a parameter passed through the environment variable.

• Specify the build context to be the current directory, by declaring context . and Dockerfile in the current directory will be used to build the image.

• Map the port from the host (external) to the container (internal). The ${INTERNAL_PORT} and ${EXTERNAL_PORT} environment variables are used to define these port mappings.

• Set environment variables for the "shopping-cart" container. It defines two environment variables: EXPOSE_PORT and NODE_ENV, and their values are obtained from the ${INTERNAL_PORT} and ${NODE_ENV} environment variables.

Create .env file

The environment file will have all the parameters that we will be passing to our container while building the docker image.

CONTAINER_NAME=shopping-cart
IMAGE_NAME=shopping-cart
INTERNAL_PORT=3000
EXTERNAL_PORT=80
NODE_ENV=production

That's all about the ingredients we want to get our React container ready. Now let's start cooking!!

Let's source the env file first. This command will set the variables we have defined in our .env file as environment variables in our container

source .env

Run npm install

npm i

Build your project

PUBLIC_URL=/shopping-cart npm run build

Here we are passing an env variable PUBLIC_URL while building the app. This env specifies the NGINX on which location our project is running. In this case, if there is a request to the route /shopping-cart, it will be directed inside our container. This way, all the static files will be accessible even inside the containers.

Start the container

docker-compose up -d

Done!!. The container is started and your application is served real hot. :)

The complete code for this tutorial can be found in my Github repo.

Docker has reshaped the way we deploy apps, and it's a transformation worth celebrating. So go ahead, Dockerize your React creations and sail into a future where deployment hassles are but a distant memory.

Happy coding and containerizing!!