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.