Support pwa in boilerplate template

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to the create-aptos-dapp tool will be captured in this file.
 # Unreleased
 
 - [Fix] Generate Boilerplate template without Surf errors out because of a wrong file path
+- Support PWA in the boilerplate template
 
 # 0.0.36 (2024-10-28)
 

templates/boilerplate-template/README.md

@@ -22,6 +22,7 @@ To get started with the Boilerplate template and learn more about the template f
 - Aptos TS SDK
 - Aptos Wallet Adapter
 - Node based Move commands
+- [Vite-pwa](https://vite-pwa-org.netlify.app/)
 
 ## What Move commands are available?
 

templates/boilerplate-template/package.json

@@ -52,6 +52,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-notifier": "^0.1.5",
+    "vite-plugin-pwa": "^0.20.5",
     "tree-kill": "1.2.2",
     "dotenv": "16.3.1",
     "vercel": "^35.2.4"

templates/boilerplate-template/vite.config.ts

@@ -1,6 +1,7 @@
 import path from "path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 
 export default defineConfig({
   build: {
@@ -10,7 +11,36 @@ export default defineConfig({
     open: true,
   },
   plugins: [
-    react()
+    react(),
+    VitePWA({
+      disable: false,
+      registerType: "autoUpdate",
+      manifest: {
+        name: "Aptos Fullstack Template",
+        short_name: "Aptos Template",
+        icons: [
+          {
+            src: "/icons/icon-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+          {
+            src: "/icons/icon-384x384.png",
+            sizes: "384x384",
+            type: "image/png",
+          },
+          {
+            src: "/icons/icon-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+        start_url: "/",
+        display: "standalone",
+        orientation: "portrait",
+      },
+    }),
   ],
   resolve: {
     alias: {

templates/nextjs-boilerplate-template/README.md

@@ -22,6 +22,7 @@ To get started with the Boilerplate template and learn more about the template f
 - Aptos TS SDK
 - Aptos Wallet Adapter
 - Node based Move commands
+- [Next-pwa](https://ducanh-next-pwa.vercel.app/)
 
 ## What Move commands are available?
 

templates/nextjs-boilerplate-template/_gitignore

@@ -0,0 +1,37 @@
+# Aptos related files
+.aptos
+.env
+contract/build
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+build
+dist-ssr
+*.local
+package-lock.json
+pnpm-lock.yaml
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# template related files
+example-collection/
+
+.next

templates/nextjs-boilerplate-template/next.config.mjs

@@ -1,8 +1,12 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+import withPWAInit from "@ducanh2912/next-pwa";
+
+const withPWA = withPWAInit({
+  disable: false,
+});
+
+// Your Next config is automatically typed!
+export default withPWA({
   output: "export", // Outputs a Single-Page Application (SPA).
   distDir: "./dist", // Changes the build output directory to `./dist/`.
   basePath: process.env.NEXT_PUBLIC_BASE_PATH, // Sets the base path to `/some-base-path`.
-};
-
-export default nextConfig;
+});

templates/nextjs-boilerplate-template/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@aptos-labs/ts-sdk": "^1.30.0",
     "@aptos-labs/wallet-adapter-react": "^3.6.2",
+    "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",

templates/nextjs-boilerplate-template/src/app/layout.tsx

@@ -10,8 +10,10 @@ import { TopBanner } from "@/components/TopBanner";
 import "./globals.css";
 
 export const metadata: Metadata = {
+  applicationName: "Aptos Boilerplate Template",
   title: "NextJS Boilerplate Template",
-  description: "NextJS Boilerplate Template is a...",
+  description: "Aptos Boilerplate Template",
+  manifest: "/manifest.json",
 };
 
 export default function RootLayout({

templates/nextjs-boilerplate-template/src/app/manifest.json

@@ -0,0 +1,25 @@
+{
+  "name": "Aptos Fullstack Template",
+  "short_name": "Aptos Template",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}