DEV Community

SOVANNARO
SOVANNARO

Posted on

🚀 Deploy Your React + Vite App with Docker (Step-by-Step Guide)

#docker

Hey there, developer friends! 👋
So, you've built something amazing with React + Vite, and now you're thinking...

"How can I package and deploy this like a pro?"

The answer: Docker! 🐳
Today, we’ll walk you through a simple and joyful journey to containerize your app and get it ready for deployment.

🌱 Why Docker?

Before we dive in, let’s understand why Docker is such a game-changer:

  • ✅ Package your app and its dependencies into a neat container.
  • ✅ No more “works on my machine” headaches.
  • ✅ Easy to ship and deploy anywhere (server, VPS, cloud).

🧠 What You'll Learn

By the end of this blog, you'll be able to:

  • Create a production build of your Vite app.
  • Write a Dockerfile to containerize it.
  • Run the app in a Docker container like a boss.

Let’s go!

🛠️ Step 1: Create a React + Vite App

If you don’t have a Vite project yet, create one:

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

To preview it locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Looking good? Great! Let’s move to production.

🧱 Step 2: Build the App

We need to build the app for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

This creates a dist/ folder with optimized static files. These are the files we’ll serve in Docker.

📦 Step 3: Create a Dockerfile

Inside your project root, create a file called Dockerfile (no file extension):

# Step 1: Use an official Nginx image
FROM nginx:alpine

# Step 2: Copy build files to Nginx public folder
COPY ./dist /usr/share/nginx/html

# Step 3: Copy custom Nginx config (optional, but recommended)
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# Step 4: Expose port 80
EXPOSE 80

# Step 5: Start Nginx
CMD ["nginx", "-g", "daemon off;"]
Enter fullscreen mode Exit fullscreen mode

✅ This tells Docker to use Nginx to serve your static files efficiently.

🧾 Step 4: Add Nginx Config (optional but good)

Create a file called nginx.conf in the project root:

server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri /index.html;
  }
}
Enter fullscreen mode Exit fullscreen mode

This helps support React Router by redirecting unknown routes to index.html.

🧪 Step 5: Build the Docker Image

Now let’s build the image!

docker build -t my-vite-app .
Enter fullscreen mode Exit fullscreen mode

This bundles your app into a Docker image named my-vite-app.

🚴 Step 6: Run the Container

Run the app in a container:

docker run -d -p 8080:80 my-vite-app
Enter fullscreen mode Exit fullscreen mode

Open your browser and go to:

👉 http://localhost:8080

Boom! Your Vite + React app is now running inside Docker! 🎉

🧹 Bonus Tip: .dockerignore

To speed up Docker builds, create a .dockerignore file:

node_modules
dist
.git
.vscode
Enter fullscreen mode Exit fullscreen mode

Just like .gitignore, this tells Docker what not to copy.

🎯 Final Project Structure 

my-vite-app/
├── dist/
├── src/
├── public/
├── Dockerfile
├── nginx.conf
├── .dockerignore
├── index.html
├── package.json
└── vite.config.js
Enter fullscreen mode Exit fullscreen mode

🌍 Deploy Anywhere!

Now that you have a Docker image, you can:

  • Deploy to your VPS using Docker
  • Push to Docker Hub and run anywhere
  • Deploy to cloud services like DigitalOcean, Render, or Railway

🎉 That’s a Wrap!

You did it! 👏
You just Dockerized a React + Vite app like a true modern developer.

Whether you’re building a portfolio, a side project, or the next big thing, this is a pro move.

If this guide made you smile even once, mission accomplished 😄
Go ahead — share it, clone it, and build more magic!

Happy coding! 💻💙
Got questions? Just drop them in the comments or send smoke signals (or just message me 😄).

Top comments (0)