I'm trying to run my vite+react app using the docker container, the code is running fine but unfortunately, it's not opening in localhost 3000

DockerFile

FROM node:18-alpine

EXPOSE 3000

WORKDIR /react-vite-app

COPY package.json .

RUN yarn install

COPY . .

CMD [ "yarn","build"]

docker-compose.yml

version: "3.8"
services:
    reactapp:
      build: ./dir
      container_name: react_vite_app
      ports:
        - '3000:3000'

Is something missing, If something is wrong please help me to fix this

I'm trying to run my vite+react app using the docker container, the code is running fine but unfortunately, it's not opening in localhost 3000

DockerFile

FROM node:18-alpine

EXPOSE 3000

WORKDIR /react-vite-app

COPY package.json .

RUN yarn install

COPY . .

CMD [ "yarn","build"]

docker-compose.yml

version: "3.8"
services:
    reactapp:
      build: ./dir
      container_name: react_vite_app
      ports:
        - '3000:3000'

Is something missing, If something is wrong please help me to fix this

• javascript
• reactjs
• docker
• docker-compose
• vite

• What URL are you trying to connect to and what error do you get? How does the application set up its network listener; can you edit the question to include the required application code as well? (Wild guess: it's only listening on the 127.0.0.1 container-private localhost interface, and you need to set it to listen to 0.0.0.0 instead.) – David Maze Commented Sep 6, 2022 at 14:59
• vite listens on localhost:5173 by default. You may also need the --host option to make it listen to connections outside of localhost if you run it in a docker. – Haltarys Commented Sep 22, 2022 at 13:28
• Exact same issue, I find the solution here : stackoverflow.com/a/68595302/16795034 – Sylvain L Commented Oct 20, 2022 at 12:29
• 1 Does this answer your question? Unable to Dockerize Vite React-Typescript Project – BDL Commented May 21, 2024 at 8:12

4 Answers 4

Set port in vite config to 3000

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  plugins: [ your plugins here ],
})

Also run docker like this

FROM node:18-alpine

WORKDIR /react-vite-app

EXPOSE 3000

COPY package.json package-lock.json ./

RUN npm install --silent

COPY . ./

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

my settings

Dockerfile

FROM node:18-alpine

WORKDIR /app

COPY . /app

ENV NODE_ENV=production

RUN npm install serve -g

RUN npm install

RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "serve"]

package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite -p 3000",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "serve": "serve -s dist -p 3000"
  },
  "dependencies": {
   ...
  },
  "devDependencies": {
   ...
  }
}

Don't forget to set host in your vite.config.js file because you might encounter connection reset problem when you open your browser

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
  preview: {
    host: '0.0.0.0',
    port: 8000,
  },
})

Dev : npm run dev, listening port : 3000

Prod : npm run build npm run preview, listening port : 8000

By default the react vite application is available only inside the docker container's internal network. To expose it to our local machine's port we need to give host: true in server configuration inside vite.config.ts file.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vite.dev/config/
export default defineConfig({
    plugins: [react(), svgr()],
    server: {
        host: true,
    },
    build: {
        outDir: 'build',
    },
});