How to configure development and production server in Angular

In Angular, there are two files that can be used to configure the development and production servers: proxy.conf.json and environment.ts. Both files have different purposes, and in this post, we will explore the differences between the two and when to use each.

What is proxy.conf.json?

proxy.conf.json is a file that can be used to configure a proxy server to forward requests from the development server to a backend server.

This is particularly useful during development when the frontend and backend are running on different servers.

We usually develop fullstack applications with Angular and Java, with this feature we can redirect all our api calls from the development frontend (typically port 3000) to the backend application (typically port 8080).

The proxy.conf.json file should be located at the root of the project and can be configured with the following options:

{ 
"/api": { 
    "target": "http://localhost:8080", 
    "secure": false 
    } 
} 

In the example above, we are configuring a proxy server to forward any requests that starts with /api to http://localhost:8080.

In our angular.json configuration we have to declare the proxyConfig in the development section:

"serve": { 
  "builder": "@angular-devkit/build-angular:dev-server", 
    "configurations": { 
      "production": { 
          "browserTarget": "your-app:build:production" 
      }, 
      "development": { 
        "browserTarget": "your-app:build:development", 
        "proxyConfig": "proxy.config.json" 
      } 
  }, 
  "defaultConfiguration": "development" 
} 

This feature is an elegant solution to configure you development configuration avoiding to add the server constant in front of every api call.

In a typical solution your frontend will run as web application in the same backend server (http://server:8080), in this case you can call simply call your endpoint without server (e.g.: api/save).

In development, the server will be automatically added (e.g. api/save-> http://localhost:8080/api/save)

What is environment.ts?

environment.ts is a file that is used to configure environment-specific variables for the application.

This is probably the most common solution used to configure the servers and endpoints during the development.

The environment.ts file should be located in the src/environments directory and can be configured with the following options:

export const environment = { 
  production: false, 
  server: 'http://localhost:8080/', 
  debug: true 
}; 

You have to define the server for the production environment too (environment.prod.ts).

In this case you have to import the environment in every component or service you use to access the backend data.

import { environment } from '../environments/environment'; 
 
const server = environment.server; 

and call your api with ${server}/api or similar.

What to use?

You can choose the solution that is more convenient for your development and standards.

I personally find the proxy solution more elegant because is transparent during the development.

You can find more in the Angular documentation here: proxying-to-a-backend-server