create-powerapp 1.0.0 → 1.1.0

package/.github/workflows/ci.yml

@@ -30,8 +30,7 @@ jobs:
           npm --version
 
       - name: Scaffold Canvas App (Copilot)
-        run: |
-          printf 'test-canvas\n1\n1\n\n' | node index.js
+        run: printf 'test-canvas\n1\n1\n\n' | node index.js
         shell: bash
 
       - name: Check Canvas App files exist
@@ -47,8 +46,7 @@ jobs:
         shell: bash
 
       - name: Scaffold Model-Driven App (Claude Code)
-        run: |
-          printf 'test-mda\n2\n2\n\n' | node index.js
+        run: printf 'test-mda\n2\n2\n\n' | node index.js
         shell: bash
 
       - name: Check MDA files exist
@@ -60,13 +58,11 @@ jobs:
         shell: bash
 
       - name: Scaffold PCF Component
-        run: |
-          printf 'test-pcf\n3\n1\n\n' | node index.js
+        run: printf 'test-pcf\n3\n1\n\n' | node index.js
         shell: bash
 
       - name: Scaffold Power Pages
-        run: |
-          printf 'test-pages\n4\n2\n\n' | node index.js
+        run: printf 'test-pages\n4\n2\n\n' | node index.js
         shell: bash
 
       - name: Check Power Pages folder structure
@@ -76,19 +72,28 @@ jobs:
           test -d test-pages/site/web-templates
         shell: bash
 
-      - name: Scaffold Code App
-        run: |
-          printf 'test-codeapp\n5\n1\n\n' | node index.js
+      - name: Scaffold Code App (auto npm install runs inside scaffold)
+        run: printf 'test-codeapp\n5\n1\n\n' | node index.js
         shell: bash
 
       - name: Check Code App files exist
         run: |
           test -f test-codeapp/package.json
           test -f test-codeapp/tsconfig.json
+          test -f test-codeapp/vite.config.ts
+          test -f test-codeapp/index.html
+          test -f test-codeapp/src/main.tsx
           test -f test-codeapp/src/App.tsx
+          test -f test-codeapp/src/App.module.css
+          test -f test-codeapp/src/index.css
+          test -f test-codeapp/src/vite-env.d.ts
           node -e "JSON.parse(require('fs').readFileSync('test-codeapp/package.json','utf8'))"
         shell: bash
 
+      - name: Code App — npm run build succeeds with zero errors
+        run: cd test-codeapp && npm run build
+        shell: bash
+
   lint:
     name: Check syntax
     runs-on: ubuntu-latest

package/index.js

@@ -377,94 +377,290 @@ Explain the folder structure and what each folder contains."
 function scaffoldCodeApp(dir, projectName, aiTool) {
   log.info("Setting up Code App structure...");
 
-  write(path.join(dir, "instructions", "codeapp-instructions.md"), `# Code App Instructions
+  const safeName = projectName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
 
-## Type: Power Apps Code App (Code-first web app)
-## Project: ${projectName}
+  // ── package.json ──────────────────────────────────────────────────────────
+  // Uses Vite (not react-scripts/CRA which is deprecated and broken).
+  // @microsoft/power-apps is intentionally NOT listed here — it bundles
+  // a native addon (keytar) that fails to build on most machines.
+  // It is installed globally via: npm install -g @microsoft/power-apps
+  // and imported in app code once the user is ready to connect to Power Platform.
+  write(path.join(dir, "package.json"), JSON.stringify({
+    name: safeName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: {
+      start: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview",
+    },
+    dependencies: {
+      react: "^18.3.1",
+      "react-dom": "^18.3.1",
+    },
+    devDependencies: {
+      "@types/react": "^18.3.3",
+      "@types/react-dom": "^18.3.0",
+      "@vitejs/plugin-react": "^6.0.0",
+      typescript: "^5.5.3",
+      vite: "^8.0.0",
+    },
+  }, null, 2));
 
-- Standard web app (React/TypeScript) hosted on Power Platform
-- Use @microsoft/power-apps npm package to access connectors and platform APIs
-- Authentication is handled by Microsoft Entra — do not build custom auth
-- Call Power Platform connectors directly from JavaScript via the client library
-- Publish with pac code push — no manual deployment pipeline needed
-- Follows canvas app sharing limits and DLP policies set by admins
-- Not supported in Power Apps mobile app or Power Apps for Windows
-- Use npm start for local dev; the platform manages hosting in production
-- Admin must enable Code Apps in Power Platform Admin Center before publishing
+  // ── vite.config.ts ────────────────────────────────────────────────────────
+  write(path.join(dir, "vite.config.ts"), `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,   // automatically opens the browser on npm start
+  },
+})
 `);
 
-  write(path.join(dir, "src", "components", ".gitkeep"), "");
-  write(path.join(dir, "public", ".gitkeep"), "");
+  // ── tsconfig.json ─────────────────────────────────────────────────────────
+  write(path.join(dir, "tsconfig.json"), JSON.stringify({
+    compilerOptions: {
+      target: "ES2020",
+      useDefineForClassFields: true,
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      skipLibCheck: true,
+      moduleResolution: "bundler",
+      allowImportingTsExtensions: true,
+      isolatedModules: true,
+      moduleDetection: "force",
+      noEmit: true,
+      jsx: "react-jsx",
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      noFallthroughCasesInSwitch: true,
+    },
+    include: ["src"],
+  }, null, 2));
+
+  // ── index.html ────────────────────────────────────────────────────────────
+  // Vite requires index.html at the project root (not inside /public)
+  write(path.join(dir, "index.html"), `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`);
+
+  // ── public/favicon.svg ────────────────────────────────────────────────────
+  write(path.join(dir, "public", "favicon.svg"), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#742774"/>
+  <text x="16" y="22" text-anchor="middle" font-size="18" fill="white" font-family="sans-serif">⚡</text>
+</svg>
+`);
+
+  // ── src/vite-env.d.ts ─────────────────────────────────────────────────────
+  // Required: tells TypeScript what *.module.css imports look like
+  write(path.join(dir, "src", "vite-env.d.ts"), `/// <reference types="vite/client" />
+
+// CSS Modules
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+`);
+
+  // ── src/main.tsx ──────────────────────────────────────────────────────────
+  write(path.join(dir, "src", "main.tsx"), `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
+`);
 
