@inglorious/create-app 1.1.0 → 1.1.2

package/README.md

@@ -31,7 +31,7 @@ npm create @inglorious/app@latest -- --mobile
 npm create @inglorious/app@latest -- --pwa --mobile
 ```
 
-- `--pwa` adds a web app manifest, service worker, and browser-only service worker registration.
+- `--pwa` adds `vite-plugin-pwa`, a basic web app manifest configuration, PWA icons, and browser-only service worker registration.
 - `--mobile` adds Capacitor dependencies, config, and mobile scripts for iOS and Android.
 
 ## Templates
@@ -61,12 +61,27 @@ pnpm install
 pnpm dev
 ```
 
-When mobile support is enabled, build and sync native projects with:
+When mobile support is enabled, initialize the native platforms once, then build and sync them with:
 
 ```bash
+# Run one or both commands once, depending on the platforms you need
+pnpm mobile:init:android
+pnpm mobile:init:ios
+
 pnpm mobile:sync
+
+# Build and open the native app
+pnpm mobile:android
+# or
+pnpm mobile:ios
 ```
 
+For Android and iOS builds, install Android Studio with the Android SDK and a Java runtime compatible with Capacitor. Capacitor currently works reliably with JDK 21, so prefer JDK 21 over newer Java versions if you hit Java compatibility issues. Set `JAVA_HOME` to your JDK 21 install and `ANDROID_HOME` to your Android SDK path before running the native app. See the official Capacitor setup guides for platform-specific instructions:
+
+- Android: https://capacitorjs.com/docs/android
+- iOS: https://capacitorjs.com/docs/ios
+- Android Studio: https://developer.android.com/studio
+
 ## License
 
 **MIT License - Free and open source**

package/bin/index.js

@@ -8,15 +8,17 @@ import path from "path"
 import prompts from "prompts"
 import { fileURLToPath } from "url"
 
