I don't know how many of you guys have faced this or you will ever face it.

Bringing you this because when I was setting up my docker with Vite. I faced something that combined a lot of tweaking.

Let's just start with the basic setup first:

prerequisite:

• Docker

• Vite

• computer

STEP 1: Configure the Vite.config:

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 8000, // This is the port which we will use in docker
    // add the next lines if you're using windows and hot reload doesn't work
    watch: {
      usePolling: true,
    },
  },
});

In this whole configuration, the most important thing is PORT where you want to host the running client. So, you can put any PORT you want.

STEP 2: Now time for Dockerfile:

In this bracket you have to just look into CMD as vite starts with Dev, I have set it to Dev. If you are using base react then start.

FROM node:18.18.0-alpine

WORKDIR /code 
COPY package.json /code 
COPY package-lock.json /code 
RUN npm install 
COPY . .
CMD ["npm","run","dev"]

STEP 3: Lets compose it:

Final Step:

Here we use that port number we established before, the screenshot is of different activity. Hence for better understanding. Read the Code

docker run --rm -it --name web -p 8000:8000 react-docker:1.0.0-dev

WIth this you will be able to run your VITE in a container and later just host the image.

Hope you have learned something. And this might have helped you in your development.
Like it | Share it

Feel free to hit me up on Twitter or connect with me on LinkedIn if you like this.