tibi-starter/esbuild.config.js

const fs = require("fs")

const resolvePlugin = {
    name: "resolvePlugin",
    setup(build) {
        let path = require("path")
        // url in css does not resolve via esbuild-svelte correctly
        build.onResolve({ filter: /.*/, namespace: "fakecss" }, (args) => {
            // console.log(args)
            if (args.path.match(/^\./)) return { path: path.dirname(args.importer) + "/" + args.path }
            // return { path: path.join(args.resolveDir, "public", args.path) }
        })
    },
}

////////////////////////// esbuild-svelte

const sveltePlugin = require("esbuild-svelte")

const frontendDir = "./frontend"
const distDir = frontendDir + "/dist"

// console.log("copy public dir...")
// const copydir = require("copy-dir")
// copydir.sync(__dirname + "/public", __dirname + "/" + distDir)
/*copydir.sync(
    __dirname + "/public/index.html",
    __dirname + "/" + distDir + "/template.html"
)*/

const svelteConfig = require("./svelte.config")
const esbuildSvelte = sveltePlugin({
    compilerOptions: {
        css: false,
        hydratable: true,
        dev: (process.argv?.length > 2 ? process.argv[2] : "build") !== "build",
    },
    preprocess: svelteConfig.preprocess,
    cache: true,
    filterWarnings: (warning) => {
        // filter out a11y
        if (warning.code.match(/^a11y/)) return false
        return true
    },
})

const options = {
    logLevel: "info",
    color: true,
    entryPoints: ["./frontend/src/index.ts"],
    outfile: distDir + "/index.mjs",
    metafile: true,
    format: "esm",
    minify: process.argv[2] == "build",
    bundle: true,
    splitting: false,
    plugins: [esbuildSvelte, resolvePlugin],
    loader: {
        ".woff2": "file",
        ".woff": "file",
        ".eot": "file",
        ".svg": "file",
        ".ttf": "file",
    },
    sourcemap: true,
    target: ["es2020", "chrome61", "firefox60", "safari11", "edge18"],
}

const bsMiddleware = []

if (process.argv[2] == "start") {
    const { createProxyMiddleware } = require("http-proxy-middleware")
    const dotEnv = fs.readFileSync(__dirname + "/.env", "utf8")
    const TIBI_NAMESPACE = dotEnv.match(/TIBI_NAMESPACE=(.*)/)[1]
    const apiBase = process.env.API_BASE || "http://localhost:8080/api/v1/_/" + TIBI_NAMESPACE
    bsMiddleware.push(
        createProxyMiddleware("/api", {
            target: apiBase,
            pathRewrite: { "^/api": "" },
            changeOrigin: true,
            logLevel: "debug",
        })
    )

    // if SSR env variable is set
    console.log(process.env, "=========================ENV")
    if (process.env.SSR) {
        // read api/config.yml.env and read SSR_TOKEN variable from it
        const configEnv = fs.readFileSync(__dirname + "/api/config.yml.env", "utf8")
        const SSR_TOKEN = configEnv.match(/SSR_TOKEN=(.*)/)[1]

        // redirect all other requests to /api/ssr?token=owshwerNwoa&url=...
        bsMiddleware.push(
            createProxyMiddleware(
                function (path, req) {
                    return !path.match(/\./)
                },
                {
                    target: apiBase,
                    changeOrigin: true,
                    logLevel: "debug",
                    pathRewrite: function (path, req) {
                        console.log(path)
                        return "/ssr?token=" + SSR_TOKEN + "&url=" + encodeURIComponent(path)
                    },
                }
            )
        )
    }
}

module.exports = {
    sveltePlugin: sveltePlugin,
    resolvePlugin: resolvePlugin,
    options: options,
    distDir,
    watch: {
        path: [__dirname + "/" + frontendDir + "/src/**/*"],
    },
    serve: {
        onRequest(args) {
            console.log(args)
        },
    },
    browserSync: {
        server: {
            baseDir: frontendDir,
            middleware: [
                require("morgan")("dev"),
                ...bsMiddleware,
                require("connect-history-api-fallback")({
                    index: "/spa.html",
                    // verbose: true,
                }),
            ],
        },
        open: false,
        // logLevel: "debug",
    },
}