browsersync

esbuild.config.js

@@ -59,6 +59,18 @@ const options = {
     target: ["es2020", "chrome61", "firefox60", "safari11", "edge18"],
 }
 
+const bsMiddleware = []
+const { createProxyMiddleware } = require("http-proxy-middleware")
+
+const apiBase = process.env.API_BASE || "https://login.wmbasic.de"
+
+bsMiddleware.push(
+    createProxyMiddleware("/api", {
+        target: apiBase,
+        changeOrigin: true,
+    })
+)
+
 module.exports = {
     sveltePlugin: sveltePlugin,
     resolvePlugin: resolvePlugin,
@@ -71,4 +83,19 @@ module.exports = {
             console.log(args)
         },
     },
+    browserSync: {
+        server: {
+            baseDir: distDir,
+            middleware: [
+                require("morgan")("dev"),
+                ...bsMiddleware,
+                require("connect-history-api-fallback")({
+                    index: "/spa.html",
+                    // verbose: true,
+                }),
+            ],
+        },
+        open: false,
+        // logLevel: "debug",
+    },
 }

package.json

@@ -7,6 +7,8 @@
     "license": "MIT",
     "scripts": {
         "validate": "svelte-check && tsc --noEmit",
+        "start": "node scripts/esbuild-wrapper.js start",
+        "start:localapi": "API_BASE=http://localhost:8080 node scripts/esbuild-wrapper.js start",
         "dev": "node scripts/esbuild-wrapper.js watch",
         "build": "node scripts/esbuild-wrapper.js build",
         "build:legacy": "node scripts/esbuild-wrapper.js build esbuild.config.legacy.js && babel _temp/index.js -o _temp/index.babeled.js && esbuild _temp/index.babeled.js --outfile=dist/_dist_/index.es5.js --target=es5 --bundle --minify --sourcemap",
@@ -28,11 +30,15 @@
         "@prerenderer/renderer-jsdom": "^0.2.0",
         "@prerenderer/renderer-puppeteer": "^0.2.0",
         "@tsconfig/svelte": "^2.0.1",
+        "browser-sync": "^2.27.5",
         "chokidar": "^3.5.2",
+        "connect-history-api-fallback": "^1.6.0",
         "copy-dir": "^1.3.0",
         "esbuild": "^0.12.27",
         "esbuild-svelte": "^0.5.4",
+        "http-proxy-middleware": "^2.0.1",
         "less": "^4.1.1",
+        "morgan": "^1.10.0",
         "postcss": "^8.3.6",
         "prettier": "^2.4.0",
         "prettier-plugin-svelte": "^2.4.0",

scripts/esbuild-wrapper.js

@@ -38,6 +38,7 @@ async function build(catchError) {
     log(`built in ${timerEnd - timerStart}ms.`)
 }
 
+let bs
 switch (process.argv?.length > 2 ? process.argv[2] : "build") {
     case "serve":
         console.log("\x1b[36m%s\x1b[0mserving...")
@@ -46,6 +47,9 @@ switch (process.argv?.length > 2 ? process.argv[2] : "build") {
             process.exit(1)
         })
         break
+    case "start":
+        bs = require("browser-sync")
+        bs.init(config.browserSync)
     case "watch":
         config.options.incremental = true
         build(true)
@@ -53,7 +57,11 @@ switch (process.argv?.length > 2 ? process.argv[2] : "build") {
         log("watching files...")
         watcher.on("change", function (path) {
             log(`${path} changed`, true)
-            build(true)
+            build(true).then(() => {
+                if (bs) {
+                    bs.reload()
+                }
+            })
         })
         break
     default:

src/components/App.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    // import { Router, Route, links } from "svelte-routing"
+    import { Router, Route, links } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
     import { location } from "../store"
     import Content from "./routes/Content.svelte"
@@ -34,9 +34,7 @@
 
 <h1>__PROJECT_TITLE__</h1>
 
-<Content path="test" />
-
-<!-- <div use:links>
+<div use:links>
     <a href="/test1">1</a>
     <a href="/test2">2</a>
     <a href="/test3">3</a>
@@ -46,4 +44,4 @@
             <Content path="/{params.path}" />
         </Route>
     </Router>
-</div> -->
+</div>

src/config.ts

@@ -1,5 +1,5 @@
 // @ts-check
-// import * as sentry from "./sentry"
+import * as sentry from "./sentry"
 
 export const title = "__PROJECT_TITLE__"