Creating hrefs to subdomains with localhost during development

Question

I have several angular applications I would like to have links that go to each other.

For example in App1 I may have the following <a href="app2.apps.com">App2</a>. This works when the application is live, but during development, this does not work as app2 is being hosted on localhost:50001.

Is there a way to setup some type of proxy that captures my subdomains and routes them to the proper localhost during development?

Answer 1

If you are using angular-cli, you can make use of the environment.ts file under /src/environments.

You can define environment specific values in these environment files

environment.<some-environment-name>.ts

Example:

environment.prod.ts (Production environment)

export const environment = {
    production: true,
    api: {
        baseUrl: "http://app2.apps.com"
    },
    // some other properties if required
};

And another object for for development

environment.ts (dev environment)

export const environment = {
    production: false,
    api: {
        baseUrl: "http://localhost:50001"
    },
    // some other properties if required
};

If you have any more environments, you can additional environment files,

environment.stage.ts (staging environment)

export const environment = {
    production: false,
    api: {
        baseUrl: "http://app2.stagingapp.com"
    },
    // some other properties if required
};

Then, declare them in angular-cli.json under apps property

apps: {
    ..
    ..
    "environmentSource": "environments/environment.ts",  // this should be imported in all the components/services etc
    "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "stage": "environments/environment.stage.ts"
    }
}

To use these values anywhere else (Components, Services etc)

import { environment } from ../environments/environment

and then use it

foo.service.ts

private readonly API_URL = `${environment.api.baseUrl}/foo`

public getFoo() {
    return this._http.get(API_URL);
}

NOTE: Never import a specific environment file in any of the components or services,

for example,

You should NEVER do this

import { environment } from ../environments/environment.prod; // NEVER do this

instead

When running with ng serve, use the --environment or --env option to specify the environment values and angular-cli will take care of the rest.

ng serve --env=prod  // uses values in environment.prod.ts
ng serve --env=stage // uses values in environment.stage.ts
ng serve             // uses values in environment.ts

When doing a ng build, use the --prod flag for production builds

ng build --prod

To build with other environments, you can use the --env option to specify the environment

ng build --env=stage

Hope this helps.