Dockerizing IONIC React-vite App gives "Connection was Reset" when accessing from Host

Question

I ran into an issue when trying to host my ionic web app in a docker container. Mapping the ports as 8100:8100 should allow me to access through 8100 from my Host, but it didn't. Below were my Dockerfile and Docker-Compose.

FROM node:18-alpine
WORKDIR /app
COPY package*.json /app/
RUN npm install -g @ionic/cli
RUN npm install
COPY / /app/
CMD [ "npm", "start" ]

services:
  web:
    build: .
    ports:
      - '8100:8100'

Running docker ps will give me this:

PS D:\Projects\react-asset-client> docker ps
CONTAINER ID   IMAGE                    COMMAND                  CREATED          STATUS          PORTS                     NAMES
06762b1eba8f   react-asset-client-web   "docker-entrypoint.s…"   2 minutes ago    Up 2 minutes    0.0.0.0:8100->8100/tcp    react-asset-client-web-1
ff0496344563   hello-spring-boot-rest   "/__cacert_entrypoin…"   20 minutes ago   Up 20 minutes   0.0.0.0:8000->8080/tcp    hello-spring-boot-rest-1
a7459e7e3811   postgres:latest          "docker-entrypoint.s…"   20 minutes ago   Up 20 minutes   0.0.0.0:55560->5432/tcp   hello-spring-boot-db-1

As you can see, I am already running two other services and I can access both of them as expected.

Finding a fix, I came across this question that someone asked (docker run connection was reset while the page was loading). The solution for him was to set the server's hostname to 0.0.0.0 from localhost.

In ionic --help it shows this --host=<host> ................... Use specific host for the dev server (default: localhost)

Answer 1

SOLUTION: since in my dockerfile I am calling my npm start script I will update that from:

"scripts": {
    "dev": "vite",
    "build": "tsc -p /app/ && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint",
    "start": "ionic --version && ionic serve"
}

to

"scripts": {
    "dev": "vite",
    "build": "tsc -p /app/ && vite build",
    "preview": "vite preview",
    "test.e2e": "cypress run",
    "test.unit": "vitest",
    "lint": "eslint",
    "start": "ionic --version && ionic serve --host=0.0.0.0"
}

This solves my issue