Hosting a Modern PWA in a sub directory of a web server

If you host one or multiple of the Modern PWA on a web server, there is something you will need to take care of in the web server configuration.

The Modern PWA uses routes for different features of the app:

/text          - scripture text
/contents/[id] - for a contents menu
/history       - for list of places you have navigated to in the app
/notes/new     - create a new note
/settings      - view the user settings
... etc

This works fine when publishing to the root folder of a web server. However, if you publish to a sub directory of a web server and then the user refreshes the page, saves the current path as a favorite, shares the link with someone else, etc…

When the web server receives that full path, it doesn’t know anything abut it (it does know about the root folder of the PWA) and returns a 404. Very bad!

What you need to do is configure your web server so that any path after the sub directory should be handled by the subdirectory. Here is an example .htaccess if all the Modern PWAs are published as sub directories of the root directory. If there are issues with this, then we can blame ChatGPT.

RewriteEngine On

# Capture any request in the form /subdirectory/path and rewrite it to /subdirectory/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^/]+)(/.*)?$ /$1/ [L]

I hope this helps!

Chris Hubbard