CODEWITHSUNDEEP
angular
mreferre
mreferre

Reputation: 6063

Have an Angular2 application to point to proper URL

I have a small Angular2 application that works fine locally where I reference localhost. The problem is when I try to provision the application in production (read: on any external host that has to be referenced by its own IP address and/or FQDN).

This is the main part of the app (and where I am struggling with): 

public appserver = environment.appserver_env;

getvotes(): void {
    const url = `${this.appserver}/api/getvotes`;
    this.http.get(url)
                .map((res: Response) => res.json())
                .subscribe(res => {console.log(res); this.votes = res})                
    }

The appserver_env variable is set inside the Angular environments. Some of them uses localhost such as this and it works just fine:

export const environment = {
  production: false,
  envName: 'test',
  appserver_env: 'http://localhost:4567'
};

Basically I am starting my application and my backend service on my laptop, everything is referenced as localhost and all is fine.

The problem is when I try to deploy onto an external infrastructure (aka host) that has a specific IP / FQDN. My current Angular 2 production environment configuration looks like this:

export const environment = {
  production: true,
  envName: 'prod',
  appserver_env: 'http://myappserver:4567'
};

This only works when I have my client configured in a way that can resolve myappserver to a proper IP address.

The problem is that I may end up having to deploy this app on a server that doesn't have a FQDN (only an IP address). Or anyway in an environment where name resolution does not work.

Is there a particular pattern / feature in Angular 2 that allows me to solve this problem? Note that, to complicate things further, I am provisioning everything inside containers so the app itself does not even have visibility into what the actual server IP address I am pointing my browser to really is.

Thoughts?

Upvotes: 1

Views: 186

Answers (1)

mreferre
mreferre

Reputation: 6063

It turned out that the trick was to use window.location.host in the http string definition.

This version of the environment file seems to be working just fine:

export const environment = {
  production: true,
  envName: 'prod',
  appserver_env: 'http://' + window.location.host
};

Upvotes: 2

Related Questions