@undp/create-app 0.91.0 → 0.91.2

package/README.md

@@ -27,11 +27,13 @@ All setups include **Tailwind CSS** for styling and **Zustand** for state manage
 
 | Framework | Variants | Description | Internationalization Available |
 |------------|-----------|-------------|-------------|
-| **Vite** | Basic | Minimal React + TypeScript setup | ✅ |
-| **Vite** | + Router | Adds TanStack Router for routing | ✅ |
+| **Vite** ⭐ Recommended | Basic | Minimal React + TypeScript setup | ✅ |
+| **Vite**  ⭐ Recommended | + Router | Adds TanStack Router for routing | ✅ |
 | **Next.js** | Basic | SSR and file-based routing | ❌ |
 | **Next.js** | + Auth | Includes authentication via Better Auth | ❌ |
 
+> **Note:** Vite is the primary focus of this scaffolding. Its setups are the most mature and feature-complete, including i18n support. The Next.js setups are more experimental and may lag behind.
+
 ---
 
 ## 📦 Installation
@@ -54,4 +56,4 @@ cd my-undp-app && npm run dev
 
 *Please note: If you have not installed the dependencies then you might want to run `npm install` before `npm run dev`.*
 
-*Please note: The scaffolding tool installs Proxima Nova and Sonhe Breit fonts; you can only use these fonts if you have a license or are using the app as UNDP sub-domain.*
+*Please note: The scaffolding tool installs Proxima Nova and Sonhe Breit fonts; you can only use these fonts if you have a license or are using the app as UNDP sub-domain.*

package/bin/generateFiles/generateIndexHtml.js

@@ -1,18 +1,26 @@
 export function generateIndexHtml(config) {
-  return `<!doctype html>
+	return `<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>${config.projectName}</title>
+    <link rel="preload" href="/fonts/proximanova-regular-webfont.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/proximanova-semibold-webfont.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="/fonts/soehne-breit-web-fett.woff2" as="font" type="font/woff2" crossorigin />
   </head>
   <body>
-    ${!config.addPostCSSScripts ? `<div id="root"></div>` : `<div class="undp-container">
+    ${
+			!config.addPostCSSScripts
+				? `<div id="root"></div>`
+				: `<div class="undp-container">
       <div id="root"></div>
-    </div>` }
+    </div>`
+		}
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
-`
-}
+`;
+}

package/bin/generateFiles/generatePackageJson.js

@@ -101,6 +101,7 @@ export function generatePackageJson(config) {
 				tailwindcss: tailwindcssVer,
 				typescript: typeScriptVer,
 				vite: "^8.3.5",
+				"vite-plugin-sitemap": "0.8.2",
 				"vite-plugin-static-copy": "^4.1.0",
 			}
 		: {

package/bin/generateFiles/generateStaticWebAppConfig.js

@@ -1,8 +1,11 @@
 export function generateStaticWebAppConfig() {
-  return `{
+	return `{
   "globalHeaders": {
     "Access-Control-Allow-Origin": "*",
-    "Access-Control-Allow-Methods": "GET, OPTIONS"
+    "Access-Control-Allow-Methods": "GET, OPTIONS",
+    'Strict-Transport-Security': 'max-age=31536000',
+    'X-Content-Type-Options': 'nosniff',
+    'Referrer-Policy': 'strict-origin-when-cross-origin',
   },
   "routes": [
     {
@@ -36,12 +39,19 @@ export function generateStaticWebAppConfig() {
         "Access-Control-Allow-Methods": "GET, OPTIONS",
         "Cache-Control": "no-cache"
       }
-    }
+    },
+    {
+      "route": "/assets/*",
+      "headers": {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, OPTIONS",
+        "Cache-Control": "public, max-age=31536000, immutable"
+      }
+    },
   ],
   "navigationFallback": {
     "rewrite": "/index.html",
     "exclude": ["/assets/*", "/*.js", "/*.css", "/*.png", "/*.jpg", "/*.svg"]
   }
-}`
+}`;
 }
-

package/bin/generateFiles/generateViteConfig.js

@@ -4,6 +4,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 // import { visualizer } from 'rollup-plugin-visualizer';
 import postcssNested from 'postcss-nested';
