Question 349549 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Haven't access to ports to conteinerized react app

I can’t get access to my container, but after it creation I have such message:

enter image description here

I propose that this problem occures by bad ports configuration.

#Dockerfile

FROM node:20.11.1-alpine as builder
WORKDIR /app
COPY package.json ./
COPY package-lock.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD [ "npm", "run", "dev" ]

#docker-compose.dev.yml

version: "3.8"

services:
  app:
    container_name: front-end-app
    image: app-dev
    build:
      context: ./../
      dockerfile: ./Dockerfile
    volumes:
      - ./src:/app/src
    ports:
      - 5173:5173
    stdin_open: true
    env_file:
      - ./../.env

#package.json

  "scripts": {
    "dev": "vite",
}

!updated
#vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [tsconfigPaths(), react()],
});
Tags:

2

Answers


  1. 0

    Most likely the issue is related to port mapping. Do docker logs and docker inspect in the terminal and share the logs if possible.

    Login or Signup to reply.
  2. 0

    I see that you don’t have the correct vite configuration. You should add a couple of lines to it to make it possible for vite to work in the docker

    import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tsconfigPaths(), react()],
  server: {
    watch: {
      usePolling: true,
    },
    host: true,
    strictPort: true,
    port: 5173,
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search