-  write(path.join(dir, "src", "App.tsx"), `// ${projectName} — Code App entry point
-// Ask your AI assistant: "Set up the main App component for a Power Apps Code App called ${projectName}"
+  // ── src/App.tsx ───────────────────────────────────────────────────────────
+  write(path.join(dir, "src", "App.tsx"), `import styles from './App.module.css'
 
+/**
+ * ${projectName}
+ *
+ * This is your app's root component. Start here.
+ *
+ * To connect to Power Platform data and connectors:
+ *   1. Install the CLI globally: npm install -g @microsoft/power-apps
+ *   2. Run: npx power-apps init  (creates power.config.json)
+ *   3. Then import in your components:
+ *        import { useData } from '@microsoft/power-apps'
+ *
+ * Ask your AI assistant: "Build the main layout for ${projectName}"
+ */
 export default function App() {
   return (
-    <div>
-      <h1>${projectName}</h1>
-      <p>Ask your AI to build this app. Open the chat and describe what you want.</p>
+    <div className={styles.app}>
+      <header className={styles.header}>
+        <h1>${projectName}</h1>
+        <p>Your Power Apps Code App is running. Open your AI assistant and describe what to build.</p>
+      </header>
+      <main className={styles.main}>
+        <div className={styles.card}>
+          <h2>🚀 Ready to build</h2>
+          <p>Open Copilot Chat or Claude Code and paste a prompt from <code>prompts/starter.md</code></p>
+        </div>
+      </main>
     </div>
-  );
+  )
 }
 `);
 
-  write(path.join(dir, "src", "index.ts"), `// Entry point — ask your AI to fill this in
+  // ── src/App.module.css ────────────────────────────────────────────────────
+  write(path.join(dir, "src", "App.module.css"), `.app {
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #f4f4f8;
+  color: #1a1a2e;
+}
+
+.header {
+  background: #742774;
+  color: white;
+  padding: 2rem;
+  text-align: center;
+}
+
+.header h1 {
+  margin: 0 0 0.5rem;
+  font-size: 2rem;
+}
+
+.header p {
+  margin: 0;
+  opacity: 0.85;
+}
+
+.main {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem 2rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.card h2 { margin-top: 0; }
+`);
+
+  // ── src/index.css ─────────────────────────────────────────────────────────
+  write(path.join(dir, "src", "index.css"), `*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; }
+`);
+
+  // ── src/components/ placeholder ───────────────────────────────────────────
+  write(path.join(dir, "src", "components", ".gitkeep"), "");
+
+  // ── instructions ─────────────────────────────────────────────────────────
+  write(path.join(dir, "instructions", "codeapp-instructions.md"), `# Code App Instructions
+
+## Type: Power Apps Code App (Code-first web app)
+## Project: ${projectName}
+
+### Tech stack (already installed — DO NOT change)
+- Vite ^8 as the dev server and bundler (npm start = vite)
+- React 18 + TypeScript 5
+- CSS Modules for styling (*.module.css files)
+- NO react-scripts, NO Create React App, NO webpack
+
+### Connecting to Power Platform data
+The @microsoft/power-apps client library is installed globally (not in package.json)
+because it includes a native addon that must be compiled separately.
+To add Power Platform data to a component:
+  1. Run once: npm install -g @microsoft/power-apps
+  2. Run once: npx power-apps init  (creates power.config.json)
+  3. Import in components: import { useData } from '@microsoft/power-apps'
+
+### Coding rules
+- All components are React functional components with TypeScript types
+- CSS goes in *.module.css files — import as: import styles from './Component.module.css'
+- New pages/screens = new .tsx files in src/components/
+- No class components, no .then() chains (use async/await)
+- Never touch vite.config.ts or tsconfig.json unless asked
+
+### To publish to Power Platform
+  1. npm run build  (creates dist/ folder)
+  2. npx power-apps push  (uploads to your environment)
 `);
 
