How to Deploy Angular app with Proxy Settings

Question

I have a proxy config file which has API(web service) link to target to make calls to our database. This proxy config is working fine locally using npm start .<

Answer 1

Option 1: Don't use IIS Server.

You can create an application with node and express to serve your static files and to be your api server, which will call the right one (almost like a redirect)

What ng serve --proxy-config probably does is to run a node server with your application exposed as static and run api's according to your configuration redirecting (calling the server) to the server.

When we call an api from node server, there's no CORS because we don't have a hostname like an web application.

---

Option 2: With IIS and a node/express application## Heading ##

You can create an application and allow the CORS to your hostname. From this application you can expose a generic api and call the right api server.

Answer 2

The proxy config file is for the local development web server. The main reason you use it is so you can avoid cross domain requests when developing the Angular app and the api on your local machine without having to allow cross domain requests in the api.

When you release to production there is no support for the proxy config file. You will be releasing to your production web server.

If your api is hosted under the same domain then there is no need for proxying requests as they are not cross domain and if the api is on another domain you will need to allow cross domain request in the api.

Answer 3

To deploy an Angular 8 application to production

You can use the environments feature, for example:

For Development

proxy.conf.json

{
  "/api": {
      "target": "http://localhost:3000/api",
      "secure": false,
      "pathRewrite": {"^/api" : ""}
    }
}

You set the backend baseURL in environments/environment.ts

export const environment = {
  production: false,
  backend: {
    baseURL:"http://localhost:3000/api"
  }
};

In the service the baseURL is used:

  baseUrl: string = environment.backend.baseURL;

  getAll(): Observable<UsersResponse> {
    return Observable.create(observer => {
     this.http.get<AccountsResponse>(`${this.baseUrl}` + '/users')
        .subscribe((result) => {
          const accountsResponse = result;
          observer.next(accountsResponse);
          observer.complete();
        });
    });
  }

For development the live serve is used:

$ng serve --proxy-config proxy.conf.json  --host 0.0.0.0 --port 4200

The url for development:

http://localhost:4200/yourapp

The running serve will enable CORS and send the API calls to

http://localhost:3000/api/v1

For Deployment to production

The command to build for production:

$ng build --prod --base-href=/yourapp/

The service will take the baseURL from prod environment configuration:

environments/environment.prod.ts

export const environment = {
  production: true,
  backend: {
    baseURL:"http://example.com/api"
  }
};

So, by using different environments, you can configure different api urls. Remember to enable CORS in your production web server, by default the browser does not allow to connect to a different domain than the one serving your Angular app.