Gregor is a PWA template for VIte, TailwindCSS and Solid.js. This being a PWA means, that you can install the website like an app and use offline.
% npm install
In the project directory, you can run:
-
npm run dev
- Runs the app in the development mode. Open http://localhost:5173 to view it in the browser. -
npm run build
- Builds the app for production to the./http
folder. To be used with a localnpm run preview
. -
npm run build-github
- Builds the app for production and hosting at GitHub pages to the./http
folder. -
npm run preview
- Run the app in production mode. Open https://localhost:4173 to view it in the browser. Only works with certificate files../https_cert-key.pem
and../https_cert.pem
. See ./vite.config.ts:server: { https: { key: fs.readFileSync("../https_cert-key.pem"), cert: fs.readFileSync("../https_cert.pem"), }, },
-
npm run test
- Run the Mocha tests.
The biggest challenge is to get all the used assets cached in the service worker of the PWA for offline use. The configuration of vite-plugin-pwa
is contained in ./vite.config.ts
import { defineConfig, loadEnv } from "vite";
import { VitePWA } from "vite-plugin-pwa";
import fs from "fs";
import solid from "vite-plugin-solid";
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd());
let pwaServerPath = env.VITE_PWA_SERVER_PATH;
if (pwaServerPath == null) {
pwaServerPath = "/Gregor/http/";
}
console.log(`Setting server path to ${pwaServerPath}`);
return {
plugins: [
solid(),
VitePWA({
registerType: "autoUpdate",
manifest: false,
outDir: "http",
injectRegister: null,
includeManifestIcons: true,
injectManifest: {
injectionPoint: "VITE_PLUGIN_MANIFEST",
additionalManifestEntries: ["sw.js", "/"],
globPatterns: [
"**/*.{js,css,html,ico,png,svg,xml,json}",
"icons/*.{png,svg}",
"assets/*.{js,css,html,ico,png,svg,xml,json}",
],
},
strategies: "injectManifest",
}),
],
define: {
APP_VERSION: JSON.stringify(
process.env.npm_package_version + "-" + Date.now().toString(),
),
PWA_SERVER_PATH: JSON.stringify(pwaServerPath),
},
server: {
https: {
key: fs.readFileSync("../https_cert-key.pem"),
cert: fs.readFileSync("../https_cert.pem"),
},
},
preview: {
port: 4173,
},
base: "./",
build: {
sourcemap: true,
outDir: "./http",
emptyOutDir: true,
},
};
});
Gregor is licensed under the AGPLv3 and later. See file ./LICENSE for details.