Docker image build but can't see in browser - node.js

Question

I have an Angular project which I built an image, it runs in local, in other words, I can launch it with npm start, and see my app on localhost:4200.
But when I build it, I can't see the project in the browser on the same url. It's just my browser telling me it's unable to connect. I also used Postman same error.
Dockerfile :
FROM node:latest
# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install
# Bundle app source
COPY . /usr/src/app
EXPOSE 4200
CMD [ "npm", "start" ]
The command
docker build -t test-front .
...
docker run -it -p 4200:4200 test-front
It builds the image and run it well, but I can't access it on the browser.
I used the answer to this question to remake my Dockerfile:
Cannot find module for a node js app running in a docker compose environment
What I did:
I did a `docker exec -it NAME_OF_THE_CONTAINER /bin/bash` to get inside the container, I then retried `npm start` inside the container.
Since the port 4200 was in use, it asked me to use another port:
root#a66d5cff3e64:/usr/src/app# npm start
> xxx#0.0.0 start
> ng serve
? Port 4200 is already in use.
Would you like to use a different port? Yes
✔ Browser application bundle generation complete.
...
** Angular Live Development Server is listening on localhost:43225, open your browser on http://localhost:43225/ **
The project was launching correctly in the container, no error message.
I think, the container doesn't expose the port correctly.
Checking port
I used the command:
user#user:~/front$ docker port <container_name>
4200/tcp -> 0.0.0.0:4200
4200/tcp -> :::4200
This is what I have.
Small detail
I'd like to precise, that using node:boron in Dockerfile, made the docker run break. It didn't worked when I used docker run command.
With the message:
> xxxxxx#0.0.0 start /usr/src/app
> ng serve
/usr/src/app/node_modules/#angular/cli/bin/ng:26
);
^
SyntaxError: Unexpected token )
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:549:28)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.runMain (module.js:611:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:160:9)
npm ERR! Linux 5.11.0-22-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.17.1
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! xxxx#0.0.0 start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the xxxx#0.0.0 start script 'ng serve'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the xxx package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs xxx
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls xxx
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /usr/src/app/npm-debug.log
I've changed my last line to CMD [ "npm", "run", "ng", "serve", "-host", "0.0.0.0" ].
I can build the image, but when I run it, I get:
> t-maj-voltron-front#0.0.0 ng
> ng "serve" "0.0.0.0"
Project '0.0.0.0' does not exist.
npm notice
npm notice New minor version of npm available! 7.15.1 -> 7.19.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.19.0
npm notice Run npm install -g npm#7.19.0 to update!
npm notice
a working Dockerfile:
# base image
FROM node:12.14
# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
RUN npm install -g #angular/cli#7.3.9
# add app
COPY . /app
EXPOSE 4200
# start app
CMD ng serve --host 0.0.0.0

Answer 1

I believe you're missing the port forwarding between the exposed port and your local host.
You can portforward via the -p or --expose flag and the <localport>:<containerport>
In your case:
docker run -it -p 4200:4200 test-front
Will forward traffic from localhost:4200 into your container
EDIT
I did some more reading and it looks like there's an additional step when working with angular in docker.
try editing your npm start command to ng serve --host 0.0.0.0. As explained very thoroughly by Juan adding the --host flag will "listen to all the interfaces from the container"