Build PWA for deployment in sub directory

Ionic Framework
1

I need to build my PWA so it is on my server in a /pwa directory. It seems like this should be simple but I can’t find a definitive answer as to how to go about this.

I’ve read that Angular has build commands but I’ve tried:
ionic build --prod --public-url=/pwa/
ionic build --prod --base-href /pwa/

and neither seem to change the value.

I’ve seen some posts about changing the base href and manifest setting manually but it seems like it shouldn’t be that complicated. If it does have to be changed manually is there any guides to doing this?

2
3

I’ve read through this already. This seems Firebase specific. What if I’m not hosting on Firebase?

And for this part:

“What do you want to use as your public directory?” Enter “www”.

Would I just enter the directory I want to use instead of “www”?

And then

Note: Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:

Configure as a single-page app (rewrite all urls to /index.html)?" Enter “Yes”.

“File www/index.html already exists. Overwrite?” Enter “No”.

Do I still answer ‘Yes’ and ‘No’?

If I’ve already run this using ‘www’ can I just re run it using a different directory?

4

I case anyone comes across this so far this solution has worked for me. I haven’t tested it extensively yet though.

In index.html change:

to:

and in manifest.webmanifest change:

“scope”: “./”,
“start_url”: “./”,

to:
“scope”: “.”,
“start_url”: “./”

5

I don’t recommend following the previous post. Don’t touch either of those files at all. Just edit baseHref of the desired builder stanza in angular.json. There are also deployUrl and outputDir if you need even more fine-grained control over where things are put. Additional Angular deployment documentation here.

1 Like
6

Thanks for your response. The deep linking was not working using the modifications I made above anyway.

I’ve added to angular.json:

“deployUrl”: “/loc1/”,
“outputPath”: “dist/loc1”,
“baseHref”: “/loc1/”,

and the app works but if I try and access pages through the url (ie http://site.com/loc1/profile)

I get a server error. Is there something else I need to do to get this routing to work?

7

Yeah, read the rest of the link in my previous post. Notably this section.

8

Thanks again. I should have kept reading. It is hosted on Apache but without even adding the config stuff in that document just clearing the cache and starting the app over(and clearing the routing from the served local version) cleared the issue up. Good to know some server config might be necessary.

9

One other thing to keep in mind, especially if you’re wanting iOS users to be able to “install” your PWA onto their homescreen like an app, is that life gets way easier when your PWA (a) has a proper SSL certificate and (b) is hosted directly under it. I do this with subdomains.

I use nginx instead of Apache, but the basic principle should be similar.

You get an SSL cert for pwaname.site.com, make a server that responds to pwaname.* (allowing you to swap out site.com without changing the server configuration), and then set the document root of the pwaname.* server to /usr/share/whatever-apache-puts-here/pwaname/.

You still need to set the configuration as you have in angular.json.

1 Like