CODEWITHSUNDEEP
dockervue.jsdockerfiledocker-container
jemz
jemz

Reputation: 5153

Vue Vite cannot connect to docker container

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.

Upvotes: 3

Views: 7030

Answers (2)

Mohamed_Hafez
Mohamed_Hafez

Reputation: 11

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

Upvotes: 1

mike
mike

Reputation: 81

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"

Upvotes: 8

Related Questions