Connection refused in Angular Docker App

Overview

Let's say you have created a beautiful looking Angular App which works well on local host. You now are planning to dockerize it.

At very basic, you would create Dockerfile and follow these steps:

• Extend from node image
• Create new app directory inside the container
• Copy package.json to this new place
• Install npm
• Install Angular CLI
• Copy current directory contents to container's directory
• And then finally, execute npm start

Complete file looks like this:

 1FROM node
 2EXPOSE 4200
 3RUN mkdir -p /usr/src/app
 4WORKdir /usr/src/app
 5COPY package.json package.json
 6RUN npm install --cache /tmp/empty-cache
 7RUN npm install -g @angular/cli@latest
 8COPY . . 
 9
10CMD ["npm", "start"]

You are very eager to test your new docerized app an try to hit localhost:4200, and then BOOM :dizzy: what you see is

Solution

Navigate to file $APP_ROOT/node_modules/@angular-devkit/build-angular/src/dev-server/schema.json

Look for host key in json structure, it might look something like this:

1{
2    "host": {
3        "type": "string",
4        "description": "Host to listen on.",
5        "default": "localhost"
6        }
7}        

Here change default host to 0.0.0.0

That's it, start 🌎 your app!