DEV Community

SOVANNARO
SOVANNARO

Posted on • Edited 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)