crowd-funder-for-time-pwa/vue.config.js

const { defineConfig } = require("@vue/cli-service");
const { gitDescribeSync } = require("git-describe");
const { exec } = require("child_process");

import.meta.env.VITE_GIT_HASH = gitDescribeSync().hash;
const TIME_SAFARI_APP_TITLE =
  import.meta.env.TIME_SAFARI_APP_TITLE || require("./package.json").name;

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: "source-map",
    experiments: {
      topLevelAwait: true,
    },
    plugins: [
      {
        // Still don't know why this runs three times.
        apply: (compiler) => {
          compiler.hooks.beforeCompile.tap("BeforeCompile", () => {
            // Execute combine-sw.js script
            exec("node sw_combine.js", (error, stdout, stderr) => {
              if (error || stderr) {
                console.error("Service worker files error:", error || stderr);
              } else {
                console.log("Finished combining service worker files.", stdout);
              }
            });
          });
        },
      },
    ],
  },
  pwa: {
    name: TIME_SAFARI_APP_TITLE,
    iconPaths: {
      faviconSVG: "img/icons/safari-pinned-tab.svg",
    },
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // this script will be checked for linting (sw_scripts/* files generate about 1000 linting errors)
      swSrc: "./sw_scripts-combined.js",
    },
  },
});