How to use Environment Variables for API Url (Angular 8, TypeScript, HTML and SCSS for FrontEnd and C# for BackEnd)

Question

My API Url is hardcoded to localhost:4300 in my Development environment ( which is in utilities.ts )

These are the codes below

utilities.ts

const hostToApiUrlMap = { 
localhost: 'http://localhost:4300'
};

environment.prod.ts

export const environment {
production: true
};

environment.ts

export const environment {
production: false
};

I know when we move to Production environment the API Url will change. My question is "How can I use Environment Variables to configure the API Url on the frontend so that it is not Hardcoded to localhost:4300 ?

So that whenever the API Url changes, the Development environment will automatically update to the new API Url

Answer 1

I would suggest putting the two URLs in the environment.ts and environment.prod.ts files and import it directly from environment.ts . At compile time the Angular compiler will use the environment.prod.ts file as environment.ts file if you do a production build. So like that:

somefile.ts

import { environment } from "~/environment/environment.ts" // Change this to your file location
console.log("Current API URL:", enviroment.apiUrl);

environment.ts

export const environment = {
  production: false,
  apiUrl: "http://localhost:4300"
}

environment.prod.ts

export const environment = {
  production: true,
  apiUrl: "https://your.actual.api"
}

This works because of the build configuration of Angular. In the angular.json file you will find this:

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
],

This means that in production mode build the environment.ts file will be replaced with environment.prod.ts file.

Answer 2

So you can create a.env file at the root of the project, and then use process.env.[whatever your variable name is] . Then you can just easily change these variables whenever you need to.

So inside the .env file you could create a variable like API_URL= blah blah blah . The nice thing about this is you can even pass these variable through npm scripts

Or if you production url and dev url will be static for the most part, you could define a variable in.env called something like 'environment' and set if = prod or = dev. Then in the js somewhere in like a util file just do something like

const apiUrl = process.env.environment === 'prod' ? [prod url] : [dev url]

As far as automatically changing the url when the api url changes you have to be more specific. Like how are you going to notify the FE that the api url has changed. These two things are completely separate entities. It has no way of knowing that the Api Url changes/ what it is with out you specifically telling it what the url is. So in some sense it has to be hardcoded in the project in some way, even if its just in the.env file. The only other way is if you like defined some other server thats job is to literally just serve whatever your API path is from a database or something, but thats ridiculous.