DEV Community

yuvaraj
yuvaraj

Posted on

Adding proxy config to the single spa angular

  • In this post, I am going to explain how you can configure proxy for interacting your backend api from your angular front end services.

Common proxy config in an angular app

  • while working with angular application, We always create proxy.config.json file and will serve the proxy config while application running.

  • But, why does the same config fail when we run single spa (micro-frontend) angular app?

  1. Because, We are building our angular application using webpack.
  2. While serving application, we are sharing our application as a remote module or component or library in different port which need to be consumed by host/shell/root-config.
  3. Let say, your are serving your angular app in port 5000 and the host is running in port 7000.

4 . You need to register your angular app port with host port by using system-importmap and `registerApplication()

5 . As we know, single-spa host app here is going to route the other micro-frontend apps, we need to handle proxy inside webpack.config.js file

  1. Inside the webpack.config.js, we have add proxy config and then re-run the host

webpack.config.js

SPA-PROXY

For reference click here Webpack Proxy.

Thanks for reading :)

Top comments (0)