Setting up Proxy configuration for backend server in Angular applications

In general, font-end and backend applications are served in different domains. Front-end applications need to be connected with the backend so that they can consume backend APIs. Sometimes, there is only one domain per backend server and sometimes there are multiple. Therefore, In this article, we will learn how we solve the above requirements in an Angular application.

There are majorly two ways we can consume backend API endpoints in Angular:

(1) Using in build Environments file and

(2) By setting up proxy configuration

We will explore these methods one by one.

(1) Connecting backend API endpoints using the Environments file:

this is the most commonly used method in angular.

Step 01: Set baseUrl or baseUrls in the enviroment.ts file and create APIs object inside the environment variable as shown below.

const baseUrls = {
  url_01: `www.test1.com`,
  url_02: `www.test2.com`,
  url_03: `www.test3.com`,
  url_04: `www.test4.com`,
};

export const environment = {
  production: false,

  APIs: {

    // Login
    signIn: `${baseUrls.url_01}/api_endpoint01`,
    signOut: `${baseUrls.url_01}/api_endpoint02`,

    // User Details
    userDetails: `${baseUrls.url_02}/api_endpoint03`,
    updateUserDetail: `${baseUrls.url_03}/api_endpoint04`,
  }
};

Step 02: Create base-url-apis.ts file as shown below. This step can be skipped as well. The static members of a class are accessed using the class name and dot notation, without creating an object. This provides a way of object-oriented programming and abstraction.

import { environment } from "src/environments/environment";


export class BaseApiUrl {

  // Login
  public static SignIn = environment.APIs.signIn;
  public static SignOut = environment.APIs.signOut;

  // User Details
  public static UserDetails = environment.APIs.userDetails;
  public static UpdateUserDetails = environment.APIs.updateUserDetail;

}

Step 03: Now, we can use the endpoint name from the base-url-apis for CRUD operation using angular http methods. For this, we need to create a method inside a service. These methods can be used for the API call on an event.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { BaseApiUrl } from 'src/app/shared/base_api/base-api-urls';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(
    private http: HttpClient,
  ) {}


  public signIn(userName:string, password:string): Observable<any> {
    let url = BaseApiUrl.SignIn;
    const formData = new FormData();
    formData.append('userName', userName);
    formData.append('password', password);
    return this.http.post(url, formData);
  }
}

(2) By setting up proxy configuration:

A proxy server is a system or router that provides a gateway between users and the internet. Therefore, it helps prevent cyber attackers from entering a private network. It is a server, referred to as an “intermediary” because it goes between end-users and the web pages they visit online.

In angular, we use webpack dev-server (angular.json file) as a development server. By default, the angular application is being served on port 4200 in the development environment; whereas the backend server is being served at the local server or on the deployed server. Sometimes, the backend server is being served at more than one endpoint.

Proxy configuration is a way of diverting certain URLs to a backend server by passing a file to the --proxy-config build option. For example, to divert all calls http://localhost:4200/api to a server running on http://localhost:3700/api.

Backend server where URLs are being diverted is known as “target”. In this backend server at port 3700 is a target. URLs can also be diverted to the multiple backend servers (e.g 3700, 3800, and 3900).

Step 01: Create a file proxy.conf.json or proxy.config.jsin your project's src/ folder.

Step 02: Create a baseUrl object for target or targets endpoint.

If you need to access a backend that is not on localhost, set the changeOrigin option as well.

To help determine whether your proxy is working as intended, set the logLevel option.

const baseUrls = {
  url_01: `/3700`,
  url_02: `/3800`,
  url_03: `/3900`,
};

const targetUrls = {
  target01: `https://targetUrl01.com`,
  target02: `https://targetUrl02.com`,
};

const PROXY_CONFIG = [
  {
    context: [
      `${baseUrls.url_01}/login`,
      `${baseUrls.url_01}/logout`,
    ],
    "changeOrigin": true,
     target: targetUrls.target01,
     secure: false,
     logLevel: "debug"
  },

  {
    context: [
      `${baseUrls.url_02}/userDetails`,
      `${baseUrls.url_02}/updateUserDetail`,
    ],
    "changeOrigin": true,
     target: targetUrls.target02,
     secure: false,
     logLevel: "debug"
  },

]
module.exports = PROXY_CONFIG;

Step 03: Configuring proxy.json or proxy.config.js file during the angular build.

There are two ways to do this: any method can be adopted.

(i) Adding proxy configuration in the package.json file.

Add proxy configuration in the script tag as follows:

  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config src/proxy.conf.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

(ii) Adding proxy configuration in the Angular.json file.

…
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.config.js"
    },
…

Step 04: Run the application.

npm run start

or 

ng serve

Thank you for reading my Article.