How to use React or Vue with Vite and Docker?

This guide will provide details on how to create a Docker container with a new React project integrated with Vite. When combined, with Vite’s short build times and Docker’s ability to create a consistent and reproducible environment, you can quickly achieve developmental parity with the production environment. This also makes it easy to deploy your project to different environments with fewer complications.

Steps to use Docker with Vite React Application

First of all, let us make a simple React application with the help of Vite. This step should however be done before running the Docker software.

Step 1: Open your terminal, navigate to the directory where you want your project, and run the following command to create a new Vite React project

npm create vite@latest my-react-app -- --template react

Note: Here replace ‘my-react-app’ with the name of your project. You can replace it with the name that you will be comfortable with.

Step 2: Navigate into your project directory

cd my-react-app

Step 3: Install the required dependencies by running the following command

npm install

Step 4: Now, test if the Vite app runs properly by executing the following command

npm run dev

Step 5: Open your browser and go to http://localhost:5173. You should see Vite's default React welcome page.

Step 6: Creating a Simple Website

• Next, let’s modify the default Vite React app to create a simple webpage:
• In your src folder, locate App.jsx and replace its content with the following:

// App.jsx
 function App() {
  return (
    <div className="App">
      <h1>Hello, GeeksforGeeks!</h1>
      <p>Welcome to React with Vite and Docker</p>
    </div>
  );
}

export default App;

• The main.jsx file does not need to be changed. It should look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

Step 7: Now, run the development server again

npm run dev

Step 8: Open your browser and go to http://localhost:5173. You should see the text: "Hello, GeeksforGeeks! Welcome to React with Vite and Docker."

Step 9: Dockerfile Configuration

• Create a Dockerfile in the root of your project with the following content:

# Use the official Node.js image
FROM node:16-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application files
COPY . .

# Expose the application port
EXPOSE 5173

# Start the application using Vite's development server
CMD ["npm", "run", "dev"]

Step 10: Docker Compose Configuration

• Next, create a docker-compose.yml file in the project root:

version: '3'
services:
  react-app:
    build: .
    ports:
      - "5173:5173"
    volumes:
      - .:/app
      - /app/node_modules
    stdin_open: true
    tty: true

• This configuration builds the Docker image and maps port 5173 from your container to your local machine, allowing you to access the app via http:access to it using http://localhost:5173.

Step 11: Vite Configuration

• Ensure your package.json includes the necessary scripts for Vite:json includes the necessary scripts for Vite:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "vite": "^2.5.0"
  }
}

Step 12: Running the Application

• Run the following command to build the image and start the container:

docker-compose up

• Open your browser and visit http://localhost:5173. You should see this text:

Hello, GeeksforGeeks! Welcome to React with Vite and Docker

Output:

Conclusion

When using Vite together with Docker, one gets a fast and effective environment for development, which is easily replicable. The containerized setup also help in having similar machines throughout ensuring that deployments are ideal and no problems are encountered due to differences between dev and production.