angular

How to Setting Up Proxy Configuration in Angular 11

How to Setting Up Proxy Configuration in Angular 11

In this tutorial, we will learn about How to Setting Up Proxy Configuration in Angular 11

What is a Proxy?

Basically, Proxy configuration is a way of diverting specific URLs to a backend server.

Step1: Create a proxy config file

Create a new src/proxy.conf.json file and add the following configurations:

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

Step2: Update CLI configuration

 Go to angular.json and place the proxyConfig property to point towards the serve target as below:

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

Now You can test the dev server through the proxy configuration  which we have added in our angular application using ng serve command

Also, if you want to change any configuration in proxy, refre this document : Documentation

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment