CODEWITHSUNDEEP
angulardockerdockerfile
Evan Lalo
Evan Lalo

Reputation: 1273

Angular Development Docker Container

I am trying to create a docker container to use for Angular development.

Using a nearly identical dockerfile to the one below, I was able to create a development container for React.

FROM node:8.9.0

ENV NPM_CONFIG_LOGLEVEL warn
ARG app_env
ENV APP_ENV $app_env

RUN mkdir -p /app1
WORKDIR /app1
COPY ./app1 ./

COPY app1/package.json /app1

RUN npm install
RUN npm update
RUN npm install -g typescript

EXPOSE 4200

RUN chmod a+x /app1/node_modules/.bin/*

ENTRYPOINT ["tail", "-f", "/dev/null"]
#ENTRYPOINT npm start

To run the container I use:

docker run -i -t -p 4200:4200 -v /var/react/{your app name}/{Your apps sub folder}/src:/{ Your apps sub folder } /src {container ID}

I then enter the container and run npm start or npm start 0.0.0.0:4200. Everything compiles successfully and says it should be running on localhost:4200 but I get a connection refused error.

I'll reiterate, using an identical dockerfile, I am able to do this with react. The only differences between the files are port numbers and mounted volumes.

As such, this makes me think it's something to do with the Angular configuration but I don't know where to begin looking. Any ideas?

thanks!

Upvotes: 5

Views: 4848

Answers (2)

Evan Lalo
Evan Lalo

Reputation: 1273

As I suspected, it was an Angular config issue. All I needed to do was change my package.json file.

From:

"scripts": { "ng": "ng", "start": "ng serve"

To:

"scripts": { "ng": "ng", "start": "ng serve --host 0.0.0.0 --disable-host-check"

My Dockerfile stayed the same.

Upvotes: 14

Hrishikesh Kale
Hrishikesh Kale

Reputation: 6548

Hi there are simple steps to build and run docker file in your angular Project

1) create a .dockerignore file and add node_modules .git into it

2) add Dockerfile with 

FROM node:8.6 as node
WORKDIR /app
COPY package.json /app/
RUN npm install
COPY ./ /app/
ARG env=prod
RUN npm run build -- --prod --environment $env

# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.13
COPY --from=node /app/dist/ /usr/share/nginx/html
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

3) Build your image using the production configuration (the default), e.g.:

docker build -t my-angular-project:prod .

mind the dot at the end of the line

4) Build your image using the development environment (no configuration), e.g.:

docker build -t my-angular-project:dev --build-arg configuration="" .

5) Test your image for the production environment (production configuration) with:

docker run -p 80:80 my-angular-project:prod

6) Open your browser in http://localhost.

7) Test your image for the development environment (no configuration) with:

docker run -p 80:80 my-angular-project:dev

hope these steps help you to run your docker file

Upvotes: 3

Related Questions