87cc38b737
Resolves the big red `[DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.` warnings when starting Webpack. --------- Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
100 lines
2.6 KiB
JavaScript
100 lines
2.6 KiB
JavaScript
// @ts-check
|
|
|
|
const path = require("path");
|
|
|
|
const ESLintPlugin = require("eslint-webpack-plugin");
|
|
const { merge } = require("webpack-merge");
|
|
|
|
const baseConfigs = require("./webpack.config.js");
|
|
const [main, vnc] = baseConfigs;
|
|
|
|
const shoelaceAssetsSrcPath = path.resolve(
|
|
__dirname,
|
|
"node_modules/@shoelace-style/shoelace/dist/assets",
|
|
);
|
|
const shoelaceAssetsPublicPath = "shoelace/assets";
|
|
|
|
if (!process.env.API_BASE_URL) {
|
|
throw new Error(
|
|
"To run a dev frontend server, please set the API_BASE_URL pointing to your backend api server in '.env.local'",
|
|
);
|
|
}
|
|
|
|
// for testing: for prod, using the version specified in Helm values.yaml
|
|
const RWP_BASE_URL =
|
|
process.env.RWP_BASE_URL || "https://cdn.jsdelivr.net/npm/replaywebpage/";
|
|
|
|
const devBackendUrl = new URL(process.env.API_BASE_URL);
|
|
|
|
module.exports = [
|
|
merge(main, {
|
|
devtool: "eval-cheap-source-map",
|
|
/** @type {import('webpack-dev-server').Configuration} */
|
|
devServer: {
|
|
watchFiles: ["src/**/*", __filename],
|
|
open: true,
|
|
compress: false,
|
|
hot: false,
|
|
static: [
|
|
{
|
|
directory: shoelaceAssetsSrcPath,
|
|
publicPath: "/" + shoelaceAssetsPublicPath,
|
|
},
|
|
],
|
|
historyApiFallback: true,
|
|
proxy: {
|
|
"/api": {
|
|
target: devBackendUrl.href,
|
|
headers: {
|
|
Host: devBackendUrl.host,
|
|
},
|
|
ws: true,
|
|
},
|
|
|
|
"/data": {
|
|
target: devBackendUrl.href,
|
|
headers: {
|
|
Host: devBackendUrl.host,
|
|
},
|
|
},
|
|
},
|
|
setupMiddlewares: (middlewares, server) => {
|
|
// Serve replay service worker file
|
|
server.app?.get("/replay/sw.js", (req, res) => {
|
|
res.set("Content-Type", "application/javascript");
|
|
res.send(`importScripts("${RWP_BASE_URL}sw.js")`);
|
|
});
|
|
|
|
server.app?.get("/replay/ui.js", (req, res) => {
|
|
res.set("Content-Type", "application/javascript");
|
|
res.redirect(307, RWP_BASE_URL + "ui.js");
|
|
});
|
|
|
|
// serve a 404 page for /replay/ path, as that should be taken over by RWP
|
|
server.app?.get("/replay/*", (req, res) => {
|
|
res.set("Content-Type", "application/javascript");
|
|
res.status(404).send(`{"error": "placeholder_for_replay"}`);
|
|
});
|
|
return middlewares;
|
|
},
|
|
port: 9870,
|
|
},
|
|
cache: {
|
|
type: "filesystem",
|
|
hashAlgorithm: "xxhash64",
|
|
buildDependencies: {
|
|
config: [__filename],
|
|
},
|
|
},
|
|
plugins: [
|
|
new ESLintPlugin({
|
|
extensions: ["ts", "js"],
|
|
}),
|
|
],
|
|
}),
|
|
{
|
|
...vnc,
|
|
mode: "production",
|
|
},
|
|
];
|