@inglorious/create-app 1.1.0 → 1.1.1

package/README.md

@@ -67,6 +67,12 @@ When mobile support is enabled, build and sync native projects with:
 pnpm mobile:sync
 ```
 
+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

@@ -316,9 +316,86 @@ function addMobileSupport(targetDir, pkg, projectName, templateName) {
 
   const extension = templateName.startsWith("ts") ? "ts" : "js"
   fs.writeFileSync(
-    path.join(targetDir, `capacitor.config.${extension}`),
+    path.join(targetDir, `capacitor.config.ts`), // HACK: apparently only ts config works!
     createCapacitorConfigSource(projectName, extension),
   )
+
+  appendMobileSetupToReadme(targetDir)
+}
+
+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}`,
+  )
 }
 
 function createServiceWorkerSource() {
@@ -446,11 +523,11 @@ function findMainPath(targetDir) {
   return candidates.find((candidate) => fs.existsSync(candidate)) ?? null
 }
 
-function createCapacitorConfigSource(projectName, extension) {
+function createCapacitorConfigSource(projectName /* , extension */) {
   const appId = `com.inglorious.${toJavaIdentifier(projectName)}`
 
-  if (extension === "ts") {
-    return `import type { CapacitorConfig } from "@capacitor/cli"
+  //if (extension === "ts") { // HACK: apparently only ts config files work!
+  return `import type { CapacitorConfig } from "@capacitor/cli"
 
 const config: CapacitorConfig = {
   appId: "${appId}",
@@ -458,17 +535,6 @@ const config: CapacitorConfig = {
   webDir: "dist",
 }
 
-export default config
-`
-  }
-
-  return `/** @type {import("@capacitor/cli").CapacitorConfig} */
-const config = {
-  appId: "${appId}",
-  appName: "${projectName}",
-  webDir: "dist",
-}
-
 export default config
 `
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/create-app",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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",

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-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-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/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/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/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-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-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>