diff --git a/.knip.json b/.knip.json index 979bd08..110c4d3 100644 --- a/.knip.json +++ b/.knip.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/knip@5/schema.json", - "ignore": ["src/route-tree.gen.ts"], + "ignore": ["src/route-tree.gen.ts", "pwa-assets.config.ts"], "ignoreDependencies": ["gitzy", "@iconify-json/*"], "eslint": { "entry": ["eslint.config.ts"] diff --git a/README.md b/README.md index 8737f38..b888bfc 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ - 🍞 [bun][bun] for a fast runtime and package manager. - ⚡️ [vite][vite] for instant server start and lighting fast HMR. +- ✨ [Vite PWA](https://vite-pwa-org.netlify.app) for PWAs with very little configuration. - 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience. - 🏝️ [TanStack Router][TanStack Router] for a fully type-safe React router. - 🏝️ [TanStack Query][TanStack Query] for asynchronous state management. diff --git a/index.html b/index.html index 0b92822..5d5693a 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,6 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts new file mode 100644 index 0000000..fdbd9c5 --- /dev/null +++ b/pwa-assets.config.ts @@ -0,0 +1,12 @@ +import { + defineConfig, + minimal2023Preset as preset, +} from "@vite-pwa/assets-generator/config"; + +export default defineConfig({ + headLinkOptions: { + preset: "2023", + }, + images: ["public/logo.svg"], + preset, +}); diff --git a/src/pages/home.tsx b/src/pages/home.tsx index a04d942..50618f6 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,5 +1,8 @@ import { ExtLink } from "@/components/ext-link"; +// eslint-disable-next-line import-x/no-absolute-path -- https://vite.dev/guide/assets#the-public-directory +import logo from "/logo.svg"; + export const Home = () => { return (
@@ -17,7 +20,8 @@ export const Home = () => { React Starter

- 🍱 Another React Starter using{" "} + logo{" "} + Another React Starter using{" "} Bun, Vite , TypeScript,{" "} tailwindcss and{" "} diff --git a/vite.config.ts b/vite.config.ts index a3dfe24..e143051 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,7 @@ import { TanStackRouterVite as tanStackRouterVite } from "@tanstack/router-vite-plugin"; import react from "@vitejs/plugin-react-swc"; import { defineConfig, loadEnv } from "vite"; +import { VitePWA } from "vite-plugin-pwa"; import tsconfigPaths from "vite-tsconfig-paths"; import { configDefaults } from "vitest/config"; @@ -18,6 +19,46 @@ export default defineConfig(({ mode }) => { semicolons: true, }), tsconfigPaths(), + VitePWA({ + devOptions: { + type: "module", + }, + manifest: { + icons: [ + { + sizes: "64x64", + src: "pwa-64x64.png", + type: "image/png", + }, + { + sizes: "192x192", + src: "pwa-192x192.png", + type: "image/png", + }, + { + purpose: "any", + sizes: "512x512", + src: "pwa-512x512.png", + type: "image/png", + }, + { + purpose: "maskable", + sizes: "512x512", + src: "maskable-icon-512x512.png", + type: "image/png", + }, + ], + name: "React Starter", + short_name: "React Starter", + theme_color: "#ffffff", + }, + pwaAssets: { + config: true, + disabled: false, + overrideManifestIcons: true, + }, + registerType: "autoUpdate", + }), ], server: { port: Number(PORT),