Question 81951 in Docker Question posted in
The official documentation can be found here.

Vite + React Docker

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

Tags:

3

Answers


  1. 0

    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": {
   ...
  }
}
    Login or Signup to reply.
  2. 0

    I had the exact same issue from the same config, I found the solution here :

    https://stackoverflow.com/a/68595302/16795034

    Login or Signup to reply.
  3. 0

    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"]
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search