Access backend api port via angular

I’ve managed to get most of my project running with the following:

  • postgres db on port 5432
  • dotnet core backend on port 8080
  • angular on port 4200

However, when I point angular to the backend localhost:8080. it doesn’t work, I need to use the generated url 8080-xyz.gitpod.io.

although pointing dotnet to localhost:5432 connects to the db running on gitpod.

Is there a way around this? This is the only road-block for me to bring my team on gitpod.

Hi @lawrencetaur!

Thanks for your message, and cool that you’ve already got most of your project running in Gitpod! :100:

I remember facing a similar issue with Angular, and I think you have two possible solutions:

  1. Point Angular to the result of the command gp url 8080 (this will dynamically resolve the correct URL for port 8080, even if your workspace ID changes or you restart it in a new cluster), e.g. by configuring this automatically right before starting your app

  2. Configure Angular to proxy localhost:8080 – I was able to make this work with ng CLI once by creating a proxy.config.json file to proxy my local ports, then passing it like so: npm run ng -- serve --proxy-config proxy.config.json

See the full commit where I’ve implemented solution 2. here: Add automated dev setup using Gitpod · Chocobozzz/PeerTube@0cfcbae · GitHub (hint: you can search for “proxy.config.json”)

Thank you Jan.

Could you elaborate on Option 1? gp url 8080 generates the same url when we visit 8080 in a browser. If this project is shared with another workspace, it would not be feasible since the urls will be different right?

Option 2 looks more feasible but i’m stuck.

  • I created the proxy.config.json which contains
{
    "/api": {
      "target": "http://localhost:8080",
      "secure": false
    }
}
  • The dotnet api endpoints are localhost:8080/api/xyz.
  • What should I point angular to? changing from ‘localhost:8080’ to and ’ ’ doesn’t work. /api is missing from the requests.
  • All urls pointed to 8080 begin /api similar to what you have in the project highlighted.

My bad, one of the endpoints indeed doesn’t use /api and uses /connect instead. I’ve added this to the proxy list and now it is able to make a call to the backend but I get a 504 from the backend server.

just fyi, for such cases we can also try to use the local companion instead: Gitpod Local Companion - localhost is going remote