+  // ── prompts/starter.md ────────────────────────────────────────────────────
   write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
 
-## First, initialise the Code App (run this command):
-pac code init --outputDirectory .
+Your app is already running. Open your AI assistant and copy one of these prompts.
 
-## Install dependencies:
-npm install
+---
 
-## Then ask the AI:
-"I'm building a Power Apps Code App called ${projectName} using React and TypeScript.
-Set up the project with a clean layout, routing between pages, and connect it to Microsoft Entra authentication using the @microsoft/power-apps package."
+## Build the home screen
+"I'm building a Power Apps Code App called ${projectName} using React and TypeScript with Vite.
+Replace the placeholder home screen in src/App.tsx with a proper layout that has:
+- A navigation bar at the top with the app name and a user avatar placeholder
+- A main content area with cards showing [describe your main content]
+- A clean, professional design using the existing CSS module pattern"
 
-"Add a page called [PageName] that [describe what the page does]."
+---
 
-"Connect this app to a Power Platform connector called [ConnectorName] and show the data in a table."
-`);
+## Add a new page
+"Add a new page called [PageName] to this React app.
+Create src/components/[PageName].tsx with [describe what the page does].
+Add a navigation link to it in App.tsx."
 
-  write(path.join(dir, "package.json"), JSON.stringify({
-    name: projectName.toLowerCase().replace(/\s+/g, "-"),
-    version: "0.1.0",
-    private: true,
-    scripts: {
-      start: "react-scripts start",
-      build: "react-scripts build",
-    },
-    dependencies: {
-      "@microsoft/power-apps": "latest",
-      react: "^18.0.0",
-      "react-dom": "^18.0.0",
-    },
-    devDependencies: {
-      typescript: "^5.0.0",
-      "@types/react": "^18.0.0",
-      "@types/react-dom": "^18.0.0",
-    },
-  }, null, 2));
+---
 
-  write(path.join(dir, "tsconfig.json"), JSON.stringify({
-    compilerOptions: {
-      target: "ES2020",
-      lib: ["ES2020", "DOM"],
-      jsx: "react-jsx",
-      module: "ESNext",
-      moduleResolution: "bundler",
-      strict: true,
-      esModuleInterop: true,
-      skipLibCheck: true,
-    },
-    include: ["src"],
-  }, null, 2));
+## Add a data table
+"Add a component called DataTable.tsx in src/components/ that displays a table of [describe your data].
+Use mock data for now — I'll connect it to real data later.
+Style it using a CSS module."
+
+---
+
+## Connect to Power Platform data
+"I want to connect this app to Power Platform.
+Walk me through:
+1. Installing @microsoft/power-apps globally
+2. Running npx power-apps init
+3. Adding a useData hook to fetch records from a Dataverse table called [TableName]"
+
+---
+
+## Fix a TypeScript error
+"I got this TypeScript error in [filename]: [paste error]
+Explain what it means and fix it."
+`);
 
-  log.ok("Code App structure created");
-  log.dim("Next: pac code init --outputDirectory .  then  npm install");
+  // ── run npm install automatically ─────────────────────────────────────────
+  log.info("Running npm install (this takes about 30 seconds)...");
+  const installed = run("npm install", dir);
+  if (installed) {
+    log.ok("npm install completed — all dependencies ready");
+  } else {
+    log.warn("npm install had issues — try running  npm install  manually inside the project folder");
+  }
+
+  log.ok("Code App structure created — run  npm start  to launch the app");
 }
 
 // ─── AI context file writer ───────────────────────────────────────────────────
@@ -628,6 +824,7 @@ to open in VS Code and start prompting your AI assistant.
   }
 
   // ── Done ─────────────────────────────────────────────────────────────────
+  const isCodeApp = appTypeChoice.label === "Code App";
   console.log(`
 ${c.bold}${c.green}╔═══════════════════════════════════════════════════╗
 ║  ✅  Your project is ready!                       ║
@@ -638,9 +835,13 @@ ${c.bold}Project folder:${c.reset}  ${dir}
 ${c.bold}What to do next:${c.reset}
 
   1. VS Code is now open (or open it manually and open the folder above)
-
+${isCodeApp ? `
+  2. ${c.bold}${c.green}Start the app:${c.reset}  In the VS Code terminal, run:
+       ${c.cyan}npm start${c.reset}
+     Your browser will open automatically at http://localhost:3000
+` : `
   2. Read the ${c.cyan}prompts/starter.md${c.reset} file for ready-made prompts to get started
-
+`}
   3. Open your AI assistant:
 ${aiChoice.label === "Claude Code"
   ? `     • In the VS Code terminal, run:  ${c.cyan}claude${c.reset}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-powerapp",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "One command to scaffold any Power Apps project — Canvas App, Model-Driven App, PCF Component, Power Pages, or Code App — with Git, AI context files, and everything ready so you can immediately start prompting your AI assistant.",
   "type": "module",
   "bin": {