vite react dockerfile build can't connect site

Question

I got stuck while creating a dockerfile that combined React, Vite, and Redux.

I composed the Docker file first, built the Docker file, ran it, confirmed that it worked, and then ran docker-compose. The image did not run.

docker-compose.xml

version: '3'
services:
  react:
    container_name: react
    build:
      context: ./
      dockerfile: ./Dockerfile
    ports:
      - "8080:8080"
    # volumes:
    #   - app:/app
    # command: [ "npm", "run", "dev" ]
    networks:
      - net
  
    
volumes:
  app:

networks:
  net:

Dockerfile

FROM node:latest

RUN mkdir /app
RUN apt update -y

# set path
WORKDIR /app

EXPOSE 8080

# COPY package*.json .

RUN npm create vite@latest /app -- --template react -y
RUN npm install @reduxjs/toolkit react-redux
RUN npm install --silent




# RUN npx create-react-app history
COPY . .

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

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

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
     usePolling: true,
    },
    host: true, // Here
    strictPort: true,
    port: 8080, 
  }
})

package.json

{
"name": "-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
  "dev": "vite",
  "build": "vite build",
  "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview"
},
"dependencies": {
  "@reduxjs/toolkit": "^1.9.7",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-redux": "^8.1.3"
},
"devDependencies": {
  "@types/react": "^18.2.37",
  "@types/react-dom": "^18.2.15",
  "@vitejs/plugin-react": "^4.2.0",
  "eslint": "^8.53.0",
  "eslint-plugin-react": "^7.33.2",
  "eslint-plugin-react-hooks": "^4.6.0",
  "eslint-plugin-react-refresh": "^0.4.4",
  "vite": "^5.0.0"
}
}

When I go into the Docker file image after building it, the related files exist and the process is up, but it doesn't seem to be connected.

What is Problem ?

Answer 1

After modifying a few places of code, I confirmed that it was connected properly.

Dockerfile

FROM node:latest

RUN mkdir /app
RUN apt update -y

# set path
WORKDIR /app
# COPY package*.json ./
# RUN npm create vite@latest /app -- --template react -y
# RUN npm install @reduxjs/toolkit react-redux

COPY . .

RUN npm install --silent

EXPOSE 8080

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

vite.config.js

host: '0.0.0.0',

Lastly, I moved the files and folders that appear when running

npm create vite@latest /app -- --template react -y.