CODEWITHSUNDEEP
angulardockerdockerfile
Kgn-web
Kgn-web

Reputation: 7555

How to run Angular app as Docker container

I am trying to run an Angular 9 app as a Docker container. This is my Dockerfile:

FROM node:14.8.0-stretch-slim as build-env
LABEL desc="docker image of angular 9 app"
WORKDIR /app
COPY ["package.json","package-lock.json","/app/"]
RUN npm install
RUN npm install -g @angular/cli

COPY . /app
#ENTRYPOINT ["ng","--version"]
RUN ng build
CMD ng serve 
#Also tried 1) CMD ng serve --host 0.0.0.0 and 2) ENTRYPOINT ["ng","serve"]

It builds the image with few minor warnings and then builds the container

docker run -p 4203:4200 -d <image_id>

I can see the Docker container is running (VS Code Docker extension & docker ps command shows the container up). But when I try to access the app from browser, it shows the below error

enter image description here

How can I access my Angular app from browser?

Please note: I will be taking this forward by adding the second stage in the above Dockerfile and would host the app in some server but before doing that I want to make sure that app could be accessed.

Upvotes: 1

Views: 14162

Answers (3)

Fabio Ribeiro de Carvalho
Fabio Ribeiro de Carvalho

Reputation: 790

Try something like this example. It's very similar that you'd like to do
Dockerfile (example):

FROM node:14

RUN npm install -g @angular/cli 

WORKDIR /frontend

COPY package.json .

RUN npm install

COPY . .

EXPOSE 4200

CMD ng serve --host 0.0.0.0

Terminal commands

Create the image

docker build -t <image name> .

Start the container (use the command "serve" and "--host" to append the "ng" command that was created in the Dockerfile):

docker run --rm -p 4200:4200 -it <image name>

Also, you may want add a volume in the container to map you local folders:

docker run --rm -v <absolute path to src file>:/<project path>/src -p 4200:4200 -it <image_name>

If you'd like to use ENTRYPOINT in the end of Dockerfile, use this:

ENTRYPOINT ["ng"]

So, in the docker run command you have to append what you want to do:

docker run --rm -v <absolute path to src file>:/<project path>/src -p 4200:4200 -it <image_name> serve --host 0.0.0.0

Or to create a component

docker run --rm -v <absolute path to src file>:/<project path>/src -p 4200:4200 -it <image_name> component <component name>

Upvotes: 2

Dashrath Mundkar
Dashrath Mundkar

Reputation: 9184

Please add this CMD instrcution to your dockerfile

CMD ng serve --host 0.0.0.0 --port 4200

Upvotes: 3

Karan Kumar
Karan Kumar

Reputation: 3176

EDIT:

You can try 0.0.0.0:4200 inside the docker file. That is how it worked for me.

Upvotes: 0

Related Questions