Browser not rendering Dockerized AngularJS app - node.js

Question

So, I'm trying to dockerize an AngularJS app for some practice. Here is my repo https://github.com/Nigel33/angularJS_docker_test:
(Its from the official Angular-phonecat repo but i added Dockerfile and docker-compose)
Here's my Dockerfile:
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm install && \
npm run start
EXPOSE 8000
CMD [ "http-server", "dist" ]
Here's my docker-compose.yml:
version: '3'
services:
front:
build: .
command: bash -c "npm start"
volumes:
- .:/angular-phonecat
ports:
- "8000:8000"
When I do docker-compose build then docker-compose up, it seems to run based on the logs:
Building front
Step 1/8 : FROM node:lts-alpine
---> b95baba1cfdb
Step 2/8 : RUN npm install -g http-server
---> Using cache
---> 082793f64510
Step 3/8 : WORKDIR /app
---> Using cache
---> e76e23fa5a08
Step 4/8 : COPY package*.json ./
---> Using cache
---> 9960651e0929
Step 5/8 : COPY . .
---> c06eaebcfb38
Step 6/8 : RUN npm install && npm run start
---> Running in e2622118028d
npm WARN lifecycle angular-phonecat#0.0.0~postinstall: cannot run in wd angular-phonecat#0.0.0 npm run copy-libs (wd=/app)
audited 3777 packages in 6.409s
found 57 vulnerabilities (2 low, 2 moderate, 53 high)
run `npm audit fix` to fix them, or `npm audit` for details
> angular-phonecat#0.0.0 prestart /app
> npm install
npm WARN lifecycle angular-phonecat#0.0.0~postinstall: cannot run in wd angular-phonecat#0.0.0 npm run copy-libs (wd=/app)
audited 3777 packages in 5.338s
found 57 vulnerabilities (2 low, 2 moderate, 53 high)
run `npm audit fix` to fix them, or `npm audit` for details
> angular-phonecat#0.0.0 start /app
> http-server ./app -a localhost -p 8000 -c-1
Starting up http-server, serving ./app
Available on:
http://localhost:8000
Hit CTRL-C to stop the server
But when I open up my browser and navigate to localhost:8000, I get the "this site can't be reached" page. Any idea whats wrong?? Thank you!
UPDATES
Dockerfile
FROM node:lts-alpine
RUN npm install -g http-server
WORKDIR /app
COPY package*.json ./
COPY . .
RUN npm install
EXPOSE 8000
CMD ["npm", "run", "start"]
Docker-compose:
version: '3'
services:
front:
build: .
ports:
- "8000:8000"
Terminal
Building front
Step 1/8 : FROM node:lts-alpine
---> b95baba1cfdb
Step 2/8 : RUN npm install -g http-server
---> Using cache
---> 082793f64510
Step 3/8 : WORKDIR /app
---> Using cache
---> e76e23fa5a08
Step 4/8 : COPY package*.json ./
---> Using cache
---> 9960651e0929
Step 5/8 : COPY . .
---> Using cache
---> 35b3086dc43d
Step 6/8 : RUN npm install
---> Using cache
---> 961eddc4df33
Step 7/8 : EXPOSE 8000
---> Using cache
---> ede5977a2a0e
Step 8/8 : CMD ["npm", "run", "start"]
---> Using cache
---> efc2186c9bf2
Successfully built efc2186c9bf2
Successfully tagged angular-phonecat_front:latest
Chriss-Air:angular-phonecat chrisshopline$ docker-compose up
Creating network "angular-phonecat_default" with the default driver
Creating angular-phonecat_front_1 ... done
Attaching to angular-phonecat_front_1
front_1 |
front_1 | > angular-phonecat#0.0.0 prestart /app
front_1 | > npm install
front_1 |
front_1 | npm WARN lifecycle angular-phonecat#0.0.0~postinstall: cannot run in wd angular-phonecat#0.0.0 npm run copy-libs (wd=/app)
front_1 | audited 3777 packages in 4.622s
front_1 | found 57 vulnerabilities (2 low, 2 moderate, 53 high)
front_1 | run `npm audit fix` to fix them, or `npm audit` for details
front_1 |
front_1 | > angular-phonecat#0.0.0 start /app
front_1 | > http-server ./app -a localhost -p 8000 -c-1
front_1 |
front_1 | Starting up http-server, serving ./app
front_1 | Available on:
front_1 | http://localhost:8000
front_1 | Hit CTRL-C to stop the server
Still having the same issue though :-/

Answer 1

The above logs from the Docker build, not from the container. As the build process stuck at
RUN npm install && \
npm run start
You do not need to start application at Dockerfile RUN command. It should be in CMD or Entrypoint
Update your Dockerfile and it should work.
RUN npm install
Also, Something in Docker-compose should be clear.
command: bash -c "npm start"
volumes:
- .:/angular-phonecat
It will override the CMD that is defined in Dockerfile CMD [ "http-server", "dist" ].
It will also override - .:/angular-phonecat. you do not need volume if you already copied the app in the build stage.
update:
I see that you are setting address in your package.json to localhost. It should be 0.0.0.0 or you can set CMD http-server . or http-server -a 0.0.0.0 -p 8000 -c-1. or http-server -d /app/dist/ -a 0.0.0.0 -p 8000 -c-1.
Also, the dist does not exist in your repo, I assume it exist in your build directory where you copy during docker build.