CODEWITHSUNDEEP
reactjstypescriptdockervite
Leo Baby Jacob
Leo Baby Jacob

Reputation: 87

Unable to map docker port from vite app to local

I am trying to dockerize a scratch vite react ts app.

FROM node:15.12.0

WORKDIR /app

COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]

ADD . .

RUN npm install
EXPOSE 3000
CMD ["npm", "run", "dev"]

Docker compose:

version: '3.8'

services:
  dev:
    build: 
      context: ./
      dockerfile: Dockerfile
    volumes:
      - ./:/app
    ports:
      - '3000:3000'

I am starting it using docker up --build App seems to be started and ported because docker ps shows: f5e840a7fec3 leoapp/leo "docker-entrypoint.s…" 4 minutes ago Up 4 minutes 0.0.0.0:3000->3000/tcp sad_gates

But I am unable to access port 3000 on my browser. What am I doing wrong here. Vite uses esbuild internally. We need to rebuild esbuild for container architecture during the startup to make it function without errors.

Contents of: entrypoint.sh

#!/bin/sh

npm rebuild esbuild

exec "$@"
Dockerfile

# ...

COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]

# ...

When I access port 3000 I get this site cant be reached, however I am able to run the app if run normally i.e npm run dev

Upvotes: 3

Views: 2221

Answers (2)

Arham Abeer
Arham Abeer

Reputation: 21

Try to make your ost publicly available in vite.confi.ts

This worked for me.

export default defineConfig({
     plugins: [react()],
     server: {
      host: "0.0.0.0",  // publicly available
      port: 5173
     },
    });

Upvotes: 0

Md. Zayed Hassan
Md. Zayed Hassan

Reputation: 316

In your vite.config file you need to set host: true. So, your file should look similar to this:

export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true,
    },
    host: true, // needed for the Docker Container port mapping to work
    strictPort: true,
    port: 3000, // replace this port with any number you want
  }, 
})

Upvotes: 6

Related Questions