+import { viteStaticCopy } from 'vite-plugin-sitemap';
 import tailwindcss from '@tailwindcss/postcss';${
 		config.addStaticWebAppConfig
 			? `
@@ -19,6 +20,11 @@ import { AtRule } from 'postcss';`
 export default defineConfig({
   plugins: [
     react({}),
+    Sitemap({ 
+      hostname: 'https://example.com',
+      // includes: [],
+      exclude: ['/admin', '/private']
+    }),
     // visualizer({ filename: 'stats.html', open: true }),${
 			config.addStaticWebAppConfig
 				? `

package/bin/promptUser.js

@@ -1,134 +1,153 @@
-import readline from 'readline';
-import inquirer from 'inquirer';
-import chalk from 'chalk';
+import chalk from "chalk";
+import inquirer from "inquirer";
+import readline from "readline";
 
 const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout,
+	input: process.stdin,
+	output: process.stdout,
 });
 
 const question = (query) =>
-  new Promise(resolve => rl.question(query, resolve));
+	new Promise((resolve) => rl.question(query, resolve));
 
 export async function promptUser(name) {
-  console.log(
-    chalk.bold.cyan("\n🚀 UNDP Frontend Starter Kit | Let's configure your application")
-  );
-  console.log(chalk.gray('─'.repeat(60)) + '\n');
-
-  const projectName = name ? name : (await question(chalk.yellow('📝 Enter project name: '))) || 'my-undp-react-app';
-  
-  const { framework } = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'framework',
-      loop: false,
-      message: chalk.yellow('📦 Choose your setup (all include Tailwind for styling & Zustand for state management):\n'),
-      choices: [
-        { name: 'Vite — Basic React setup (ideal for embedding)', value: 'vite-basic' },
-        { name: 'Vite + Router — With routing support', value: 'vite-router' },
-        { name: 'Next.js — SSR and file routing', value: 'next-basic' },
-        { name: 'Next.js + Auth — With authentication', value: 'next-auth' },
-      ],
-      default: 'vite-basic',
-    },
-  ]);  
-
-  const { addQuery } = await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'addQuery',
-      message: chalk.yellow(
-        '⚙️ Add @tanstack/query for data fetching?'
-      ),
-      choices: ['Yes', 'No'],
-      default: 'No',
-    },
-  ]);
-
-  const query = addQuery === 'Yes';
-
-  let language = false;
-
-  if (framework === 'vite-basic' || framework === 'vite-router') {
-    const { addLanguage } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'addLanguage',
-        message: chalk.yellow(
-          '⚙️ Add multi language support (en, es, fr)?'
-        ),
-        choices: ['Yes', 'No'],
-        default: 'No',
-      },
-    ]);
-
-    language = addLanguage === 'Yes';
-  }
-
-  const libraryChoices = [
-    { 
-      name: '@undp/data-viz — UNDP data visualization components', 
-      value: '@undp/data-viz' 
-    },
-    { 
-      name: 'lucide-react — Beautiful open-source icon set for React', 
-      value: 'lucide-react' 
-    },
-    { 
-      name: 'Peer dependencies — Install required framework dependencies', 
-      value: 'peer' 
-    },
-  ];
-
-  const { libraries } = await inquirer.prompt([
-    {
-      type: 'checkbox',
-      name: 'libraries',
-      message: chalk.yellow('📦 Select the libraries you want to install:'),
-      choices: libraryChoices,
-      default: ['@undp/data-viz', 'lucide-react'],
-    },
-  ]);
-
-  let addPostCSSScripts = false;
-
-  if(framework === 'vite-basic') {
-    const { postCSS } = await inquirer.prompt([
-      {
-        type: 'list',
-        name: 'postCSS',
-        message: chalk.yellow(
-          '⚙️ Add PostCSS script to wrap all classes in `.undp-container` (recommended only if embedding in another app)?'
-        ),
-        choices: ['Yes', 'No'],
-        default: 'Yes',
-      },
-    ]);
-    addPostCSSScripts = postCSS === 'Yes';
-  }
-
-  const { staticWebApp } = framework !== 'next-basic' && framework !== 'next-auth' ? await inquirer.prompt([
-    {
-      type: 'list',
-      name: 'staticWebApp',
-      message: chalk.yellow('⚙️ Add Azure Static Web App Config file?'),
-      choices: ['Yes', 'No'],
-      default: 'No',
-    },
-  ]) : { staticWebApp: 'No' };
-
-  const addStaticWebAppConfig = staticWebApp === 'Yes';
-
-  rl.close();
-
-  return {
-    projectName,
-    libraries,
-    addStaticWebAppConfig,
-    addPostCSSScripts,
-    framework,
-    query,
-    language,
-  };
-}
+	console.log(
+		chalk.bold.cyan(
+			"\n🚀 UNDP Frontend Starter Kit | Let's configure your application",
+		),
+	);
+	console.log(chalk.gray("─".repeat(60)) + "\n");
+
+	const projectName = name
+		? name
+		: (await question(chalk.yellow("📝 Enter project name: "))) ||
+			"my-undp-react-app";
+	const { framework } = await inquirer.prompt([
+		{
+			type: "list",
+			name: "framework",
+			loop: false,
+			message: chalk.yellow(
+				"📦 Choose a starter (all include Tailwind CSS + Zustand):\n",
+			),
+			choices: [
+				new inquirer.Separator(chalk.dim("── Vite (recommended) ──")),
+				{
+					name: `Vite · Basic       ${chalk.dim("— Minimal SPA, great for embedding")}`,
+					value: "vite-basic",
+				},
+				{
+					name: `Vite · Router      ${chalk.dim("— Multi-page SPA with TanStack Router")}`,
+					value: "vite-router",
+				},
+				new inquirer.Separator(chalk.dim("── Next.js ──")),
+				{
+					name: `Next.js · Basic    ${chalk.dim("— SSR with file-based routing")}`,
+					value: "next-basic",
+				},
+				{
+					name: `Next.js · Auth     ${chalk.dim("— SSR + authentication via Better Auth")}`,
+					value: "next-auth",
+				},
+			],
+			default: "vite-basic",
+		},
+	]);
+
+	const { addQuery } = await inquirer.prompt([
+		{
+			type: "list",
+			name: "addQuery",
+			message: chalk.yellow("⚙️ Add @tanstack/query for data fetching?"),
+			choices: ["Yes", "No"],
+			default: "No",
+		},
+	]);
+
+	const query = addQuery === "Yes";
+
+	let language = false;
+
+	if (framework === "vite-basic" || framework === "vite-router") {
+		const { addLanguage } = await inquirer.prompt([
+			{
+				type: "list",
+				name: "addLanguage",
+				message: chalk.yellow("⚙️ Add multi language support (en, es, fr)?"),
+				choices: ["Yes", "No"],
+				default: "No",
+			},
+		]);
+
+		language = addLanguage === "Yes";
+	}
+
+	const libraryChoices = [
+		{
+			name: "@undp/data-viz — UNDP data visualization components",
+			value: "@undp/data-viz",
+		},
+		{
+			name: "lucide-react — Beautiful open-source icon set for React",
+			value: "lucide-react",
+		},
+		{
+			name: "Peer dependencies — Install required framework dependencies",
+			value: "peer",
+		},
+	];
+
+	const { libraries } = await inquirer.prompt([
+		{
+			type: "checkbox",
+			name: "libraries",
+			message: chalk.yellow("📦 Select the libraries you want to install:"),
+			choices: libraryChoices,
+			default: ["@undp/data-viz", "lucide-react"],
+		},
+	]);
+
+	let addPostCSSScripts = false;
+
+	if (framework === "vite-basic") {
+		const { postCSS } = await inquirer.prompt([
+			{
+				type: "list",
+				name: "postCSS",
+				message: chalk.yellow(
+					"⚙️ Add PostCSS script to wrap all classes in `.undp-container` (recommended only if embedding in another app)?",
+				),
+				choices: ["Yes", "No"],
+				default: "Yes",
+			},
+		]);
+		addPostCSSScripts = postCSS === "Yes";
+	}
+
+	const { staticWebApp } =
+		framework !== "next-basic" && framework !== "next-auth"
+			? await inquirer.prompt([
+					{
+						type: "list",
+						name: "staticWebApp",
+						message: chalk.yellow("⚙️ Add Azure Static Web App Config file?"),
+						choices: ["Yes", "No"],
+						default: "No",
+					},
+				])
+			: { staticWebApp: "No" };
+
+	const addStaticWebAppConfig = staticWebApp === "Yes";
+
+	rl.close();
+
+	return {
+		projectName,
+		libraries,
+		addStaticWebAppConfig,
+		addPostCSSScripts,
+		framework,
+		query,
+		language,
+	};
+}

package/bin/templates/next/auth/README.md

@@ -102,6 +102,23 @@ import { signIn } from '@/lib/auth-client';
 
 More info: [Better Auth docs](https://www.better-auth.com/docs/introduction)
 
+## ✅ Launch Checklist
+
+Before deploying to production, complete the launch checklist. It covers metadata and SEO, analytics, QA, accessibility, performance, security headers and caching.
+
+The checklist is set up as a GitHub issue template, so each launch gets its own tickable copy:
+
+1. Go to **Issues → New issue** in this repository.
+2. Select **Launch checklist**.
+3. Assign yourself, and click **Create**.
+4. Tick items off as you complete them. The issue list shows progress (e.g. "7 of 32 tasks").
+
+Or open it directly: [Create launch checklist issue](../../issues/new?template=launch-checklist.md)
+
+Don't close the issue until every item is checked, or marked N/A with a reason.
+
+The template lives in `.github/ISSUE_TEMPLATE/launch-checklist.md`.
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/next/basic/README.md

@@ -50,6 +50,23 @@ More info: [Biome Docs](https://biomejs.dev/guides/getting-started/)
 
 This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and includes pre-configured design tokens from the UNDP Design System.
 
+## ✅ Launch Checklist
+
+Before deploying to production, complete the launch checklist. It covers metadata and SEO, analytics, QA, accessibility, performance, security headers and caching.
+
+The checklist is set up as a GitHub issue template, so each launch gets its own tickable copy:
+
+1. Go to **Issues → New issue** in this repository.
+2. Select **Launch checklist**.
+3. Assign yourself, and click **Create**.
+4. Tick items off as you complete them. The issue list shows progress (e.g. "7 of 32 tasks").
+
+Or open it directly: [Create launch checklist issue](../../issues/new?template=launch-checklist.md)
+
+Don't close the issue until every item is checked, or marked N/A with a reason.
+
+The template lives in `.github/ISSUE_TEMPLATE/launch-checklist.md`.
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).

package/bin/templates/vite/basic/.github/ISSUE_TEMPLATE/launch-checklist.md

@@ -0,0 +1,73 @@
+---
+name: Launch checklist
+about: Pre-launch checks to complete before going to production
+title: "Launch checklist"
+labels: launch
+assignees: ''
+---
+
+<!-- Tick items as you go. Don't close this issue until every box is checked or explicitly marked N/A with a reason. -->
+
+## Metadata & SEO
+
+- [ ] Favicon added (`favicon.ico` + SVG).
+- [ ] `<meta name="theme-color">` added.
+- [ ] `<html lang="…">` is set correctly.
+- [ ] Every route has a unique `<title>` and `<meta name="description">`.
+- [ ] Every route has a canonical URL: `<link rel="canonical" href="…">`.
+- [ ] Open Graph and Twitter tags are added (globally in `index.html` or per route). Use absolute URLs for `og:url` and `og:image`:
+
+  ```html
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="SITE_NAME" />
+  <meta property="og:title" content="TITLE" />
+  <meta property="og:description" content="DESCRIPTION" />
+  <meta property="og:url" content="https://example.com/page" />
+  <meta property="og:image" content="https://example.com/og-image.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:image:alt" content="IMAGE_ALT_TEXT" />
+  <meta name="twitter:card" content="summary_large_image" />
+  ```
+  
+- [ ] Social previews verified with a preview tool (e.g. opengraph.xyz, LinkedIn Post Inspector).
+- [ ] `robots.txt` and `sitemap.xml` are in place.
+- [ ] `<meta name="robots" content="noindex">` is added to routes that should not be indexed for search.
+- [ ] Production is indexable (no leftover `noindex`), and staging is **not** indexable.
+- [ ] `apple-touch-icon` (180×180) added - only needed for site which the users might "install".
+- [ ] `site.webmanifest` added - only needed for site which the users might "install".
+
+## Functionality & QA
+
+- [ ] All routes load, including on direct visit or refresh (host has SPA fallback routing).
+- [ ] A custom 404 page exists, and React error boundaries catch runtime errors.
+- [ ] No errors or warnings in the browser console.
+- [ ] All forms, links and external integrations work in production.
+- [ ] Design QA is complete and signed off.
+- [ ] The layout works on all viewport widths from 360px up. At minimum, check 360, 768, 1024 and 1440px.
+- [ ] Tested in the latest Chrome, Firefox, Edge and Safari.
+
+## Performance
+
+- [ ] Initial JS on first page load is ≤ 175 KB gzipped.
+- [ ] Main CSS file is ≤ 50 KB gzipped.
+- [ ] Images are optimised (WebP/AVIF, correctly sized, ≤ 75 KB each, lazy-loaded below the fold).
+- [ ] Fonts are subset and preloaded, with `font-display: swap`.
+- [ ] Lighthouse scores (run in incognito against production):
+
+  | Category       | Desktop | Mobile |
+  |----------------|---------|--------|
+  | Performance    | ≥ 90    | ≥ 70   |
+  | Accessibility  | ≥ 90    | ≥ 90   |
+  | Best Practices | ≥ 90    | ≥ 90   |
+  | SEO            | ≥ 90    | ≥ 90   |
+
+## Security & infrastructure
+
+- [ ] `npm audit` shows no high or critical vulnerabilities.
+- [ ] `npm audit --omit=dev` shows no vulnerabilities.
+- [ ] No secrets or private API keys in the client bundle.
+
+## Analytics & privacy
+
+- [ ] Google Analytics and/or Microsoft Clarity are installed and events are confirmed arriving from production.

package/bin/templates/vite/basic/README.md

@@ -1,6 +1,7 @@
 This is a React + TypeScript + Vite project powered by Tailwind CSS, and the UNDP Design System, bootstrapped with [@undp/create-app](https://www.npmjs.com/package/@undp/create-app). 
 
 It includes:
+
 * React 19.x with React compiler
 * UNDP Design System
 * TailwindCSS
@@ -54,7 +55,9 @@ This project uses [Tailwind CSS](https://tailwindcss.com/) for styling and and i
 
 To embed the visualization on an external page, include:
 
-**HTML Placeholder**
+### Option 1: Iframe
+
+__HTML Placeholder__
 
 ```html
   <iframe
@@ -65,16 +68,15 @@ To embed the visualization on an external page, include:
   />
 ```
 
-**Required `<script>`**
+__Required `<script>`__
 
-```
+```js
   <script>
     var iframe = document.getElementById('my-embed');
     window.addEventListener('message', function (e) {
-      if (e.origin !== 'http://localhost:5173') return;
+      if (e.origin !== 'APP_URL') return;
       if (e.source !== iframe.contentWindow) return;
       if (e.data && e.data.type === 'iframe-height') {
-        console.log('new height', e.data.height);
         iframe.style.height = e.data.height + 'px';
       }
     });
@@ -83,6 +85,39 @@ To embed the visualization on an external page, include:
 
 _This script listens for height messages from the embedded web app and resizes the iframe to match its content, so the app displays without an inner scrollbar._
 
+### Option 2: Embed in the page (Worst performance better UX)
+
+__HTML Placeholder__
+
+```html
+<div id="root"></div>
+```
+
+__Required `<script>` and `<link>` tags__
+
+```html
+<link rel="dns-prefetch" href="{{Visualization URL}}">
+<script defer="defer" type="module" src="{{Visualization URL}}/index.js"></script>
+<link rel="stylesheet" href="{{Visualization URL}}/style.css"></link>
+```
+
+## ✅ Launch Checklist
+
+Before deploying to production, complete the launch checklist. It covers metadata and SEO, analytics, QA, accessibility, performance, security headers and caching.
+
+The checklist is set up as a GitHub issue template, so each launch gets its own tickable copy:
+
+1. Go to **Issues → New issue** in this repository.
+2. Select **Launch checklist**.
+3. Assign yourself, and click **Create**.
+4. Tick items off as you complete them. The issue list shows progress (e.g. "7 of 32 tasks").
+
+Or open it directly: [Create launch checklist issue](../../issues/new?template=launch-checklist.md)
+
+Don't close the issue until every item is checked, or marked N/A with a reason.
+
+The template lives in `.github/ISSUE_TEMPLATE/launch-checklist.md`.
+
 ## 📬 Contact us
 
 For questions or feedback, contact us at [data@undp.org](mailto:data@undp.org).