Handling urls navigation…

Handling urls/navigation between apps… in a rather big organisation we want to have a nice and clean way to handle our “shared” urls… we have a UI component “TopMenuComponent” that just shows a list of our apps

Right now we only have a few (like 4-5) but it will grow.. and we don’t want to have this list of applications urls in each app. How should we share this in a clean way?

Urls: localUrl - prodUrl localhost:4200 - dashboard.xxx.xx localhost:4300 - admin.xxx.xx localhost:4400 - webShop.xxx.xx localhost:4500 - support.xxx.xx

How can we keep these in a single source?

Responses:

You could keep them in your environmental files since I’m assuming your URLs differ between configurations

I second using env vars. If at some point you want to extend them you can easily do so.

For instance, I use this in my index.html : <script type="text/javascript" src="/api/__/config.js"></script> This is a script created by the server, which adds a config object to window

It’s used in the config like these:

The benefit is that your environment file does not have to change, so your app does not need to know where/how it’s configured

Here is how I solved this at a large organization where we have environment specific urls and hosts and you have the mentality of build once deploy everywhere. Meaning you don’t get to create another build between dev/qa/prod. the 1 build needs to work in all environments

1. Create a remote-config library
2. I used an APP_INITIALIZER injector for my angular apps https://www.npmjs.com/package/@ngx-config/core but you could write your own
3. I wrapped this in my own service to simplify a few things
4. You then have this load either a static json file that is your env file for each environment. You could also create a config service api
5. this holds your changing configuration per environment

sounds interesting. And you host a different static json file depending on the environment you’re in?

Yes

Pretty similar to the solution I use, have the backend provide a settings file

We have an environment where we have different applications hosted in different sub domains, and every sub domain has a Dev/QA/UAT/PROD.

I am a firm believer that 98% of the time your code should not have different logic based on the environment you are running in. So when I see logic like if(window.location.includes('local')) there is something happening that shouldn’t

<https://timdeschryver.dev/blog/angular-build-once-deploy-to-multiple-environments

https://timdeschryver.dev/blog/angular-build-once-deploy-to-multiple-environments>

The approach you have it’s similar to what we are doing, ultimately I would probably create a graphql configuration service that allows the app asking for config to ask for exactly what it needs no more no less.

We also use this model for feature flags although I would much rather use something like launch darkly <https://launchdarkly.com/

https://launchdarkly.com/>

Thx for all the inout.. will read it thru after daily :smile:

a thought.. shouldn’t it be possible to just replace a variable/property when the ci pipe starts the build.. environment.prod.ts contains a property of apiUrl: localhost:5555 should not the ci be able to replace that before the build runs?

This example you give is exactly why you use your prod environment file.

If you plan on doing these replacements with your CI system then you should be able to set up multiple application configurations with different file replacements