5

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!

Improve this question
0

2 Answers 2

Reset to default
14

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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

Improve this answer

7 Comments

Awesome, I'll give these a try and let you know how it works. Thanks!
It threw an error on COPY --from=node /app/dist/ /usr/share/nginx/html and it would have thrown an error on this line COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf. In both cases, neither files exist. This might be a dumb question but is the dist folder automatically created with the project? I don't have one in my app. Also, the nginx-custom file, where is this coming from?
Oops sorry you can remove those line as that was for ngnix deployment and no dist folder is not created automatically you need to run ng build —prod
ok, I'll remove those. Lastly, is the dockerignore file needed? Why wouldn't I want the node_modules in there?
Yes it is need beacause when you will build image node modules files will also be included to skip this we need to add node modules in that file
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.