DEV Community

Cover image for A beginners guide to Dockerizing a React application
Apollo Fredrick
Apollo Fredrick

Posted on

A beginners guide to Dockerizing a React application

#docker #react #devops #beginners

Containerization is a powerful tool in modern web development as it allows consistency in running applications in all platforms. Docker is a popular containerization tool as it offers consistency, scalability, and ease of deployment.

In this tutorial, we are going to perform the following tasks:

  1. Creating a basic React/Vite app.

  2. Dockerizing the application.

  3. Building and testing the Docker image locally

  4. Pushing the image to Docker Hub

Prerequisites

  • Node.js(version 18 or higher)

  • Docker Desktop installed

  • Docker Hub account

Creating a React/Vite project

Open the project folder in your code editor and run the following commands in the terminal:

npm create vite@latest react-docker --template react 
cd react-docker
npm install
Enter fullscreen mode Exit fullscreen mode

Start the development server to ensure that the app works:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Creating a Dockerfile

A Dockerfile is a text file containing a set of instructions used to automate the creation of a Docker image. It provides a blueprint for building an isolated environment, essentially packaging an application and its dependencies into a self-contained unit.
A Dockerfile consists of a series of commands (instructions) that tell Docker how to build the image.
Create a file called Dockerfile in the root directory(do not add any extension in the name)

FROM node:18-alpine AS builder
# Use a lightweight Node.js image for building the application
# Use the official Node.js image as the base image

WORKDIR /app
# Set the working directory inside the container

COPY package*.json ./
# Copy package.json and package-lock.json to the working directory
# This allows us to install dependencies before copying the rest of the application code

RUN npm install
# Install the dependencies defined in package.json
# This will create a node_modules directory with all the dependencies

COPY . .
# Copy the rest of the application code to the working directory
# This includes the source code, configuration files, etc.

RUN npm run build
# Build the application using the build script defined in package.json
# This will create a production-ready build of the application

RUN npm install -g serve
# Install the serve package globally to serve the built application

EXPOSE 5173
# Expose port 5173 for the application to be accessible from outside the container

CMD ["serve", "-s", "dist", "-l", "5173"]
# Start the application using serve, serving the built files from the dist directory on port 5173
Enter fullscreen mode Exit fullscreen mode

Creating the .dockerignore file

The .dockerignore file helps avoid sending unwanted files and directories to Docker Hub.
Create the .dockerignore file in the root directory.

dist
node_modules
env
Enter fullscreen mode Exit fullscreen mode

Building the image

Ensure that the Docker Desktop is running.
Run the following command in the terminal.

docker build -t react-docker .
Enter fullscreen mode Exit fullscreen mode

Testing the image locally

Run the following command:

docker run -d -p 5173:5173 react-docker
Enter fullscreen mode Exit fullscreen mode

Visit http:localhost:5173 to see your app running

Pushing to Docker Hub

  • Log in to Docker Hub: 
docker login -u <username>
Enter fullscreen mode Exit fullscreen mode
  • Tag your image with your Docker Hub repository: 
docker tag react-docker username/react-docker
Enter fullscreen mode Exit fullscreen mode
  • Push to Docker Hub 
docker push username/react-docker
Enter fullscreen mode Exit fullscreen mode

  • Verify your image in Docker Hub
    Open the browser and log in to your Docker Hub account.
    Your image should be listed in the repositories.

  • Pull and run the image remotely
    You can pull the image and run it in a separate machine

docker pull username/react-docker
Enter fullscreen mode Exit fullscreen mode 
docker run -d -p 5173:5173 username/react-docker
Enter fullscreen mode Exit fullscreen mode

Conclusion

By containerizing your React/Vite application, you've created a portable, scalable deployment artifact. Docker Hub serves as your distribution hub, enabling seamless deployment to any environment that supports Docker. This foundation unlocks advanced deployment strategies like rolling updates, blue-green deployments, and autoscaling.

Top comments (0)