Sign in

Dockerizing a React Project

Why and How to Dockerize a React Project

React+Docker

What is Docker?

Docker is often compared to a virtual machine because of its ability to create a separate virtual instance of your project. Docker is more efficient than a virtual machine because read-only code, such as, supporting systems files (Operating System, Infrastructure code) are shared between each virtualization (in Docker it’s called a container) instance as opposed to having all those supporting files within each separate virtual instance when using the traditional virtual machine method.

Docker is exceeding useful in that since you can wrap all your code into an instance that’s completely independent of everything else which makes for running your code on any machine with ease irregardless of its OS or whatever is installed on that machine. It’s also especially useful for deploying because the server can just run an instance of your project using Docker and it will be up and running in no time.

Dockerize

To get the benefits of Docker you have to dockerize your project which involves adding some necessary Docker files to get your project to be built on any machine that has Docker installed.

Docker uses a file called “Dockerfile” which are sets of instructions for Docker to properly build your project. You can have multiple Dockerfiles to handle different build types for your project. A often used method is to have two Dockerfile files — one for development mode and another one for production mode.

Dockerfile.dev for Development

To specify a Dockerfile that you want Docker to use to build and run the project locally, or in development mode, you can name it

Dockerfile.dev

As an example, to dockerize a React project I would have the following in my Dockerfile.dev file

Dockerfile.dev

The basic gist of the above file is to tell Docker to:

  1. get node:13.12.0.-alpine and set it as the base
  2. then set the working directory to /app then create an environment with everything in node_modules folder.
  3. then copy everything in package.json and package-lock.json to the working directory.
  4. then install npm dependencies and install react-script on lines 14 and 16
  5. then add the app to the directory
  6. finally run npm start in the command terminal

Once I have Dockerfile.dev filled I need to tell docker-compose.yml file to use the Dockerfile.dev as the build dockerfile as shown on line 8.

docker-compose.yml

Once you have all that run

docker-compose build

to build your project using the Dockerfile.dev as the Dockerfile.

Once you have built to run your built run

docker-compose up

Then go to your browser go to http://localhost:3000/ to see your react app running on a docker container. Now virtually anyone who has Docker installed on their machine can locally run your react project .

Dockerfile for Production and Deployment

More often projects are dockerized for deployment purposes. Lots of servers use Docker to serve applications because Docker is really efficient and it saves them lots of space while serving lots of apps.

Below is my Dockerfile for a react project for deployment. Note, this file does not contain any extension and it’s simply called

Dockerfile
Dockerfile

This Dockerfile is a little bit more involve because we not only have to build the React app but we need to serve it as well. So everything up until line 15 in this Dockerfile is pretty much identical to Dockerfile.dev that I talked about earlier, expect now we need to build the react app and add it to nginx to properly serve the react app (line 22).

Lines 20 to 24 deal with adding the react app and the nginx.conf file to nginx. Note, the nginx.conf file is needed in your react app for it to be able to be copied to the build. You can find it in my repo.

After we expose a port, we tell Docker to run $ nginx -g daemon off in the command line.

To test this Dockerfile run

docker build .

But the ultimate test for this is actually deploying it on a server like on Caprover. Caprover will automatically recognize a Dockerfile if there’s one and try to build your project from that file and serves your application if there are no errors during build.

I currently have it up here, but mostly it will be down in a few month because this is just a learning experience and I don’t intent to maintain or continue to pay the monthly server fee.

Thanks for reading!

Building iOS and web apps