How to Use Docker with React and Vite
By Henri Parviainen
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:
-
Node.js: Ensure you have Node.js installed on your local machine as you'll need it to build and run your React app.
-
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.
- Open your terminal and run the following command to create new React App with Vite:
npm create vite@latest my-react-app
-
Select the
React
template andJavascript
when prompted. -
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.