Containerize React app with Docker for Production
Tags: react, docker, devops, beginners
Published: 2020-03-25 07:05:03

---
series: DevOps for Frontend Engineers
---
**Docker - an overview**
Docker is an open platform for developing, shipping, and running applications. Docker ensures quick delivery of your software by providing isolation between your app and the infrastructure. Docker packages and runs everything inside a loosely isolated environment called the container. 

*Key Terms*
Image - a complete package that contains everything (application code, required libraries, software dependencies, configurations, etc.) needed to run your app (just like a Class in OOP)

Container - an instance of the image, just like an object in OOP

Volume - images are read-only, to persist data you have to use volumes. In simplest terms, you share a folder (on host OS) with your docker image to read/write data from/to it.

Dockerfile - the blueprints of an image. This is where you define what will be inside the image you are trying to build. Like OS (e.g Ubuntu 16), Softwares (e.g Node), etc.

Tag - for now just consider it in literal terms.

I assume you have your React application ready that you want to containerize using docker, if you don't, [you can clone this sample React application](https://github.com/mubbashir10/my-app) and follow along.

#### Step 1: Install Docker
[Download and install docker](https://www.docker.com/products/docker-desktop)

#### Step 2: Prepare Configuration Files
You need to create two configuration files, for:

1. Nginx (webserver)
2. Docker (to build the Docker image)

**Nginx**
The build files of React are just static (HTML, CSS, JS, etc.) files and you need a webserver to serve your static files like Nginx, Apache, OpenLiteSpeed, etc.
Inside your React app, create another directory and name it `nginx`. Inside the nginx directory (you just created), create a new file and name it `nginx.conf`. You can also use to following commands (one-by-one to achieve it).

```bash
cd my-app
mkdir nginx
cd nginx
touch nginx.conf
```

Edit the "nginx.conf" file and add the following code to it. 

```nginx
server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;

    # to redirect all the requests to index.html, 
    # useful when you are using react-router
    
    try_files $uri /index.html; 
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}
```
The gist of this code block is that you're telling Nginx to listen on port 80, redirect every request to "index.html" and the root is "/usr/share/nginx/html" (the directory where to serve from).

**Dockerfile**
Inside your app directory create a new file and name it as `Dockerfile.prod` and add the following code in it:

```Dockerfile
# stage1 - build react app first 
FROM node:12.16.1-alpine3.9 as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY ./package.json /app/
COPY ./yarn.lock /app/
RUN yarn
COPY . /app
RUN yarn build

# stage 2 - build the final image and copy the react build files
FROM nginx:1.17.8-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

Create a new file and name it as `.dockerignore` and add `node_modules` inside it. This is simply to tell Docker to ignore the `node_modules` directory.


So your directory structure should be like this

```
my-app
│   Dockerfile.prod
│   .dockerignore    
│
└───nginx
      nginx.conf

```

**Explanation**

*Stage 1*

1. Use a multi-stage Docker build (supported in Docker v17+)
2. `FROM` tells what base image to use (required), you can check out base images at [Docker Hub](https://hub.docker.com/)
3. `WORKDIR` is used to specify the working directory (inside the image, not your host OS)
4. `ENV PATH` adds node_modules in the PATH
5. `COPY` is used to copy `package.json` from the current directory (on the host) to the working directory (in the image).
6. `RUN` is used to run the command, here we want to run `Yarn` to install the dependencies mentioned in package.json
7. `COPY` is run again to copy all the code from the host OS to the working directory in the image
8. Run `yarn build` to build our app

*You copy package.json first and install the dependencies and don't copy `node_modules` into the image. This is to leverage the excellent caching system of Docker and reduce build times.*


*Stage 2*

In the first stage, you copied package.json to the working directory, installed the dependencies, copied your code, and built the final static files. In stage 2:

1. Use `Nginx` as a base image. (`nginx` is the image, and `1.17.8-alpine` is the tag. It's like you are telling what particular version/release of the Nginx base image you would like to use).
2. Copy the build files from stage 1 to `/usr/share/nginx/html` (the default directory where Nginx serves from)
3. Remove the default Nginx configuration file present at `/etc/nginx/conf.d/default.conf`
4. Copy the configuration file you created earlier into the docker image
5. Use `EXPOSE` to expose the port of the container. One pitfall here is that it doesn't actually expose the port, rather it is just for the sake of documentation
6. Run `Nginx` in the foreground, not as a daemon (i.e in the background).

Both `CMD` and `RUN` are used to run commands. The difference is that `RUN` is an image build step, whereas `CMD` is the command a container executes by default when it is started.


**Step 3: Build and Tag Image**
From the root directory of your app, run the following command to build & tag your docker image:

`docker build -f Dockerfile.prod -t my-first-image:latest .`

1. `-f` is used to specify the filename. If you don't specify it then you must rename your file to `Dockerfile` - that's what the build command looks for in the current directory by default.
2. `-t` is used to tag the image. You can tag your image the way you want (e.g v1.0.0, v2.0.0, production, latest, etc.)
3. `.` at the end is important, and it should be added to tell docker to use the current directory.

**Step 4: Run Container
The final step is to run the built image (as a container)
`docker run -it -p 80:80 --rm my-first-image:latest`

1. `-it` for interactive mode
2. `-p` to expose and bind ports. Here we are exposing port 80 of the container and binding it with port 80 of the host machine. The first one is of your machine (host OS) and the second one is of the docker image container. For example, if you use `-p 1234:80` then you will need to go to `http://localhost:1234` on your browser.
3. `--rm` to remove the container once it is stopped
4. `my-first-image:latest` the name:tag of the image we want to run container of

Now open up your browser and go to `http://localhost` and you will see your app being served from the docker. If you make any changes to your React application code, you will need to rebuild the image (Step 3) and run it again (Step 4).

**Extra**
1. Run `docker image ls` to see a list of all the images on your machine
2. Run `docker container ls` to see all the running containers
3. Run `docker system prune` to prune the containers (be careful while using this command, read docs for options before using them)
4. Read the [Docker getting starting guide](https://docs.docker.com/get-started/)

---
Let's connect: 

Linkedin: [https://www.linkedin.com/in/mubbashir10/](https://www.linkedin.com/in/mubbashir10/) 

Twitter: [https://twitter.com/mubbashir100](https://twitter.com/mubbashir100)