Dockerizing Your React App: A Step-by-Step Guide

Dockerizing Your React App: A Step-by-Step Guide

·

4 min read

Docker is a popular tool for software developers and engineers looking to streamline the process of building, testing, and deploying applications. With its ability to create lightweight, portable containers that can run on any platform, Docker has significantly impacted the way we build and deploy software applications.

One of the many benefits of Docker is that it allows you to easily containerize your applications, which can help to simplify the process of deploying your code to different environments. In this article, we will focus specifically on how to Dockerize a React application.

React is a popular JavaScript library for building user interfaces, while Vite is a modern build tool that enables fast and efficient development.

Prerequisite

To follow along in this tutorial, you will need the following:

  • Node and npm installed on your machine

  • A recent version of Docker on your local machine.

  • A text editor (preferably, VSCode)

Create a React Application

  1. Create a new folder and open it within your text editor. Navigate to your terminal and type in the following command:

     npm create vite@latest . //or yarn create vite .
    

    Follow the prompts and vite will create a new react application within your current directory.

  2. Go into the package.json file within your application and update the dev command within the script tag with this

     "dev": "vite --port 3000 --host",
    

    This will configure the port that your react application will be served and hosted within your development environment.

  3. Type in the following command to start your development server

     npm run dev
    

How to Dockerize a React Application

  1. Create two files in the root directory named Dockerfile Dockerfile.dev respectively. The difference between these files is that the former is used for a production build while the latter is used for a development build.

    For best practice, it's recommended that two docker files are used, one for development; and the other for production.

  2. Copy the following code into the two Dockerfiles

     # This tells us the version of node image we want to use.
    
     FROM node:latest
    
     # This tells Docker to create a directory so that other commands will use it
     WORKDIR /app
    
     #Copy Our package.json and package-lock.json file into the app directory to tell node the module we want to use
     COPY package.json /app
    
     #To install the dependencies inside our image
    
     RUN npm install
    
     # Copy everything from ourlocal directory to the image in the code directory
     COPY . /app
    
     # Navigate to the application entry point and run the image
    
     CMD [ "npm", "run", "dev" ]
    
  3. Create a new file within the root directory and name it docker-compose.yml Copy the code below and paste it into the file

     version: "2.15.1" #We specify a version for Compose. Make sure Compose is compatible with Docker
     services:
       client: #Define the client service so we can run it in an isolated environment.
         stdin_open: true
         build:
           context: .
           dockerfile: Dockerfile.dev #The client service requires a docker file to be specified. For development, we’re going to use the Dockerfile.dev file.
         ports:
           - "3000:3000" #Next, we map the port 3000 to Docker. The React application runs on port 3000, so we need to tell Docker which port to expose for our application.
         volumes:
           - "/app/node_modules"
           - "./:/app"
    

    Docker Compose is a tool used to run multiple Docker containers together in a coordinated way. With Docker Compose, you can define a set of containers that make up your application and specify how they should be configured and run.

    This simplifies the process of deploying and managing multi-container applications, enabling you to scale your application up or down and providing a consistent deployment process.

  4. Now that we have set up our application. Go to your terminal and type in the following code to build the application

     docker-compose up
    

    Note: Make sure your docker desktop is running before you run the above command. To run your docker desktop, simply open the application.

If everything ran successfuly, you should see a message like the one below in your terminal

docker-compose up
[+] Running 1/1
 - Container docker-react-client-1  Recreated                                                                                                1.6s 
Attaching to docker-react-client-1
docker-react-client-1  | 
docker-react-client-1  | > docker-react@0.0.0 dev 
docker-react-client-1  | > vite --port 3000 --host
docker-react-client-1  | 
docker-react-client-1  | 
docker-react-client-1  |   VITE v4.1.4  ready in 4809 ms
docker-react-client-1  | 
docker-react-client-1  |   ➜  Local:   http://localhost:3000/
docker-react-client-1  |   ➜  Network: http://172.19.0.2:3000/

Voila!! You have dockerized your first react application. Now you can go ahead and develop your application and all the changes you make will be automatically picked up by docker whenever you run the docker-compose up command.

To see your application, go to your browser and type localhost:3000

If you found this helpful, please like, comment and share it. I'd like this article to reach as many people as possible.

The source code can be found here on github. Don't forget to star ⭐

Did you find this article valuable?

Support Tonie by becoming a sponsor. Any amount is appreciated!