-const INDENTATION = 2
-const CAPACITOR_VERSION = "^8.5.0"
-const AFTER_FIRST_CHARACTER_INDEX = 1
-const EMPTY_LENGTH = 0
-const FIRST_CHARACTER_INDEX = 0
-const FIRST_ITEM_INDEX = 0
-const NPM_VIEW_TIMEOUT_MS = 10_000
-const USER_ARG_START_INDEX = 2
-const VITE_APP_TEMPLATES = new Set(["js", "ts"])
+import { parseCliOptions } from "./lib/cli.js"
+import {
+  EMPTY_LENGTH,
+  INDENTATION,
+  NPM_VIEW_TIMEOUT_MS,
+  USER_ARG_START_INDEX,
+  VITE_APP_TEMPLATES,
+} from "./lib/constants.js"
+import { copyDir } from "./lib/file.js"
+import { addMobileSupport } from "./lib/mobile.js"
+import { addPwaSupport } from "./lib/pwa.js"
 
 async function main() {
   const __dirname = path.dirname(fileURLToPath(import.meta.url))
@@ -83,7 +85,6 @@ async function main() {
   let pwa = cliOptions.pwa === true
   let mobile = cliOptions.mobile === true
 
-  // Ask about renderer for non-minimal templates
   if (baseTemplate !== "minimal") {
     const { selectedRenderer } = await prompts(
       {
@@ -166,18 +167,14 @@ async function main() {
   try {
     const targetDir = path.join(process.cwd(), projectName)
 
-    // Determine the actual template directory based on base template and renderer
     let templateName = baseTemplate
     if (baseTemplate !== "minimal" && renderer !== "lit-html") {
       templateName = `${baseTemplate}-${renderer}`
     }
 
     const templateDir = path.join(templatesRoot, templateName)
-
-    // Create project directory and copy template files
     copyDir(templateDir, targetDir)
 
-    // Update README.md with project name
     const readmePath = path.join(targetDir, "README.md")
     if (fs.existsSync(readmePath)) {
       let readme = fs.readFileSync(readmePath, "utf-8")
@@ -190,306 +187,58 @@ async function main() {
       console.log(`\nNext steps:`)
       console.log(`  cd ${projectName}`)
       console.log(`  Open index.html in your browser`)
-    } else {
-      // Update package.json with project name
-      const pkgPath = path.join(targetDir, "package.json")
-      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"))
-      pkg.name = projectName
-
-      if (pwa) {
-        spinner.text = "Adding PWA support..."
-        addPwaSupport(targetDir, projectName)
-      }
-
-      if (mobile) {
-        spinner.text = "Adding Capacitor support..."
-        addMobileSupport(targetDir, pkg, projectName, templateName)
-      }
-
-      for (const depType of ["dependencies", "devDependencies"]) {
-        if (pkg[depType]) {
-          for (const [name, version] of Object.entries(pkg[depType])) {
-            if (version.startsWith("workspace:")) {
-              spinner.text = `Fetching latest version of ${name}...`
-              pkg[depType][name] = getLatestVersion(name)
-            }
-          }
-        }
-      }
-
-      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, INDENTATION) + EOL)
-
-      spinner.succeed(`Created ${projectName} at ${targetDir}`)
-      console.log(`\nNext steps:`)
-      console.log(`  cd ${projectName}`)
-      console.log(`  pnpm install`)
-      console.log(`  pnpm dev`)
+      return
     }
-  } catch (error) {
-    spinner.fail("Operation failed.")
-    console.error(error)
-  }
 
-  function copyDir(src, dest) {
-    fs.mkdirSync(dest, { recursive: true })
+    const pkgPath = path.join(targetDir, "package.json")
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"))
+    pkg.name = projectName
 
-    const entries = fs.readdirSync(src, { withFileTypes: true })
-
-    for (const entry of entries) {
-      const srcPath = path.join(src, entry.name)
-      const destPath = path.join(dest, entry.name)
-
-      // Rename gitignore to .gitignore
-      if (entry.name === "gitignore") {
-        fs.copyFileSync(srcPath, path.join(dest, ".gitignore"))
-        continue
-      }
-
-      if (entry.isDirectory()) {
-        copyDir(srcPath, destPath)
-      } else {
-        fs.copyFileSync(srcPath, destPath)
-      }
+    if (pwa) {
+      spinner.text = "Adding PWA support..."
+      addPwaSupport(targetDir, pkg, projectName)
     }
-  }
 
-  function getLatestVersion(packageName) {
-    try {
-      const version = execSync(`npm view ${packageName} version`, {
-        encoding: "utf-8",
-        stdio: "pipe", // Prevent npm view output from cluttering the console
-        timeout: NPM_VIEW_TIMEOUT_MS,
-      }).trim()
-      return `^${version}`
-    } catch {
-      return "latest" // fallback
+    if (mobile) {
+      spinner.text = "Adding Capacitor support..."
+      addMobileSupport(targetDir, pkg, projectName)
     }
-  }
-}
-
-function parseCliOptions(args) {
-  return {
-    mobile: readBooleanFlag(args, "mobile"),
-    pwa: readBooleanFlag(args, "pwa"),
-  }
-}
-
-function readBooleanFlag(args, name) {
-  if (args.includes(`--${name}`)) {
-    return true
-  }
-
-  if (args.includes(`--no-${name}`)) {
-    return false
-  }
-
-  return null
-}
-
-function addPwaSupport(targetDir, projectName) {
-  const publicDir = path.join(targetDir, "public")
-  fs.mkdirSync(publicDir, { recursive: true })
-  fs.writeFileSync(path.join(publicDir, "sw.js"), createServiceWorkerSource())
-  fs.writeFileSync(
-    path.join(publicDir, "manifest.webmanifest"),
-    JSON.stringify(createWebManifest(projectName), null, INDENTATION) + EOL,
-  )
-
-  injectPwaHeadTags(path.join(targetDir, "index.html"))
-  injectServiceWorkerRegistration(targetDir)
-}
-
-function addMobileSupport(targetDir, pkg, projectName, templateName) {
-  pkg.dependencies ??= {}
-  pkg.devDependencies ??= {}
-  pkg.scripts ??= {}
-
-  pkg.dependencies["@capacitor/core"] = CAPACITOR_VERSION
-  pkg.devDependencies["@capacitor/android"] = CAPACITOR_VERSION
-  pkg.devDependencies["@capacitor/cli"] = CAPACITOR_VERSION
-  pkg.devDependencies["@capacitor/ios"] = CAPACITOR_VERSION
-
-  pkg.scripts.cap = "cap"
-  pkg.scripts["mobile:sync"] = "pnpm build && cap sync"
-  pkg.scripts["mobile:ios"] = "pnpm build && cap run ios"
-  pkg.scripts["mobile:android"] = "pnpm build && cap run android"
-
-  const extension = templateName.startsWith("ts") ? "ts" : "js"
-  fs.writeFileSync(
-    path.join(targetDir, `capacitor.config.${extension}`),
-    createCapacitorConfigSource(projectName, extension),
-  )
-}
-
-function createServiceWorkerSource() {
-  return `const CACHE_NAME = "inglorious-app-v1"
-const APP_SHELL = ["/", "/index.html", "/logo.png", "/style.css"]
-
-self.addEventListener("install", (event) => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then((cache) => cache.addAll(APP_SHELL)),
-  )
-  self.skipWaiting()
-})
-
-self.addEventListener("activate", (event) => {
-  event.waitUntil(
-    caches
-      .keys()
-      .then((keys) =>
-        Promise.all(keys.map((key) => key === CACHE_NAME ? null : caches.delete(key))),
-      ),
-  )
-  self.clients.claim()
-})
-
-self.addEventListener("fetch", (event) => {
-  if (event.request.method !== "GET") {
-    return
-  }
 
-  event.respondWith(
-    caches.match(event.request).then((cachedResponse) => {
-      if (cachedResponse) {
-        return cachedResponse
-      }
-
-      return fetch(event.request).catch(() => {
-        if (event.request.mode === "navigate") {
-          return caches.match("/index.html")
+    for (const depType of ["dependencies", "devDependencies"]) {
+      if (pkg[depType]) {
+        for (const [name, version] of Object.entries(pkg[depType])) {
+          if (version.startsWith("workspace:")) {
+            spinner.text = `Fetching latest version of ${name}...`
+            pkg[depType][name] = getLatestVersion(name)
+          }
         }
+      }
+    }
 
-        throw new Error("Network request failed")
-      })
-    }),
-  )
-})
-`
-}
-
-function createWebManifest(projectName) {
-  return {
-    name: projectName,
-    short_name: projectName,
-    description: "An Inglorious Web app.",
-    start_url: "/",
-    display: "standalone",
-    background_color: "#ffffff",
-    theme_color: "#111827",
-    icons: [
-      {
-        src: "/logo.png",
-        sizes: "192x192",
-        type: "image/png",
-      },
-      {
-        src: "/logo.png",
-        sizes: "512x512",
-        type: "image/png",
-      },
-    ],
-  }
-}
-
-function injectPwaHeadTags(indexPath) {
-  let index = fs.readFileSync(indexPath, "utf-8")
-
-  if (!index.includes('rel="manifest"')) {
-    index = index.replace(
-      /^([ \t]*<link rel="icon"[^>]*>\r?\n)/m,
-      `$1    <link rel="manifest" href="/manifest.webmanifest" />${EOL}`,
-    )
-  }
-
-  if (!index.includes('name="theme-color"')) {
-    index = index.replace(
-      /^([ \t]*<meta name="viewport"[^>]*>\r?\n)/m,
-      `$1    <meta name="theme-color" content="#111827" />${EOL}`,
-    )
-  }
-
-  fs.writeFileSync(indexPath, index)
-}
-
-function injectServiceWorkerRegistration(targetDir) {
-  const mainPath = findMainPath(targetDir)
-
-  if (!mainPath) {
-    return
-  }
-
-  let main = fs.readFileSync(mainPath, "utf-8")
-
-  if (!main.includes("@inglorious/web/mobile")) {
-    main = main.replace(
-      /^([ \t]*import \{ mount \} from "@inglorious\/web"\r?\n)/m,
-      (match) =>
-        `${match}import { isNative } from "@inglorious/web/mobile"${EOL}`,
-    )
-  }
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, INDENTATION) + EOL)
 
-  if (!main.includes('navigator.serviceWorker.register("/sw.js")')) {
-    main = `${main.trimEnd()}${EOL}${EOL}if (!isNative() && "serviceWorker" in navigator) {
-  navigator.serviceWorker.register("/sw.js")
-}${EOL}`
+    spinner.succeed(`Created ${projectName} at ${targetDir}`)
+    console.log(`\nNext steps:`)
+    console.log(`  cd ${projectName}`)
+    console.log(`  pnpm install`)
+    console.log(`  pnpm dev`)
+  } catch (error) {
+    spinner.fail("Operation failed.")
+    console.error(error)
   }
-
-  fs.writeFileSync(mainPath, main)
-}
-
-function findMainPath(targetDir) {
-  const candidates = [
-    path.join(targetDir, "src/main.ts"),
-    path.join(targetDir, "src/main.js"),
-  ]
-
-  return candidates.find((candidate) => fs.existsSync(candidate)) ?? null
 }
 
-function createCapacitorConfigSource(projectName, extension) {
-  const appId = `com.inglorious.${toJavaIdentifier(projectName)}`
-
-  if (extension === "ts") {
-    return `import type { CapacitorConfig } from "@capacitor/cli"
-
-const config: CapacitorConfig = {
-  appId: "${appId}",
-  appName: "${projectName}",
-  webDir: "dist",
-}
-
-export default config
-`
+function getLatestVersion(packageName) {
+  try {
+    const version = execSync(`npm view ${packageName} version`, {
+      encoding: "utf-8",
+      stdio: "pipe",
+      timeout: NPM_VIEW_TIMEOUT_MS,
+    }).trim()
+    return `^${version}`
+  } catch {
+    return "latest"
   }
-
-  return `/** @type {import("@capacitor/cli").CapacitorConfig} */
-const config = {
-  appId: "${appId}",
-  appName: "${projectName}",
-  webDir: "dist",
-}
-
-export default config
-`
-}
-
-function toJavaIdentifier(value) {
-  const identifier = value
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, " ")
-    .trim()
-    .split(" ")
-    .filter(Boolean)
-    .map((part, index) =>
-      index === FIRST_ITEM_INDEX
-        ? part
-        : part.charAt(FIRST_CHARACTER_INDEX).toUpperCase() +
-          part.slice(AFTER_FIRST_CHARACTER_INDEX),
-    )
-    .join("")
-    .replace(/^[^a-z]+/, "")
-
-  return identifier || "app"
 }
 
 main().catch((e) => {

package/bin/lib/cli.js

@@ -0,0 +1,18 @@
+export function parseCliOptions(args) {
+  return {
+    mobile: readBooleanFlag(args, "mobile"),
+    pwa: readBooleanFlag(args, "pwa"),
+  }
+}
+
+export function readBooleanFlag(args, name) {
+  if (args.includes(`--${name}`)) {
+    return true
+  }
+
+  if (args.includes(`--no-${name}`)) {
+    return false
+  }
+
+  return null
+}

package/bin/lib/constants.js

@@ -0,0 +1,14 @@
+export const CAPACITOR_VERSION = "^8.5.1"
+export const VITE_PLUGIN_PWA_VERSION = "^1.3.0"
+export const VITE_PWA_ASSETS_GENERATOR_VERSION = "^1.0.2"
+export const TYPESCRIPT_VERSION = "^7.0.2"
+export const WORKBOX_WINDOW_VERSION = "^7.4.1"
+
+export const INDENTATION = 2
+export const AFTER_FIRST_CHARACTER_INDEX = 1
+export const EMPTY_LENGTH = 0
+export const FIRST_CHARACTER_INDEX = 0
+export const FIRST_ITEM_INDEX = 0
+export const NPM_VIEW_TIMEOUT_MS = 10_000
+export const USER_ARG_START_INDEX = 2
+export const VITE_APP_TEMPLATES = new Set(["js", "ts"])

package/bin/lib/file.js

@@ -0,0 +1,88 @@
+import fs from "fs"
+import { EOL } from "os"
+import path from "path"
+
+import {
+  AFTER_FIRST_CHARACTER_INDEX,
+  FIRST_CHARACTER_INDEX,
+  FIRST_ITEM_INDEX,
+} from "./constants.js"
+
+export function copyDir(src, dest) {
+  fs.mkdirSync(dest, { recursive: true })
+
+  const entries = fs.readdirSync(src, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+
+    if (entry.name === "gitignore") {
+      fs.copyFileSync(srcPath, path.join(dest, ".gitignore"))
+      continue
+    }
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath)
+    } else {
+      fs.copyFileSync(srcPath, destPath)
+    }
+  }
+}
+
+export function findMainPath(targetDir) {
+  const candidates = [
+    path.join(targetDir, "src/main.ts"),
+    path.join(targetDir, "src/main.js"),
+  ]
+
+  return candidates.find((candidate) => fs.existsSync(candidate)) ?? null
+}
+
+export function findViteConfigPath(targetDir) {
+  const candidates = [
+    path.join(targetDir, "vite.config.ts"),
+    path.join(targetDir, "vite.config.js"),
+  ]
+
+  return candidates.find((candidate) => fs.existsSync(candidate)) ?? null
+}
+
+export function injectAfterImport(source, importSource, newImport) {
+  const importLinePattern = new RegExp(
+    `^([ \\t]*import .+ from "${escapeRegExp(importSource)}"\\r?\\n)`,
+    "m",
+  )
+
+  if (!importLinePattern.test(source)) {
+    return `${newImport}${EOL}${source}`
+  }
+
+  return source.replace(
+    importLinePattern,
+    (match) => `${match}${newImport}${EOL}`,
+  )
+}
+
+export function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+}
+
+export function toJavaIdentifier(value) {
+  const identifier = value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, " ")
+    .trim()
+    .split(" ")
+    .filter(Boolean)
+    .map((part, index) =>
+      index === FIRST_ITEM_INDEX
+        ? part
+        : part.charAt(FIRST_CHARACTER_INDEX).toUpperCase() +
+          part.slice(AFTER_FIRST_CHARACTER_INDEX),
+    )
+    .join("")
+    .replace(/^[^a-z]+/, "")
+
+  return identifier || "app"
+}

package/bin/lib/mobile.js

@@ -0,0 +1,122 @@
+import fs from "fs"
+import { EOL } from "os"
+import path from "path"
+
+import { CAPACITOR_VERSION, TYPESCRIPT_VERSION } from "./constants.js"
+import { toJavaIdentifier } from "./file.js"
+
+export function addMobileSupport(targetDir, pkg, projectName) {
+  pkg.dependencies ??= {}
+  pkg.devDependencies ??= {}
+  pkg.scripts ??= {}
+
+  pkg.dependencies["@capacitor/core"] = CAPACITOR_VERSION
+  pkg.devDependencies["@capacitor/android"] = CAPACITOR_VERSION
+  pkg.devDependencies["@capacitor/cli"] = CAPACITOR_VERSION
+  pkg.devDependencies["@capacitor/ios"] = CAPACITOR_VERSION
+  pkg.devDependencies["typescript"] = TYPESCRIPT_VERSION
+
+  pkg.scripts.cap = "cap"
+  pkg.scripts["mobile:init:ios"] = "cap add ios"
+  pkg.scripts["mobile:init:android"] = "cap add android"
+  pkg.scripts["mobile:sync"] = "pnpm build && cap sync"
+  pkg.scripts["mobile:ios"] = "pnpm build && cap run ios"
+  pkg.scripts["mobile:android"] = "pnpm build && cap run android"
+
+  fs.writeFileSync(
+    path.join(targetDir, "capacitor.config.ts"),
+    createCapacitorConfigSource(projectName),
+  )
+
+  appendMobileSetupToReadme(targetDir)
+}
+
+export function appendMobileSetupToReadme(targetDir) {
+  const readmePath = path.join(targetDir, "README.md")
+  if (!fs.existsSync(readmePath)) {
+    return
+  }
+
+  const readme = fs.readFileSync(readmePath, "utf-8")
+  if (readme.includes("## Mobile Setup")) {
+    return
+  }
+
+  const mobileReadme = `
+## Mobile Setup
+
+This project includes Capacitor for Android and iOS support.
+
+Please note that mobile development depends on external platform tooling that is not installed or managed by the CLI. If the app does not just work after scaffolding, it is usually because one or more native prerequisites are missing on the machine.
+
+### Android
+
+Before you run the native apps, make sure you have:
+
+- Android Studio installed with the Android SDK: https://developer.android.com/studio
+- A Java Development Kit compatible with Capacitor. Capacitor is currently known to work reliably with JDK 21, so prefer JDK 21 over newer versions if you run into Java compatibility errors.
+- The SDK path available via ANDROID_HOME (for example, on macOS this is often $HOME/Library/Android/sdk)
+
+On macOS, the following shell variables are commonly needed:
+
+\`\`\`bash
+export JAVA_HOME="/path/to/jdk-21"
+export ANDROID_HOME="$HOME/Library/Android/sdk"
+export PATH="$ANDROID_HOME/platform-tools:$PATH"
+\`\`\`
+
+### iOS
+
+For iOS you also need the Apple toolchain and device setup on a Mac:
+
+- Xcode from the App Store
+- iOS development tools and simulator components (this can be very large, often multiple GB)
+- A valid Apple Developer team / signing identity in Xcode
+- Device trust setup for your iPhone in Settings > General > VPN & Device Management
+
+The most common first-time setup commands are:
+
+\`\`\`bash
+sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer
+sudo xcodebuild -license accept
+\`\`\`
+
+If you are using a physical device, you may also need to approve the developer certificate on the device and ensure the app is signed with a valid team.
+
+### Official resources
+
+- Android: https://capacitorjs.com/docs/android
+- iOS: https://capacitorjs.com/docs/ios
+- Android Studio: https://developer.android.com/studio
+- Xcode: https://developer.apple.com/xcode/
+
+Then sync and open the native project:
+
+\`\`\`bash
+pnpm mobile:sync
+pnpm mobile:android
+# or
+pnpm mobile:ios
+\`\`\`
+`
+
+  fs.writeFileSync(
+    readmePath,
+    `${readme.trimEnd()}${EOL}${EOL}${mobileReadme.trim()}${EOL}`,
+  )
+}
+
+export function createCapacitorConfigSource(projectName) {
+  const appId = `com.inglorious.${toJavaIdentifier(projectName)}`
+
+  return `import type { CapacitorConfig } from "@capacitor/cli"
+
+const config: CapacitorConfig = {
+  appId: "${appId}",
+  appName: "${projectName}",
+  webDir: "dist",
+}
+
+export default config
+`
+}

package/bin/lib/pwa.js

@@ -0,0 +1,122 @@
+import fs from "fs"
+import { EOL } from "os"
+import path from "path"
+
+import {
+  VITE_PLUGIN_PWA_VERSION,
+  VITE_PWA_ASSETS_GENERATOR_VERSION,
+  WORKBOX_WINDOW_VERSION,
+} from "./constants.js"
+import { findMainPath, findViteConfigPath, injectAfterImport } from "./file.js"
+
+export function addPwaSupport(targetDir, pkg, projectName) {
+  pkg.devDependencies ??= {}
+  pkg.devDependencies["vite-plugin-pwa"] = VITE_PLUGIN_PWA_VERSION
+  pkg.devDependencies["@vite-pwa/assets-generator"] =
+    VITE_PWA_ASSETS_GENERATOR_VERSION
+  pkg.devDependencies["workbox-window"] = WORKBOX_WINDOW_VERSION
+
+  const publicDir = path.join(targetDir, "public")
+  fs.mkdirSync(publicDir, { recursive: true })
+
+  injectPwaPluginConfig(targetDir, projectName)
+  writePwaRegistration(targetDir)
+  injectServiceWorkerRegistration(targetDir)
+}
+
+export function injectServiceWorkerRegistration(targetDir) {
+  const mainPath = findMainPath(targetDir)
+
+  if (!mainPath) {
+    return
+  }
+
+  let main = fs.readFileSync(mainPath, "utf-8")
+
+  if (!main.includes("./pwa")) {
+    main = injectAfterImport(main, "@inglorious/web", `import "./pwa"`)
+  }
+
+  fs.writeFileSync(mainPath, main)
+}
+
+export function injectPwaPluginConfig(targetDir, projectName) {
+  const viteConfigPath = findViteConfigPath(targetDir)
+
+  if (!viteConfigPath) {
+    return
+  }
+
+  let viteConfig = fs.readFileSync(viteConfigPath, "utf-8")
+
+  if (!viteConfig.includes("vite-plugin-pwa")) {
+    viteConfig = injectAfterImport(
+      viteConfig,
+      "vite",
+      `import { VitePWA } from "vite-plugin-pwa"`,
+    )
+  }
+
+  if (!viteConfig.includes("VitePWA(")) {
+    viteConfig = viteConfig.replace(
+      /plugins: \[/,
+      `plugins: [${EOL}    ${createVitePwaConfig(projectName)},`,
+    )
+  }
+
+  fs.writeFileSync(viteConfigPath, viteConfig)
+}
+
+export function writePwaRegistration(targetDir) {
+  const mainPath = findMainPath(targetDir)
+
+  if (!mainPath) {
+    return
+  }
+
+  const extension = path.extname(mainPath)
+  const pwaPath = path.join(targetDir, `src/pwa${extension}`)
+
+  fs.writeFileSync(pwaPath, createPwaRegistrationSource(extension))
+}
+
+export function createPwaRegistrationSource(extension) {
+  if (extension === ".ts") {
+    return `/// <reference types="vite-plugin-pwa/client" />
+import { isNative } from "@inglorious/web/mobile"
+import { registerSW } from "virtual:pwa-register"
+
+if (!isNative()) {
+  registerSW()
+}
+`
+  }
+
+  return `import { isNative } from "@inglorious/web/mobile"
+import { registerSW } from "virtual:pwa-register"
+
+if (!isNative()) {
+  registerSW()
+}
+`
+}
+
+export function createVitePwaConfig(projectName) {
+  return `VitePWA({
+      injectRegister: false,
+      registerType: "autoUpdate",
+      pwaAssets: {
+        image: "public/logo.png",
+        preset: "minimal-2023",
+      },
+      manifest: {
+        name: "${projectName}",
+        short_name: "${projectName}",
+        description: "An Inglorious Web app.",
+        theme_color: "#ffffff",
+        background_color: "#ffffff",
+        display: "standalone",
+        start_url: "/",
+      },
+    })`
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A scaffolding tool to quickly create a new app with Inglorious Web.",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -37,8 +37,8 @@
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "prettier": "^3.6.2",
-    "@inglorious/eslint-config": "1.1.2"
+    "@inglorious/eslint-config": "1.1.2",
+    "prettier": "^3.6.2"
   },
   "scripts": {
     "format": "prettier --write .",

package/templates/js/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

package/templates/js/package.json

@@ -19,13 +19,14 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
-    "rollup-plugin-minify-template-literals": "^1.1.7",
-    "sharp": "^0.34.5",
-    "svgo": "^4.0.0",
-    "vite-plugin-image-optimizer": "^2.0.3",
-    "vite": "^7.1.6"
+    "@inglorious/vite-plugin-hmr": "workspace:*",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
+    "rollup-plugin-minify-template-literals": "^2.2.0",
+    "sharp": "^0.35.4",
+    "svgo": "^4.1.0",
+    "vite": "^8.2.2",
+    "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",
   "engines": {

package/templates/js-jsx/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

package/templates/js-jsx/package.json

@@ -19,14 +19,15 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-jsx": "workspace:*",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
-    "rollup-plugin-minify-template-literals": "^1.1.7",
-    "sharp": "^0.34.5",
-    "svgo": "^4.0.0",
-    "vite-plugin-image-optimizer": "^2.0.3",
-    "vite": "^7.1.6"
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
+    "rollup-plugin-minify-template-literals": "^2.2.0",
+    "sharp": "^0.35.4",
+    "svgo": "^4.1.0",
+    "vite": "^8.2.2",
+    "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",
   "engines": {

package/templates/js-vue/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

package/templates/js-vue/package.json

@@ -19,13 +19,14 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-vue": "workspace:*",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
-    "rollup-plugin-minify-template-literals": "^1.1.7",
-    "sharp": "^0.34.5",
-    "svgo": "^4.0.0",
-    "vite": "^7.1.6",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
+    "rollup-plugin-minify-template-literals": "^2.2.0",
+    "sharp": "^0.35.4",
+    "svgo": "^4.1.0",
+    "vite": "^8.2.2",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/minimal/index.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/public/logo.png" />
     <link rel="stylesheet" href="/public/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>Inglorious App</title>
   </head>
 

package/templates/ssx-js/package.json

@@ -25,8 +25,8 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
     "serve": "^14.2.1"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/ssx-js/src/site.config.js

@@ -3,6 +3,7 @@ export default {
   title: "My SSX App",
   meta: {
     description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
   },
   // SSX includes image optimization by default
   vite: {

package/templates/ssx-ts/package.json

@@ -25,8 +25,8 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
     "serve": "^14.2.1"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/ssx-ts/src/site.config.ts

@@ -4,6 +4,7 @@ const siteConfig: SiteConfig = {
   title: "My SSX App",
   meta: {
     description: "Built with @inglorious/ssx",
+    viewport: "width=device-width, initial-scale=1.0, viewport-fit=cover",
   },
   // SSX includes image optimization by default
   vite: {

package/templates/ts/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

package/templates/ts/package.json

@@ -19,14 +19,15 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-hmr": "workspace:*",
     "@types/node": "^25.0.9",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
-    "rollup-plugin-minify-template-literals": "^1.1.7",
-    "sharp": "^0.34.5",
-    "svgo": "^4.0.0",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
+    "rollup-plugin-minify-template-literals": "^2.2.0",
+    "sharp": "^0.35.4",
+    "svgo": "^4.1.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.6",
+    "vite": "^8.2.2",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/ts-jsx/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

package/templates/ts-jsx/package.json

@@ -20,15 +20,16 @@
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
     "@inglorious/jsx": "workspace:*",
+    "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-jsx": "workspace:*",
     "@types/node": "^25.0.9",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
-    "rollup-plugin-minify-template-literals": "^1.1.7",
-    "sharp": "^0.34.5",
-    "svgo": "^4.0.0",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
+    "rollup-plugin-minify-template-literals": "^2.2.0",
+    "sharp": "^0.35.4",
+    "svgo": "^4.1.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.6",
+    "vite": "^8.2.2",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",

package/templates/ts-vue/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <link rel="icon" type="image/svg+xml" href="/logo.png" />
     <link rel="stylesheet" href="/style.css" />
     <title>Inglorious App</title>

package/templates/ts-vue/package.json

@@ -19,15 +19,16 @@
   },
   "devDependencies": {
     "@inglorious/eslint-config": "workspace:*",
+    "@inglorious/vite-plugin-hmr": "workspace:*",
     "@inglorious/vite-plugin-vue": "workspace:*",
     "@types/node": "^25.0.9",
-    "eslint": "^9.39.1",
-    "prettier": "^3.6.2",
-    "rollup-plugin-minify-template-literals": "^1.1.7",
-    "sharp": "^0.34.5",
-    "svgo": "^4.0.0",
+    "eslint": "^10.9.1",
+    "prettier": "^3.9.6",
+    "rollup-plugin-minify-template-literals": "^2.2.0",
+    "sharp": "^0.35.4",
+    "svgo": "^4.1.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.6",
+    "vite": "^8.2.2",
     "vite-plugin-image-optimizer": "^2.0.3"
   },
   "packageManager": "pnpm@10.15.0",