Vue Vite cannot connect to docker container

Question

Hi I have install fresh app vue3 typescript + vite , my problem after building the image and spin the container. I cannot access the localhost:3000, the browser will just display

The connection was reset

 docker run --rm -it  -v %cd%/:/app/src -p 3000:3000 myvitets

Dockerfile

FROM node:14-buster-slim


# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

RUN npm install


# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

EXPOSE 3000

CMD [ "npm", "run", "dev"]

I also add .dockerignore

 node_modules/
.git 
.gitignore

can someone help me please how to run my app to the container..

Thank you in advance.

TheQueenIsDead · Accepted Answer · 2021-08-12 15:17:15Z

8

I had the same problem and the below works for me.

In package.json, change the scripts

From

"dev": "vite"

To

"dev": "vite --host 0.0.0.0"

edited Aug 12, 2021 at 15:17

TheQueenIsDead

9517 silver badges20 bronze badges

answered Aug 12, 2021 at 0:24

mike

811 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed_Hafez · Accepted Answer · 2022-07-17 04:27:38Z

0

First: in the package.json add --host tag

  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview --port 4173",
    "test:unit": "vitest --environment jsdom"
  },

Second: in the vite.config.js add the server port

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000
  },
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

the port should be the same as in the Dockerfile, in your case 3000

answered Jul 17, 2022 at 4:27

Mohamed_Hafez

112 bronze badges

Collectives™ on Stack Overflow

Vue Vite cannot connect to docker container

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related