How to read the base URL?

Help Requests
1

I am building a web client with Aurelia and I really love it. I use ASP.NET to deploy a REST endpoint and my Aurelia app.

Can I read the base URL from within my Aurelia app, so I can use this when I specify the URL of my REST endpoint?

I can of course handle this configuration manually, but I would like to know what the best practise is to switch between localhost:9000 and the production site.

Apologies for being new to Aurelia… and thanks :slight_smile:

2

If I’m understanding you correctly you could do something like this in your boot.ts:

new HttpClient().configure(config => {
        const baseUrl = document.getElementsByTagName('base')[0].href;
        config.withBaseUrl(baseUrl);
    });
1 Like
3

There are a number of ways to manage config values within your app. All of our API enpoints are via .NET as well. Our aurelia sites are usually the only consumer of the API so for us it makes sense to build out the Aurelia app within that same .NET sln. For us, what has worked out the best is to keep all the config values within our web.config (we haven’t moved over to .NET CORE yet) since many of them are needed for the API anyways. Then all configs are located in a single location which is way easier to maintain. The way I’ve made those configs consumable via aurelia was to just build out the index.cshml (our aurelia landing page) with the config object built right into the HTML as an object literal (injected via the .net Controller), which I called dotnetVars as a global object, which also includes the baseUrl which is also injected into the HTML attr. Then in aurelia i just ref that global object at run time in my own app-config.js class file so that I then have access to it as a singleton anywhere within my code that I need it.

1 Like
4

Thanks!

I like this idea! Good and simple way to share the data.

I am still so new to Aurelia that I use VS code and the Aurelia CLI as my development environment (which is actually pretty nice), but I am considering moving to Visual Studio, when I find a good guide on how to do this.

5

Thanks! Good for a quick fix!

6

Aurelia comes with 3 environments already set for you.

Dev (default)
Stage
Prod

you can run it by using

au run
au run --env stage
au run --env prod

If you do like that you just set the base url on the dev.js, stage.js and prod.js files and it will get the correct file based on the way you run the project.

1 Like
7

Thanks - I am using au run for development, but I deploy the app to a ASP.NET instance in Azure.

8

I went with your strategy. Good general way to handle this type of configuration!

9

One thing we decided to do was remove all environment specific logic from aurelia build so that all this is managed via web.config. We have a TFS CI setup and it swaps out the environment specific variables within the web.config so that we don’t have manage another js/ts configuration file. We keep the client pretty dump that way and the only environment specific logic we do have really is only in the webpack config which will bundle differently on our locals vs dev/qa/prod environments which is run on the build box via cmd calls

2 Likes
10

That’s what I’m working towards, setting up a .net core backend purely to handle config changes and make it easier to access other things like logging/monitoring etc… I haven’t quite hit on the right build setup yet, webpack seems like the common path but I prefer requirejs just now.

11

.NET Core is way easier to use for configuration with settings json file you can use and classes available to access them in the backend. I’ve built an API in core with an aurelia frontend and it was so much easier to work with then .NET MVC. We can’t use it yet on our apps since our servers would require an update which we aren’t ready just yet for.