Add html5 history mode info and new screenshot

README.md

@@ -1,11 +1,11 @@
-beta.alerta.io
-==============
+Alerta Web UI 7.0
+=================
+
+Version 7.0 of the Alerta web UI is a [VueJS](https://vuejs.org/) web app.
 
 [![Gitter chat](https://badges.gitter.im/alerta/chat.png)](https://gitter.im/alerta/chat)
 
-This is the repository for the next major release of the Alerta web console.
-
-![webui](/docs/images/alerta-webui-v7-beta1.png?raw=true&v=1)
+![webui](/docs/images/alerta-webui-v7.png?raw=true&v=1)
 
 Installation
 -------------
@@ -50,12 +50,12 @@ necessary for most deployments.
 
     $ export VUE_APP_CLIENT_ID=0ffe5d26-6c66-4871-a6fa-593d9fa972b1
 
-Deployment
-----------
+Quick Start
+-----------
 
-During the beta phase a docker container is available to download and
-test the new web UI. It can be built locally using the `Dockerfile` in
-this repository 
+A docker container that is built using the most recent master branch is
+available to download and trial the latest version of the web UI. It
+can be built locally using the `Dockerfile` in this repository.
 
     $ docker build -t alerta/alerta-beta .
 
@@ -73,6 +73,38 @@ Note: Update the `CORS_ORIGINS` setting in the Alerta API server config
 to include the URL that the beta web console is hosted at otherwise
 the browser will throw "blocked by CORS policy" errors and not work.
 
+Deployment
+----------
+
+Since this is a static web app then a production deployment of Alerta web UI
+is simply a matter of copying the `dist` directory to the a location that can
+be served via a web server or CDN. See the [VueJS platform guide][2] for more
+information.
+
+[2]: https://cli.vuejs.org/guide/deployment.html#general-guidelines
+
+Troubleshooting
+---------------
+
+### HTML5 History Mode
+
+The web app uses [HTML5 history mode][3] 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][4] 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;
+}
+```
+
+[3]: https://router.vuejs.org/guide/essentials/history-mode.html
+[4]: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
+
 Development
 -----------