How to configure a PWA to run on a subfolder? Ask Question

Ionic Framework ionic-v3
1

There are enough tutorials on how to create a PWA using ionic 4 but all the solutions I found are focused on deploying the application in the root.
What I need is to deploy my entire application in a subfolder:
https://my-domain.com/my-app/

I explained in detail what’s my problem in this repository:
https://github.com/Viterbo/ionic-4-PWA

Thanks

2

Don’t remember to full answer, but I think you need to adjust the base href setting. I encounter that issue with an PWA I did last summer.

3

I’ve already did it but didn’t work.

4

try this in your service worker (service worker in the same folder as your app) and make sure your server has a rewrite configuration setup for your subfolder:

  "root": ".",
  "index": "/index.html",
5

That is what proxy servers (like Nginx) are for.

Ref: Migrating from Ghost 0.x to Ghost 1.x

6

I am running into this same type of issue and have tried setting the base href root. What it looks like is the because the source files are located in sub-folders, the links to various assets and scripts are navigating up 2 folder levels to link to them. When the pwa is built, those links now are trying to navigate two levels above the root folder which is a problem.

If the build process cannot be corrected to adjust the links automatically, it seems that the source html files should be in the same folder as the index so that all links become relative to that folder.

Is there a better way?

7

I had some success with using the angular build command:

ng build --prod --base-href=/myapp/

Still not perfect.

8

I think editing angular.json is a more sustainable way of doing this.