Unable to reload page with sub-path defined

[davtex]

Issue Summary
A clear and concise description of what the bug is.

Environment

• OS: Linux/RHEL6

• API version: [eg. 6.8.1]

• Deployment:
  One server is running Apache 2.4 and hosting alerta-webui with reverse proxy pointing to a second server, where alerta-server is running with UWSGI.

• Database: MongoDB

• Server config:
  Auth enabled? No
  Auth provider? N?A
  Customer views? No

• web UI version: master

• CLI version: 7.2.10

To Reproduce
Steps to reproduce the behavior:

• clone master
• set envvar BASE_URL=/alerta
• npm run build
• deploy to server

Expected behavior
I expect Alerta to reload properly when F5 button is hit. Instead, 404 error is generated. When I go to:
https://mysite.com/alerta/

URL is rewitten to:
https://mysite.com/alerta/alerts#status:open,ack;dateRange:,;sb:default;sd:1

After hitting F5, I get error 404 that /alerta/alerts does not exist.

I am upgrading from webui 3.0.0 where URL is different and refresh works:
https://mysite2.com/alerta/#/alerts?status=open&status=unknown

[satterly]

You didn't fill out the issue template so I don't know how you deployed the web UI. Please review the description against the issue template and ensure all relevant information is included. If you do not know what is expected you can always just ask on Gitter chat.

[davtex]

I updated the description of the issue.

[satterly]

I'd bet the Apache config isn't right for an HTML5 history mode web app. See https://router.vuejs.org/guide/essentials/history-mode.html

[davtex]

Yep, configured FallbackResource and it is working nice. Thank you for your prompt response - could you perhaps mention this as a prerequisite in the README? Might save somebody a headache in the future.

[satterly]

Added to README ...

Troubleshooting

HTML5 History Mode

The web app uses HTML5 history mode so you must ensure to configure
the web server or CDN correctly otherwise users will get 404 errors when
accessing deep links such as /alert/:id directly in their browser.

The fix is to provide a catch-all fallback route so that any URL that
doesn't match a static asset will be handled by the web app and redirected.

Example using nginx

location / {
  try_files $uri $uri/ /index.html;
}

See https://github.com/alerta/alerta-webui#html5-history-mode