CODEWITHSUNDEEP
angular
Filmjamr Movies
Filmjamr Movies

Reputation: 987

How to Deploy Angular app with Proxy Settings

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 .

Now I Need to deploy this app to our production windows server on IIS. I used ng build and ng build --prod looks like this is not generating build with proxy setting. I need help that How I can generate a build with proxy setting so that I can deploy it to prod server.

Api is deployed on some other domain and this angular app will be deployed on some other domain.

Thanks

Upvotes: 18

Views: 21459

Answers (3)

user3551863
user3551863

Reputation: 311

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.

Upvotes: 0

Daniel Mora
Daniel Mora

Reputation: 2649

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.

Upvotes: 3

Adrian Brand
Adrian Brand

Reputation: 21658

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.

Upvotes: 17

Related Questions