- 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?
- Because, We are building our angular application using webpack.
- 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.
- 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
- Inside the
webpack.config.js
, we have add proxy config and then re-run the host
webpack.config.js
For reference click here Webpack Proxy.
Thanks for reading :)
Top comments (0)