How to setup up Angular + Web API environment for multiple developers

Question

Im wondering how to set up our Angular + .Net Core Web API environments for development with multiple developers.

Our Angular project must use an URL to consume the API. Nothing new about that. Locally for each of the developers, the API might use a different port. So I guess we need some local settings for each developer, so the Angular site uses the local port chosen by the developer. As a single developer its no problem, but we are 5 developers working on the same Angular + API.

Our current solution requires every developer to set the same URL i environment.ts and launchSettings.json. But is that really the best way? I mean, we cant always expect each developer to be able to use the same port.

Current solution:

environment.ts

export const environment = {
  production: false,
  baseUrl: "http://localhost:49421"
};

And then in our Angular services

myService.service.ts

export class MyService {
url = environment.baseUrl + "/api/location/";
... some code
}

and the launchSettings.json

"MyWeb.Api.Web": {
      "commandName": "Project",
      "launchBrowser": false,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "applicationUrl": "http://localhost:49421/"
    }

So this works, but some developers have other ports chosen. But some developers complain that then they have to change the port to the same as what is in the environment.ts and that might change if some developer decides another local port. Is there a way where we can set it up so each developer can easily change the local port name without messing with the other developers settings?

score 2 · Accepted Answer · answered Dec 05 '18 at 08:21

2

Create a api.ts file in the lines of such :

export const API = {
  url: 'http://localhost:49421'
};

Add it to your .gitignore file :

/src/api.ts

In your environment.ts file, you can now import it and use it.

Now every developer should change the content of it, but let it have the same structure. This means that the file will never be uploaded, and have a custom content on every different PC.

(You can, if you want, commit a first version of it, so that everyone knows the structure)

answered Dec 05 '18 at 08:21

I like this solution, this way every developer has his own unique setup. – cl0ud Dec 05 '18 at 11:16
@cl0ud thank you, this is usually how we handle custom setups on my projects. Sometimes, we also directly set the port into the application, but it's more complicated and some people don't like it. – Dec 05 '18 at 11:43

score 0 · Answer 2 · answered Dec 05 '18 at 08:23

Maybe you could allow each developer to edit environment.ts and launchSettings.json as they see fit.

For convienence (ie. not having to skip over those diffs when staging/committing work in git), you could try .gitignoring all or part of those files once they're already in the index. To ignore only part of a file, you could try git filter.

How to setup up Angular + Web API environment for multiple developers

2 Answers2