How to Dockerize your React application in minutes
By: Sumit Mukhija
Tags: Programming, React, JavaScript, Docker, Software Development

How to Dockerize your React application in minutes

Getting set up with React and Docker

Docker is a great tool that streamlines deploying and creating applications. Docker basically injects your code into something called containers. A container is a tiny self contained environment. Think of your application in a container as a portable house. Everything your application needs is packed with it.

Why Docker?

I have been using Docker for a while now. It has saved me several hours troubleshooting. It has almost eliminated the need to manage the dependencies that worked on my machine but weirdly crashed the application on a peer’s machine. It puts an end to sizeable variabilities and takes away a lot of hassle and lets you focus on your primary task as a developer.

As Docker is essentially a container that hosts your application, framework or language is not a constraint. In this article, let us get our React application on Docker.

Note: This article focuses on the React applications created using create-react-app

Get your React application on Docker

Start with installing Docker on your computer. Installing Docker is fairly straightforward. It can be downloaded from their official site.

If you don’t already have a React application, you might want to create one using create-react-app <application_name>

Start with .dockerignore

Once you have a working React application, in the root of your project, You might want to start by creating .dockerignore file. This file is similar to the popular .gitignore . Anything file or folder you add to the .dockerignore will be overlooked by Docker. It is a good idea to put node_modules in this file. My Dockerignore looks like below

Move to Dockerfile

Next, create a Dockerfile . This file is the recipe that creates an image. It is a collection of independent commands that are executed sequentially to get the final image.

The contents of the Dockerfile are as follows

Dockerfile

Open terminal or command prompt and navigate to the project folder. The Dockerfile can be summed in 8 steps.

Line 2: We start by specifying the Node version. This is what we want to base our container off.

Line 5: We then create a directory in the Docker environment and designate it as the working directory.

Line 8: We then copy the package.json to the package.json inside the Docker container.

The package.json is a collection of all the third party modules that your application needs to execute successfully.

Line 11: To install the modules mentioned above, we then run npm install The RUN command tells the Docker to run the following command

Line 17: We copy all the files from your project directory including source code, assets etc to the work directory in the Docker container. We made this work directory on line 5.

Line 20: We then expose the port our application would be running on. Since React defaults to port 3000, we expose port 3000 in the Docker file.

Line 22: Finally, we set wheels to motion using our beloved npm start

That’s pretty much all we had to do. We can now move on to build the application with Docker.

Docker build

To build a docker container using the Dockerfile we created above, we run

docker build -t <identifier-for-your-app> .

The command is docker build. The -t is the tag that you use to assign your React project container to tell it apart from any other containers that you might build later. Think of it as a name for your container. I have named my container as market-react-app

docker build -t market-react-app .

The . in the end denotes the current context. It tells docker to build from your current directory. Your current directory should be the root of your project.

Final Steps

So far we have created an optional but recommended .dockerignore file, A Dockerfile , built the docker container. Now, we will run this Docker container using

docker run -p 8000:3000 market-react-app

The command above binds the two ports. According to the docs, it publishes the container port to the host.

Finally, fire up your web browser and navigate to localhost:8000 You should see your React application in all its glory.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!