Skip to content

Commit 20a747f

Browse files
jimmy-guzmanjimmy-guzman
committed
feat: ✨ add PWA support
1 parent f5b7166 commit 20a747f

File tree

9 files changed

+96
-3
lines changed

9 files changed

+96
-3
lines changed

‎.knip.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"$schema": "https://unpkg.com/knip@5/schema.json",
3-
"ignore": ["src/route-tree.gen.ts"],
3+
"ignore": ["src/route-tree.gen.ts", "pwa-assets.config.ts"],
44
"ignoreDependencies": ["gitzy", "@iconify-json/*"],
55
"eslint": {
66
"entry": ["eslint.config.ts"]

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
- 🍞 [bun][bun] for a fast runtime and package manager.
88
- ⚡️ [vite][vite] for instant server start and lighting fast HMR.
9+
- ✨ [Vite PWA](https://vite-pwa-org.netlify.app) for PWAs with very little configuration.
910
- 🏷️ [TypeScript][TypeScript] for a less frustrating & consistent experience.
1011
- 🏝️ [TanStack Router][TanStack Router] for a fully type-safe React router.
1112
- 🏝️ [TanStack Query][TanStack Query] for asynchronous state management.

‎index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
76
<meta
87
name="description"

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"@types/bun": "1.1.13",
5959
"@types/react": "18.3.12",
6060
"@types/react-dom": "18.3.1",
61+
"@vite-pwa/assets-generator": "0.2.6",
6162
"@vitejs/plugin-react-swc": "3.7.1",
6263
"@vitest/coverage-v8": "2.1.4",
6364
"@vitest/ui": "2.1.4",
@@ -79,6 +80,7 @@
7980
"turbo": "2.2.3",
8081
"typescript": "5.6.3",
8182
"vite": "5.4.10",
83+
"vite-plugin-pwa": "0.20.5",
8284
"vite-tsconfig-paths": "5.1.0",
8385
"vitest": "2.1.4"
8486
},

‎public/favicon.ico

-15 KB
Binary file not shown.

‎public/logo.svg

Lines changed: 34 additions & 0 deletions
Loading

‎pwa-assets.config.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {
2+
defineConfig,
3+
minimal2023Preset as preset,
4+
} from "@vite-pwa/assets-generator/config";
5+
6+
export default defineConfig({
7+
headLinkOptions: {
8+
preset: "2023",
9+
},
10+
images: ["public/logo.svg"],
11+
preset,
12+
});

‎src/pages/home.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { ExtLink } from "@/components/ext-link";
22

3+
// eslint-disable-next-line import-x/no-absolute-path -- https://vite.dev/guide/assets#the-public-directory
4+
import logo from "/logo.svg";
5+
36
export const Home = () => {
47
return (
58
<div className="grid min-h-screen place-content-center">
@@ -17,7 +20,8 @@ export const Home = () => {
1720
React Starter
1821
</h1>
1922
<p className="prose dsy-prose py-6">
20-
🍱 Another <ExtLink to="React">React</ExtLink> Starter using{" "}
23+
<img alt="logo" className="not-prose inline max-h-6" src={logo} />{" "}
24+
Another <ExtLink to="React">React</ExtLink> Starter using{" "}
2125
<ExtLink to="Bun">Bun</ExtLink>, <ExtLink to="Vite">Vite</ExtLink>
2226
, <ExtLink to="TypeScript">TypeScript</ExtLink>,{" "}
2327
<ExtLink to="tailwindcss">tailwindcss</ExtLink> and{" "}

‎vite.config.ts

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { TanStackRouterVite as tanStackRouterVite } from "@tanstack/router-vite-plugin";
22
import react from "@vitejs/plugin-react-swc";
33
import { defineConfig, loadEnv } from "vite";
4+
import { VitePWA } from "vite-plugin-pwa";
45
import tsconfigPaths from "vite-tsconfig-paths";
56
import { configDefaults } from "vitest/config";
67

@@ -18,6 +19,46 @@ export default defineConfig(({ mode }) => {
1819
semicolons: true,
1920
}),
2021
tsconfigPaths(),
22+
VitePWA({
23+
devOptions: {
24+
type: "module",
25+
},
26+
manifest: {
27+
icons: [
28+
{
29+
sizes: "64x64",
30+
src: "pwa-64x64.png",
31+
type: "image/png",
32+
},
33+
{
34+
sizes: "192x192",
35+
src: "pwa-192x192.png",
36+
type: "image/png",
37+
},
38+
{
39+
purpose: "any",
40+
sizes: "512x512",
41+
src: "pwa-512x512.png",
42+
type: "image/png",
43+
},
44+
{
45+
purpose: "maskable",
46+
sizes: "512x512",
47+
src: "maskable-icon-512x512.png",
48+
type: "image/png",
49+
},
50+
],
51+
name: "React Starter",
52+
short_name: "React Starter",
53+
theme_color: "#ffffff",
54+
},
55+
pwaAssets: {
56+
config: true,
57+
disabled: false,
58+
overrideManifestIcons: true,
59+
},
60+
registerType: "autoUpdate",
61+
}),
2162
],
2263
server: {
2364
port: Number(PORT),

0 commit comments

Comments
 (0)