Set up docker file for vite app and run vite app from docker container

[surajgaire14]

Set up docker for vite based app

Create a dockerfile in the frontend folder.

Dockerfile contents:

# Use the official Ubuntu base image
FROM ubuntu:latest

# Set the working directory in the container
WORKDIR /app

# Install required packages and set up Node.js LTS in a single step with cache cleanup
RUN apt-get update && \
    apt-get install -y --no-install-recommends \
    curl \
    gnupg \
    ca-certificates && \
    curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - && \
    apt-get install -y --no-install-recommends \
    nodejs && \
    apt-get clean && \
    rm -rf /var/lib/apt/lists/*

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the project files
COPY . .

# Expose the development server port (Vite defaults to port 5173)
EXPOSE 5173

# Start the Vite development server
CMD ["npm", "run", "dev"]

Build the docker image

docker build -t ming-frontend .

Run the container

docker run -p 5173:5173 ming-frontend

If the Site is still inaccessible then set the server to listen on public address in vite config file

  server: {
    host: true,
    port: 5173,
  },

First stop the container, delete the container and again rebuild the container

See the list of docker process status

docker ps -a

Then stop the container

docker stop containerId

Build the docker container

docker built -t ming-frontend .

Run the docker container

docker run -p 5173:5173 ming-frontend

Now we can access frontend in localhost:5173