Docker Local Development Workflow for React Application

Docker Local Development Workflow is usually different from a production workflow for any application. A local development workflow is strictly for developer working on their development machines.

The approach for deploying and testing an application in a development environment is different. Therefore, we need a separate Docker Development Workflow during development phase.

In an earlier post, we created a Docker Multi Stage build for running a React Application on a Nginx server. The approach in that post was towards deploying our React application for production purposes.

In this post, we will use the React application to demonstrate Docker Local Development Workflow.

1. Generating the React Application

To generate a boilerplate React application, we need to install a npm package known as create-react-app. Basically, this package allows us to generate a simple React application. We can install the package globally using the below command.

npm install -g create-react-app

Once we successfully install the package, we can use this package to generate a React application. To do so, simply navigate to a folder in your local computer where you want to place the application code. Then, issue the below command.

create-react-app docker-react-app

This will create a project by name docker-react-app. Now, open the project in an editor of choice. I personally prefer Visual Studio Code for NodeJS and React application.

2. Create the Development Dockerfile

Now, we have to create a Dockerfile for setting up Docker Local Development Workflow.

Since this file will only be for development environment, we will name it Dockerfile.dev instead of the usual Dockerfile. Also, note that the file should be created in the root of the project.

The instructions in the development Dockerfile are as below.

#Specify a base image
FROM node:alpine

#Setup working directory
WORKDIR '/app'

#Copy the dependencies file
COPY package.json .

#Install dependencies
RUN npm install

#Copy remaining files
COPY . .

#Start the application
CMD ["npm", "run", "start"]

To build a Docker image using this file, we need to execute the below command.

docker build -f Dockerfile.dev .

When we run the above command, below output will be generated.

Basically, this step builds a Docker image. The Docker image can be used to run the React application using our development-specific Dockerfile.

3. Duplicated Dependencies in Development

One interesting thing to note in the above Docker image build process was the first line. It says ‘Sending build context to Docker daemon 145.3MB‘.

The reason for this is that when we use create-react-app to generate our React application, it also installed all dependencies in the node_modules folder in our project directory. Typically, the node_modules folder has a ton of dependencies that greatly increase the size of our Docker build context.

However, we don’t need these dependencies in our local project directory. This is because when we build the Docker image we install the dependencies using the RUN command. At that point, the required dependencies are automatically downloaded and installed in the working directory. In other words, we are duplicating the dependencies by keeping the node_modules folder in our project directory.

To make things efficient, we can simply delete the node_modules folder and then run the Docker build command again.

As we can see, the Docker build context was much smaller in size as compared to last time. Also, the build process completed much faster.

4. Starting the Docker Local Development Container

Now that we have built the Docker image, we can start up a Docker container using it.

To do so, we can simply execute the below command.

docker run -p 3000:3000 <image_id>

Here, the -p tag maps the container port with the host machine port. Also, the image_id is the image id built by Docker build process in the previous step.

On running the above command, we will see an output as below:

We can also access the React application at http://localhost:3000.

Conclusion

Our Docker Local Development workflow is now successfully complete.

We now have a Dockerfile for local development purpose. This allows us to maintain two separate Dockerfiles for development and production deployment.

You can refer to the Dockerfile at Github along with the rest of the project.