From d35bd9457bf82c67585b74be6aab97aa35126ab3 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 5 Dec 2021 22:09:12 +0000 Subject: [PATCH 1/3] :memo: Adds troubleshooting for 404 on CDN hosting --- docs/troubleshooting.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 70c52539..544092ed 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -35,6 +35,14 @@ Header set X-Frame-Options: "ALLOW-FROM http://[dashy-location]/" --- +## 404 On Static Hosting + +Try changing Vue's routing mode to hash, instead of using the HTML5 router. This can be done by setting `appConfig.routingMode` to `hash`. + +This determines the URL format for routing to sub-pages. hash mode will look like `/#/home` whereas with history mode available you have nice clean URLs, like `/home`. But history-mode requires a bit of extra server config if you are using a custom `BASE_URL`, which you can learn more about in the [Vue docs](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations). + +--- + ## Yarn Error For more info, see [Issue #1](https://github.com/Lissy93/dashy/issues/1) @@ -180,4 +188,4 @@ Currently, the status check needs a page to be rendered, so if this URL in your For further troubleshooting, use an application like [Postman](https://postman.com) to diagnose the issue. Set the parameter to `GET`, and then make a call to: `https://[url-of-dashy]/status-check/?&url=[service-url]`. Where the service URL must have first been encoded (e.g. with `encodeURIComponent()` or [urlencoder.io](https://www.urlencoder.io/)) -If you're serving Dashy though a CDN, instead of using the Node server or Docker image, then the Node endpoint that makes requests will not be available to you, and all requests will fail. A workaround for this may be implemented in the future, but in the meantime, your only option is to use the Docker or Node deployment method. \ No newline at end of file +If you're serving Dashy though a CDN, instead of using the Node server or Docker image, then the Node endpoint that makes requests will not be available to you, and all requests will fail. A workaround for this may be implemented in the future, but in the meantime, your only option is to use the Docker or Node deployment method. From 68640afc87f226c26dbff8d0c91c761b62f715c7 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 5 Dec 2021 22:22:12 +0000 Subject: [PATCH 2/3] :memo: Server config examples for Firebase, Caddy and Apache --- docs/management.md | 49 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/docs/management.md b/docs/management.md index 088a0eca..ff1ea832 100644 --- a/docs/management.md +++ b/docs/management.md @@ -617,6 +617,8 @@ Note, that if you choose not to use `server.js` to serve up the app, you will lo Example Configs - [NGINX](#nginx) - [Apache](#apache) +- [Caddy](#caddy) +- [Firebase](#firebase-hosting) - [cPanel](#cpanel) ### NGINX @@ -638,6 +640,9 @@ server { } } ``` + +To use HTML5 history mode (`appConfig.routingMode: history`), replace the inside of the location block with: `try_files $uri $uri/ /index.html;`. + Then upload the build contents of Dashy's dist directory to that location. For example: `scp -r ./dist/* [username]@[server_ip]:/var/www/dashy/html` @@ -652,6 +657,15 @@ In your Apache config, `/etc/apche2/apache2.conf` add: AllowOverride All Require all granted + + + RewriteEngine On + RewriteBase / + RewriteRule ^index\.html$ - [L] + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteRule . /index.html [L] + ``` Add a `.htaccess` file within `/var/www/html/dashy/.htaccess`, and add: @@ -664,6 +678,39 @@ RewriteRule ^ index.html [QSA,L] Then restart Apache, with `sudo systemctl restart apache2` +### Caddy + +Caddy v2 +``` +try_files {path} / +``` + +Caddy v1 +``` +rewrite { + regexp .* + to {path} / +} +``` + +### Firebase Hosting + +Create a file names `firebase.json`, and populate it with something similar to: + +``` +{ + "hosting": { + "public": "dist", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} +``` + ### cPanel 1. Login to your WHM 2. Open 'Feature Manager' on the left sidebar @@ -704,4 +751,4 @@ You can push your build image, by running: `docker push ghcr.io/OWNER/IMAGE_NAME **[⬆️ Back to Top](#management)** ---- \ No newline at end of file +--- From 2032481980949c8451a8a167412bfd621be4c706 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sun, 5 Dec 2021 22:25:51 +0000 Subject: [PATCH 3/3] :memo: Adds troubleshooting for 404 on CDN hosting --- docs/troubleshooting.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md index 544092ed..da43493a 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.md @@ -37,9 +37,11 @@ Header set X-Frame-Options: "ALLOW-FROM http://[dashy-location]/" ## 404 On Static Hosting -Try changing Vue's routing mode to hash, instead of using the HTML5 router. This can be done by setting `appConfig.routingMode` to `hash`. +If you're seeing Dashy's 404 page on initial load/ refresh, and then the main app when you go back to Home, then this is likely caused by the Vue router, and if so can be fixed in one of two ways. -This determines the URL format for routing to sub-pages. hash mode will look like `/#/home` whereas with history mode available you have nice clean URLs, like `/home`. But history-mode requires a bit of extra server config if you are using a custom `BASE_URL`, which you can learn more about in the [Vue docs](https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations). +The first solution is to switch the routing mode, from HTML5 `history` mode to `hash` mode, by setting `appConfig.routingMode` to `hash`. + +If this works, but you wish to continue using HTML5 history mode, then a bit of extra [server configuration](/docs/management.md#web-server-configuration) is required. This is explained in more detaail in the [Vue Docs](https://router.vuejs.org/guide/essentials/history-mode.html). Once completed, you can then use `routingMode: history` again, for neater URLs. ---