Angular Proxy Configuration – Run Multiple Applications from same PORT using PROXY Config

In this port, we will discuss how to configure PROXY in Angular application to run multiple applications on the same port for local development setup.

When we create a new Angular application using Angular CLI, some of the defaults are automatically configured inside the angular.json and other files.

To run the Angular application on local we simply execute the $ ng serve --open command to compile the application open it in the browser on HTTP://localhost:4200 which is the default PORT on localhost when the application is launched.

Moreover, we can easily switch the default PORT number to any other by adding the –port flag as shown below:

$ ng serve --open --port=4500

Now the application will be launched on HTTP://localhost:4500

The Problem

Yes! we discussed some common things which many of us will already know. Sometimes we may have a scenario when we want to run two or more applications but on the same PORT like 4200.

For example in my case:

Application 1# at HTTP:localhost:4200

Application 2# at HTTP://localhost:4200/cash-wash

Application 3# at HTTP://localhost:4200/kids-parkland

The problem is, I have the above three applications as separate Angular projects, which run individually on different ports 4200, 4300, and 4400 PORT numbers.

And want to test them locally by linking all three from the First application that is from PORT 4200.

 

The Solution

So, we understood the problem, that we can’t run all three applications under the first application PORT (4200) as other applications are separate projects having their own PORTS assign to run concurrently.

So we can configure PROXY for our first application which is running on the 4200 port.

 

How to configure/ add proxy.config.json file in Angular application?

Step 1) For our problem, we need to set up baseHref or basepath in the package.json files of Application 2# and Application 3#

Open the package.json file application( Car Wash ) 2# root folder, then update the “start” command under “scripts” as shown below:

"scripts": {
    ....
    "start": "ng serve --port=4300 --baseHref=/cash-wash/",
    ....
  },

 

Next, open the package.json file of the application( Kids Parkland)  3# at its root. Then

update the “start” command under “scripts” as shown below:

"scripts": {
    ....
    "start": "ng serve --port=4400 --baseHref=/kids-parkland/",
    ....
  },

 

Step 2) Now go to the root folder of Application 1# which is running by default on PORT 4200. Here we don’t need to make any changes to the package.json file and the “start” script will remain as it is

"scripts": {
    ....
    "start": "ng serve --open"
  },

Create a new file proxy.config.json at the application root folder

Next, we need to update the Proxy config file with other application URL’s with port numbers as shown below:

{
    "/cash-wash/*":{
        "target":"http://localhost:4300",
        "secure":false,
        "logLevel":"info"
    },
    "/kids-parkland/*":{
        "target":"http://localhost:4400",
        "secure":false,
        "logLevel":"info"
    }
}

Step 3) After updating the proxy.config.json file, you need to use this PROXY setting.

Open the package.json of first application 1# and update the "start" script as shown below:

"scripts": {
    "start": "ng serve --open --proxy-config proxy.config.json",
  },

Now when you run $ npm run start command, it will auto pick this PROXY configuration.

 

How to test the PROXY configuration?

Now you need to run all applications by executing $ npm start at 4200, 4300 and 4400 ports then visit the following URL to see the other two applications loading :

Application 1# at HTTP:localhost:4200

Application 2# at HTTP://localhost:4200/cash-wash

Application 3# at HTTP://localhost:4200/kids-parkland

 

Similarly, you can run services or any other resource on the same port by using proxy configurations for local development.

 

Conclusion

We discuss how to set up proxy configuration in an Angular application and run multiple applications running on their respective ports and get launched from the same port which is using the PROXY.