create-spark-html-app 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spark-html-app",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Scaffold a Vite + spark-html app with a live reactive welcome screen.",
   "type": "module",
   "bin": {

package/template/README.md

@@ -13,13 +13,28 @@ npm run dev
 Open the dev server and edit `public/components/welcome.html`. Save, and the
 page reloads instantly.
 
-## Build
+## Build (SEO-ready)
 
 ```bash
 npm run build     # static output → dist/, serve anywhere
 npm run preview   # preview the production build locally
 ```
 
+`npm run build` is **SEO-friendly out of the box**: the `spark-prerender`
+Vite plugin runs your app at build time and writes fully-rendered HTML into
+`dist/` — so crawlers and AI tools read real content (headings, text, links),
+not empty placeholders. The browser still hydrates over it for full
+interactivity. Set page metadata as plain component state:
+
+```html
+<script>
+  let pageTitle = 'My App — does a thing';
+  let pageDescription = 'A short, crawlable description of the page.';
+</script>
+```
+
+Don't need SEO? Remove the `prerender(...)` plugin from `vite.config.js`.
+
 ## How it's wired
 
 ```
@@ -29,7 +44,7 @@ npm run preview   # preview the production build locally
 ├── public/components/      ← your components (plain .html files)
 │   ├── app.html            ← theme + shell
 │   └── welcome.html        ← the live reactive welcome screen
-└── vite.config.js          ← spark-html/vite plugin
+└── vite.config.js          ← spark-html/vite + spark-prerender/vite (SEO)
 ```
 
 A component is a `.html` file with optional `<script>` and `<style>`. Top-level

package/template/package.json

@@ -12,6 +12,7 @@
     "spark-html": "latest"
   },
   "devDependencies": {
+    "spark-prerender": "latest",
     "vite": "^5.0.0"
   }
 }

package/template/vite.config.js

@@ -1,10 +1,19 @@
 import { defineConfig } from 'vite';
 import spark from 'spark-html/vite';
+import prerender from 'spark-prerender/vite';
 
 // Spark needs no build step — Vite is just a convenient dev server and
 // bundler. The plugin serves component fragments raw and full-reloads
 // when one changes. Components live in public/ so they ship verbatim to
 // the production build too.
+//
+// `prerender()` makes `npm run build` SEO-friendly: it runs your app at
+// build time and writes fully-rendered HTML into dist/ (crawlers and AI
+// tools read real content; the browser still hydrates over it). Remove it
+// if you don't need SEO. List every page you ship in `pages`.
 export default defineConfig({
-  plugins: [spark()],
+  plugins: [
+    spark(),
+    prerender({ pages: ['index.html'] }),
+  ],
 });