Cannot reach Angular app - "The app is not listening on the expected address and will not be reachable"

JavaScript
1

Hi,

I’ve got an angular app that works as expected locally, but that I can’t access when I deploy it to Fly and try to access it via the https://*.fly.dev.

There are other posts on this topic that talk about ensuring the app is listening on 0.0.0.0:3000 - these often suggest changing server.js, but that isn’t applicable to my Angular app. I have managed to change my app to use port 3000 and host 0.0.0.0, but I still get the same warning in the logs, and the app is still unreachable. I added options in angular.json like this:

          "options": {
            "port": 3000,
            "host": "0.0.0.0"
          }

and have tested this locally.

So what have I got wrong? My ISP doesn’t support IPv6, is that the problem? Or is there something else I need to do to get an angular app working? What I ultimately want is a 3-tier app - web, api & postgres DB - that I can access on my phone.

Any help would be gratefully appreciated!

Thanks,

Chris

2

Normally an angular app has both a front end and a back end. During development you launch both servers. Does this match what you are doing?

For deployment you build the front end (typically using ng build). It is the backend that needs to be listening on 0.0.0.0 port 3000.

To help further, I would need to know more about your backend.

3

Hi Rubys, thanks for your reply.

I’m not entirely sure what you mean about the back-end - as far as I’m aware it’s only the front- end aspect I use. My back-end is a dotnet app (hosted in a different container - however I have the same issue when I deploy that too!)

When I run it locally, I simply use ng serve —open. That opens the app in a browser with the port 3000.

I will admit though, I’m not an angular expert! I’m a back-end dev by trade, I can scrape by with angular but that’s about it!

4

In development, everything runs on your machine. Deployment is different: see Angular

In production, dotnet runs on your server, and angular runs in the browser. The way this works is that there is a build step for angular that bundles the javascript which your server serves as static files - just like images, html, and css.

This means that you typically have only one deployment container - it has a build step which used node, but once that completes, no trace of node is required on the server.

5

Ah, I see - thanks, that’s really helped me to understand the process. I guess I assumed that Fly understood that it was an Angular app and would perform the relevant build steps, but it actually just deploys it as a node server, and there’s no build step that produces the angular app.

I’ve redeployed it as a docker container, which does the npm build steps in the dockerfile, and it’s working! Now I just need to figure out how to get all my data into a postgres database…

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.