CODEWITHSUNDEEP
angularrestangular-cli
FacundoGFlores
FacundoGFlores

Reputation: 8118

Angular CLI - Set Up production proxy for now deploying

I am currently using now.sh for deploying my app. Recently, I decided to move the baseUrl for requests to a proxy.config.json file.

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

For deploying with now.sh I change the scripts in package.json to:

"start": "serve dist/ --single",
"build": "ng build --prod",

so, first, I did a ng build.

The thing is, I'm needing a different target for proxy.config.json, because I deployed an API and I want to use it in the production app

I was thinking on having two files proxy.config.dev.json and proxy.config.prod.json, but I don't know if I can target a different proxy with the cli. The problem is that I'm using serve for production and not ng serve so proxy-config is not available.

What do you suggest? How can I get to work it?

Upvotes: 5

Views: 9655

Answers (3)

Java_Fire_Within
Java_Fire_Within

Reputation: 619

Using Angular Interceptor and Angular cli way to set baseUrl as explained above and up voted for giving hint. In case someone looking for more info then following helps to move forward 

`<pre>
import { environment } from './../../environments/environment';
import { Injectable } from '@angular/core';
import {
   HttpInterceptor,
   HttpRequest,
   HttpHeaders,
   HttpHandler,
   HttpEvent,
   HttpEventType
} from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class WebApiBaseURLInterceptor implements HttpInterceptor {

   className = "WebApiBaseURLInterceptor";

   constructor() {
       // add more http options here like OAuth2 access token
       const httpOptions = {
           headers: new HttpHeaders({ 'Content-Type': 'application/json' })
       };
   }

   /**
    *
    * @param {HttpRequest<any>} req
    * @param {HttpHandler} next
    * @returns {Observable<HttpEvent<any>>}
    */
   intercept(req: HttpRequest<any>, next: HttpHandler):   
Observable<HttpEvent<any>> {

//the baseURL set in environment folder which has both Dev and Prod
       const url = environment.baseUrl;
       req = req.clone({
           url: url + req.url
       });
       // return next.handle(req);

       // lets add elapse time difference 
       const started = Date.now();
       return next.handle(req).do(event => {
           if (event.type == HttpEventType.Response) {
               const elapsed = Date.now() - started;
               console.log(`${this.className}: Request for ${req.urlWithParams} took ${elapsed} ms.`);
           }
       });
   }
}
</pre>`

Following is Dev environment folder and file so edit as below,

// The file contents for the current environment will overwrite these during build.

// The build system defaults to the dev environment which uses environment.ts, but if you do

// ng build --env=prod then environment.prod.ts will be used instead.

// The list of which env maps to which file can be found in .angular-cli.json.

`<pre>
export const environment = {
  production: false,
  baseUrl: 'http://localhost:8080/'
};
</pre>`

Upvotes: 1

FacundoGFlores
FacundoGFlores

Reputation: 8118

I have realized that is a better solution to use "environments" which came by default with angular-cli.

So I setup a baseUrl in both environments {dev, prod}. And then the builds will not change. Then you have to modify your services to use this env variable.

Upvotes: 4

sarora
sarora

Reputation: 914

ng serve uses the angular cli which accepts a parameter for a proxy file config (details here: https://github.com/angular/angular-cli/wiki/serve) . the 'serve' command you're using in production is another package (I assume this one https://www.npmjs.com/package/serve) which doesn't support the same feature set. You need to a web server that supports proxying (e.g. nginx appears to as detailed here http://nginx.org/en/docs/beginners_guide.html#proxy) OR else a standalone solution for the proxy feature that complements popular http server packages like 'serve', 'http-server', 'lite-server' e.g. some network appliances can help as well. If you / anyone else finds other good options for hosting angular apps w/ a proxy please do share as I'm looking to evaluate more options also.

Upvotes: 1

Related Questions