Hi Friends,
In this section, thought to introduce you the idea of hosting multiple SPAs under PWA. This kind of scenario will be useful, wherein you are having multiple spa scenario and each app can’t be a PWA basically. Hence, to keep all the apps under one roof, we can have root app as PWA and child apps which are individual angular apps can remain like that only. Now, if you don’t know how to get started with PWA, in that case, please refer to my earlier post around the same http://bit.ly/ng-6-pwa.
Having said that, let’s get started. First of all, I created two individual angular apps. Below is the folder structure for the same. Nothing fancy.
Similarly, folder structure of SPA2 is also like that only. Now, let’s look at the npm script for build.
Having said, when I run npm run build, it will produce the following output.
Now here, index.html file looks like
Similarly, it will be for SPA 2 solution as well. Now, I have also installed http-server globally to serve our PWA. You can also install the same using npm install http-server -g.
Having said that, now, let’s look at the dist folder of base application.
Here, in the dist folder I copied the dist folders of spa1 and spa2. Now, I can go ahead and run my http-server like shown below.
Now, If I go at http://localhost:8080/, it will come like this.
I can flip between apps, like shown below
Similarly, SPA2 can be navigated. In-case, if page doesn’t refresh try refreshing cache. Now, at root level, I can see install at root level. You can also see the same from application’s tab in developer tools like shown below.
Once you click on the same, it will ask for confirmation like this
Once you click on this Add button, it will ask confirmation like shown below.
Once it gets installed, it should get added as an app like
Once, I click on this, it will launch the app like
This way, even if click on links, it won’t come out of the app window because root is hosting these multiple spas. I hope you would have liked this discussion. Thanks for Joining me.
Download Code:- https://github.com/rahulsahay19/Multiple-SPA-PWA
Thanks,
Rahul Sahay
Happy Coding
Also published on Medium.
