How to Use Docker with React and Vite

Introduction

Docker has become an essential tool for developers looking to streamline their development process and ensure consistent deployments across different environments. If you're a React developer, you might be wondering how to use Docker to containerize your React applications. In this article, we'll guide you through the steps to get started with Docker and show you how to set up a Dockerized environment for your React apps build with Vite.

What is Docker?

Docker is an open-source platform that automates the deployment of applications inside lightweight, portable containers. These containers are self-sufficient and contain everything your application needs to run, including the code, runtime, system tools, libraries, and dependencies. Docker containers can run consistently on any environment, making them a great choice for developing and deploying React applications.

Prerequisites

Before diving into Dockerizing your React app, you should have the following prerequisites in place:

1. Node.js: Ensure you have Node.js installed on your local machine as you'll need it to build and run your React app.
2. Docker: Install Docker on your machine. You can download Docker Desktop for Windows and macOS or use Docker Engine for Linux. Visit the official Docker website for installation instructions: Docker Install.

Create React App with Vite

Now that you have Docker and Node.js installed, you can create a new React app using Vite.

1. Open your terminal and run the following command to create new React App with Vite:

npm create vite@latest my-react-app

2. Select the React template and Javascript when prompted.
3. Next, navigate to the newly created directory and install the dependencies:

cd my-react-app
npm install

Now you have a basic React app created with Vite. You can run the app locally by running the following command:

npm run dev

Update vite config to support Docker

To run your React app in a Docker container, you need to update the vite config file to support Docker. Open the vite.config.js file and add the following code:

export default {
  server: {
    host: true,
  },
};

Next we will setup a Docker environment for our React app.

Using Docker with React and Vite

Now that we have a React app ready we can start setting up our Docker environment.

Step 1: Create a Dockerfile

A Dockerfile is a text file that contains instructions for building a Docker image. It defines the base image, sets up the environment, and specifies how to run your application. In your React app's root directory, create a file named Dockerfile (no file extension) and add the following content:

# Use an official Node.js runtime as a parent image
FROM node:16

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the rest of your application code to the working directory
COPY . .

# Expose a port to communicate with the React app
EXPOSE 5173

# Start your React app
CMD ["npm", "run", "dev"]

This Dockerfile sets up your environment using the official Node.js image and specifies the necessary instructions for running your React app.

Step 2: Build the Docker image

In your terminal, navigate to the directory containing your React app and the Dockerfile. Use the following command to build a Docker image:

docker build -t my-react-app .

Replace my-react-app with a name for your Docker image.

Step 3: Run Your Docker Container

Now that you have created a Docker image, you can run a Docker container based on this image with the following command:

docker run -p 5173:5173 my-react-app

This command maps port 5173 inside the container to port 5173 on your local machine, allowing you to access your React app through your browser. Now you should also see the container running in your Docker Desktop app.

Step 4: Access Your Dockerized React App

To access your Dockerized React app, open your browser and navigate to http://localhost:5173. You should see your React app running in the browser.

Conclusion

Dockerizing your React app can simplify the development and deployment process, making it easier to work with consistent environments across different platforms. By following the steps outlined in this article, you can quickly containerize your React app and start taking advantage of Docker's benefits in your development workflow.