Vite builder

Builder wrapping Vite bundler.

PWA and Service Worker

The pwa and serviceWorker options in genx.config.ts are supported by the Vite builder, matching the Webpack builder:

• pwa: emits manifest.json and injects <link rel="manifest">, theme-color and, when ios is set, the Apple meta and touch-icon tags into index.html. Icon and manifest URLs use pwa.publicPath, falling back to PUBLIC_PATH.
  • Icons under public/ are served from there. Other icon paths are resolved from the app root and emitted to destination (default icons/). When two different files share a name there, the later one gets a content hash appended.
  • Icons are not resized, so a raster icon needs one entry per size. A warning is logged when one file is declared at several sizes.
  • Tags index.html already has (same meta name, or same link rel and sizes) are not added again.
• serviceWorker: compiles serviceWorker.worker (relative to src/) into a classic script at assetName (default: the worker's file name with a .js extension). assetName may include a directory.
  • registration is added to index.html. Without it, genx adds a script that registers the worker once the page has loaded. Set registration: false when the app registers the worker itself.
  • Workbox injectManifest fills self.__WB_MANIFEST with every emitted file except those matched by exclude. As in the Webpack builder, strings match as prefixes, functions receive { asset }, and the default is [/\.map$/, /^manifest.*\.js$/].
  • Files Vite names with a content hash are precached without a revision. Every other file, including those copied from public/ and icons emitted under a fixed name, gets one, so a changed file is fetched again.
  • Files over maximumFileSizeToCache that exclude doesn't already drop are left out of the precache with a warning.
  • precache: false builds a worker that doesn't precache, so it needn't reference self.__WB_MANIFEST.
  • Under genx dev the worker is bundled on request and served at assetName under the public path, the URL it has in the build, with an empty precache manifest.

When neither option is configured, output remains unchanged.

Installation

To enable this module in your application, follow the steps below.

1. Add @genesislcap/vite-builder as a dependency in your package.json file. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap command again. You can find more information in the package.json basics page.

{
  ...
  "dependencies": {
    ...
    "@genesislcap/vite-builder": "latest"
    ...
  },
  ...
}

API Docs

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform