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

J. Meier · Accepted Answer · 2019-11-06 23:29:48Z

14

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.

answered Nov 6, 2019 at 23:29

J. Meier

5114 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Celso Soares Over a year ago

You can use command line ng generate environments to create those files for you. Official documentation: angular.io/guide/build

Viktor Garba · Accepted Answer · 2019-11-06 23:10:42Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

somefile.ts

environment.ts

environment.prod.ts

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

somefile.ts

environment.ts

environment.prod.ts

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related