From 786fd12f34735d9c34eadf49de19c59fd99867ab Mon Sep 17 00:00:00 2001 From: Sebastian Frank Date: Tue, 14 Sep 2021 13:26:35 +0200 Subject: [PATCH] browsersync --- esbuild.config.js | 27 ++ package.json | 6 + scripts/esbuild-wrapper.js | 10 +- src/components/App.svelte | 8 +- src/config.ts | 2 +- yarn.lock | 752 +++++++++++++++++++++++++++++++++++-- 6 files changed, 774 insertions(+), 31 deletions(-) diff --git a/esbuild.config.js b/esbuild.config.js index 6cfcb2c..b3c8986 100644 --- a/esbuild.config.js +++ b/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", + }, } diff --git a/package.json b/package.json index b2fa06b..95503e8 100644 --- a/package.json +++ b/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", diff --git a/scripts/esbuild-wrapper.js b/scripts/esbuild-wrapper.js index 77aadc0..593d8c2 100644 --- a/scripts/esbuild-wrapper.js +++ b/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: diff --git a/src/components/App.svelte b/src/components/App.svelte index 01848aa..8c87605 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -1,5 +1,5 @@