A Beginner's Guide to Dockerizing React Applications Built with Vite
Published: 2024-02-06 17:24:41

---
title: A Beginner's Guide to Dockerizing React Applications Built with Vite
published: true
date: 2024-01-26 19:53:04 UTC
tags: 
canonical_url: https://danrez.hashnode.dev/a-beginners-guide-to-dockerizing-react-applications-built-with-vite
---

## Introduction

Containerizing React apps introduces developers to Docker, which streamlines deployment, scalability, and consistency across environments. This beginner's guide covers Dockerizing Vite-built React apps. This detailed essay explains Docker containers and provides step-by-step directions for containerising React apps and streamlining the development workflow with Docker and Vite.

## Prerequisites for this technical article:

1. **Basic knowledge of React:**

2. **Understanding JavaScript and ES6:**

3. **Experience with Web Development:**

4. **Introduction to Node.js and npm:**

5. **Basic Docker Understanding (Optional):**

6. **Development Environment Setup:**

7. **Access to a Docker Environment (Optional):**

Our Vite + React app requires Node 16 or higher and a relevant npm version. Run the following command on the command prompt to check the node version:

```
node --version
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706213135513/e29e1dec-7db4-4b5c-b6ce-4ac8ece63ff6.png)

## Setting up the project

To set up our project, open up the terminal on VS Code and run the following command: Give a project name, choose React as a framework and Javascript as a variant.

```
npm create vite@latest
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706213966382/0589cef3-1447-4d08-9c17-96fbe741491d.png)

Run the following commands to navigate to your project directory and open it in the VS Code Editor:

```
cd docker-react-appcode .
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706214302306/2b43744e-327a-410b-b6ae-0a9ce2dc6ee1.png)

The image above shows what the file structure should look like.

Run the following command to install the necessary packages:

```
npm install
```

Use the following command to run the application:

```
npm run dev
```

When you open the link [http://localhost:5173/](http://localhost:5173/) in the browser, you should see the following:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706214781770/e569463c-3f21-4954-932e-daabbcb54c4b.png)

## Configuring vite. config.js

The Vite configuration is an object having keys like plugins, server, build, preview, optimizeDeps, worker, and more. Check more here [config](https://vitejs.dev/config/)

Only the most essential configuration choices will be covered in this tutorial. You can easily get everything set up by copying and pasting the configuration parameters provided below.

```
import { defineConfig } from 'vite'import React from '@vitejs/plugin-react'// https://vitejs.dev/config/export default defineConfig({ base: "/", plugins: [react()], preview: { port: 8080, strictPort: true, }, server: { port: 8080, strictPort: true, host: true, origin: "http://localhost:8080", },});
```

Let's break down the key elements of this configuration:

1. `import { defineConfig } from "vite";`

2. `react from "@vitejs/plugin-react";`

3. `export default defineConfig({ ... });`

4. `base: "/"`

5. `plugins: [react()]`

6. `preview: { port: 8080, strictPort: true }`

7. `server: { port: 8080, strictPort: true, host: true, origin: "`[`http://0.0.0.0:8080`](http://0.0.0.0:8080)`" }`

Run the following command to build our app for production.

```
npm run build
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706287777563/e4f52eb6-f368-45e7-8bfc-80709756f1bd.png)

Run the following command to serve the build

```
serve -s dist
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706287963393/6ca56e36-b029-49b7-9a9c-c0010a065a03.png)

## Dockerizing the application

Dockerization requires Docker installation. Running docker in the terminal checks if docker is installed. If not installed head here to install it [install docker](https://docs.docker.com/)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706291649757/9f51ca17-9e97-4123-997d-84858aa0b6d0.png)

If it looks like the image above, docker is installed. Remember to start Docker Desktop if you use it.

Let's break down each section of the following Dockerfile:

```
FROM node:18-alpineWORKDIR /appCOPY package.json.RUN npm installCOPY . .RUN npm run buildEXPOSE 8080CMD ["npm", "run", "preview"]

FROM node:18-alpine
```

Specifies the base image for the Docker container. In this case, it's using the official Node.js image with Alpine Linux as the base. The Alpine variant is a lightweight distribution, making the resulting Docker image smaller.

```
WORKDIR /app
```

Sets the working directory inside the container to `/app`. This is where your application code will be copied, and subsequent commands will be executed.

```
COPY package.json
```

Copies the `package.json` file from the local directory (the directory where the Dockerfile is located) into the container at the current working directory (`/app`).

```
RUN npm install
```

Runs the `npm install` command inside the container. This installs the dependencies specified in the `package.json` file. The `node:18-alpine` base image includes Node.js and npm, allowing you to use them in your container.

```
COPY . .
```

Copies all the remaining files from the local directory into the container at the current working directory (`/app`). This includes your application source code.

```
RUN npm run build
```

Runs the `npm run build` command inside the container. This assumes that you have a build script defined in your `package.json` file. The build script is responsible for building your Next.js application.

```
EXPOSE 8080
```

Exposes port 8080. This is a declaration rather than an actual command to open the port. It informs anyone who might run the container that the application inside will use port 8080.

```
CMD ["npm", "run", "preview"]
```

Specifies the command to run when the container starts. This uses the `CMD` instruction to set the default command for the container. In this case, it runs the `npm run preview` command, assuming you have a `preview` script defined in your `package.json` file. This command starts the application.

Now create a **Dockerfile** at the root directory of your application and copy and paste the code above in it.

We can construct a Docker image from this Dockerfile before adding a docker-compose file. The following command can be executed to create an image from a Dockerfile:

```
docker build . -t "sample-project:v1.0"
```

This command accomplishes two goals.

Builds a Docker image from the current context; appends the "sample-project" and "v1" versions to the picture.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706296761770/4bbe4f5b-6bcd-4fc8-8c77-d37ec28cddfb.png)

Now we can run the following command on our local PC to see what docker images are accessible.

```
docker images
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706296987199/13a5f320-41e0-404b-a201-ec8852390316.png)

Very well. This image is now known as a container, so let's see if it runs. To launch a container using the "sample-project:v1.0" image, use the following command.

```
docker run -p 8080:8080 sample-project:v1.0
```

Here we are! Let's check [localhost:8080](http://localhost:8080) now. Within a Docker container, we have an application called Vite + React running.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706297198024/f8c275a9-d8e2-42c4-8cac-ed3efd272987.png)

Use the following command to get an ID in return:

```
docker run -d -p 8080:8080 sample-project:v1.0
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706297723069/6f6c5676-9a48-46bc-a7ea-ea663fa0944c.png)

To make sure, we can execute the following command to get a list of all the containers that are now operating.

```
docker ps
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1706297804590/b526f12b-81d5-49f0-913c-5006306bc810.png)

## Conclusion

Finally, this beginner's guide has given a thorough rundown of Dockerizing React applications created with Vite, providing an easy way to containerize your apps. For consistent deployment across different settings, developers can package their Vite-based React applications using the Dockerfile and execute the Docker image.

Dockerization improves the scalability and mobility of React apps and makes teamwork in development easier. Docker containers enable a uniform and reproducible development and deployment workflow by encapsulating application code, environment settings, and dependencies.

Developers who can figure out how to incorporate Docker into the React and Vite stack will be in high demand as containerization approaches gain traction. This tutorial helps newcomers to web development lay the groundwork for Dockerizing their React apps and reaping the benefits of this technology.

So that's the end of it. Throughout this post, we have discussed a great deal of material. I hope that you find this post to be informative. Be sure to give it a round of applause if you found it to be enjoyable. Additionally, make sure to share it with your friends and associates.