Use hash mode in dev

dev-server.js

@@ -19,7 +19,6 @@ const chalk = require('chalk');
 const express = require('express');
 const fs = require('fs').promises;
 const path = require('path');
-const historyFallback = require('connect-history-api-fallback');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 const app = express();
@@ -40,10 +39,12 @@ app.use(
 // Inject Stencil's dev server iframe into the main entry point
 app.use(/^\/$/, async (req, res, next) => {
   let index = await fs.readFile('./docs/index.html', 'utf8');
-  index = index.replace(
-    '</body>',
-    '<iframe src="/~dev-server" style="display: block; width: 0; height: 0; border: 0;"></iframe></body>'
-  );
+  index = index
+    .replace('</head>', '<script>window.ShoelaceDevServer = true;</script></head>')
+    .replace(
+      '</body>',
+      '<iframe src="/~dev-server" style="display: block; width: 0; height: 0; border: 0;"></iframe></body>'
+    );
   res.type('html').send(index);
 });
 app.use('/dist', express.static('./dist'));
@@ -59,8 +60,7 @@ setTimeout(() => {
     port: browserPort,
     proxy: {
       target: `http://localhost:${proxyPort}`,
-      ws: true,
-      middleware: [historyFallback()]
+      ws: true
     },
     logLevel: 'silent',
     notify: false,

docs/index.html

@@ -49,7 +49,7 @@
         },
         repo: '',
         repo: 'https://github.com/shoelace-style/shoelace/',
-        routerMode: 'history',
+        routerMode: window.ShoelaceDevServer ? 'hash' : 'history',
         search: {
           maxAge: 86400000, // Expiration time, the default one day
           paths: 'auto', // or 'auto'

package.json

@@ -42,7 +42,6 @@
     "browser-sync": "^2.26.7",
     "chalk": "^4.0.0",
     "concurrently": "^5.1.0",
-    "connect-history-api-fallback": "^1.6.0",
     "del": "^5.1.0",
     "download": "^8.0.0",
     "eslint": "^6.8.0",