What the heck Brad, I’m trying to host an Angular 4 application from within a Docker container but I can’t access the site; I keep getting this:

$ curl http://localhost:8181
curl: (56) Recv failure: Connection reset by peer

I ran into this just the other day and it took me a bit of time to figure it out; in fact it was thanks to a question on stackoverflow regarding the same issue when containerizing a Rails application.

The issue is that the built in server that comes with Angular 4 when started up with the $ ng serve command will bind to localhost:4200; that is it binds to the host name localhost so it only listens for requests coming from that host name. This works great for development on a local system but when working with containers your really working with multiple machines in a virtual network so listening to requests coming only from localhost means only requests coming from the container will be responded to.

You can test this by attaching to your container $ docker exec -it my_container_1 bash then running curl http://localhost:4200 you’ll see that you do in fact get a response. Its just when issuing a request from your host machine your no longer issuing the request from localhost so your Angular app will ignore the request.

To allow for your containerized Angular app to handle requests coming from your host machine, or rather any machine other then the app container it self, you need to tell the built in development server to bind to the unspecified IP address. The unspecified IP address is an IP that effectively means any; in IPv4 that address is 0.0.0.0 and in IPv6 its ::.

To bind to the unspecified IP start the sever using the --host flag.

$ ng serve --host 0.0.0.0 --port 4200

Now if you load up your application via your host machine it should come up just find, as long as you have forwarded port 4200 to your host properly.

For me I used docker-compose and my compose file looks like this:

  app:
    build: ./frontend
    ports:
      - 8585:4200
    volumes:
      - "./frontend:/usr/src/app"
      - "/usr/src/app/node_modules"
    working_dir: "/usr/src/app"
    environment:
      - API_URL=api:8080
    command: "npm run start"

Where my package.json‘s start script is:

npm install && ng serve --host 0.0.0.0 --port 4200

So that’s it, that is why the heck you were getting curl: (56) Recv failure: Connection reset by peer when trying to containerize your Angular 4 application.

I hope that helps, if you have any questions feel free to leave them below and I’ll try to get to them as time permits.

Until next time think imaginatively and design creatively