Create Code App

📋 Shared Instructions: [shared-instructions.md](${PLUGIN_ROOT}/shared/shared-instructions.md) - Cross-cutting concerns.

References:

• prerequisites-reference.md - Prerequisites and required permissions
• troubleshooting.md - Common issues, npm scripts, resources

Create Power Apps Code App

Workflow

1. Prerequisites → 2. Gather Requirements → 3. Plan → 4. Scaffold → 5. Initialize → 6. Build & Deploy (baseline) → 7. Add Data Sources → 8. Implement App → 9. Final Build & Deploy → 10. Summary

---

Step 0: Check Memory Bank

Check for memory-bank.md per shared-instructions.md. Skip completed steps.

Step 1: Validate Prerequisites

Run prerequisite checks first -- no point gathering requirements if the environment isn't ready. See prerequisites-reference.md for details.

Check Node.js and Git (runs natively in bash):

node --version   # Must be v22+
git --version    # Optional but recommended

• Missing Node.js: Report "Install Node.js v22+ from https://nodejs.org/" and STOP.
• Node.js below v22: Report "Node.js 22+ is required. Please upgrade or switch with nvm use 22." and STOP.
• Missing Git: Report "Recommended but optional." Continue if approved.
• All present: Report versions and proceed.

Step 2: Gather Requirements

Skip questions the user already answered in their initial instruction.

If the user has not described what they want to build (i.e., /create-code-app was invoked with no arguments or a vague prompt), start with a single open-ended question before asking anything else:

"What would you like to build? Describe it in your own words — what it does, who uses it, and what problem it solves."

Wait for their answer. Use it to frame all follow-up questions. Do NOT present a multiple-choice list of app types before the user has described their idea.

Once you have their description:

1. Confirm the app name and clarify the purpose if needed 2. Ask about data -- focus on what the app needs to do, not specific technologies:

• "What data does your app need to work with?" (e.g., company emails, project tasks, custom business records)
• "Does your app need to search existing information, manage its own data, or both?"
• Based on their answers, recommend the best approach:
• Store and manage custom business data (tables, forms, CRUD) → Dataverse (/add-dataverse)
• Interact with specific services (send emails, post messages, manage files) → the appropriate connector
• If they mention existing Dataverse tables, SharePoint lists, or connectors by name, use those directly

3. Ask about UI requirements: key screens, layout, interactions, theme preference 4. Ask any clarifying questions now -- resolve all ambiguity before entering plan mode

Step 3: Plan

1. Enter plan mode with EnterPlanMode 2. Design the full implementation approach:

• Which /add-* skills to run for data sources
• App architecture: components, pages, state management
• Feature list with priority order

3. Present plan for approval, include allowedPrompts from prerequisites-reference.md 4. Exit plan mode with ExitPlanMode when approved

Step 4: Scaffold

Ask the user for a folder name. Default to powerapps-{app-name-slugified}-{timestamp} if they don't have a preference.

IMPORTANT: Use `npx degit` to download the template. Do NOT use `git clone`, do NOT manually create files, do NOT download from GitHub UI. `degit` downloads the template without git history.

npx degit microsoft/PowerAppsCodeApps/templates/vite {folder} --force
cd {folder}
npm install

Notes:

• Use --force to overwrite if the directory already has files (e.g., .claude from a planning session)
• If targeting an existing directory, use . as the folder name: npx degit microsoft/PowerAppsCodeApps/templates/vite . --force
• If npx degit fails (network issues, npm not found), retry once, then ask the user to run manually

Verify: package.json exists, node_modules/ created.

Step 5: Initialize

npx power-apps init -n '{user-provided-app-name}' -e <environment-id>

Finding the environment ID: It's the GUID in the make.powerapps.com URL: https://make.powerapps.com/environments/<env-id>/home. If you don't pass -e, the CLI will prompt for it interactively.

Authentication: On first run, a browser window opens for Microsoft sign-in. Complete the login and the command continues. No separate auth setup is needed.

See preferred-environment.md for environment selection details.

`npx power-apps init` failure:

• Non-zero exit: Report the exact output and STOP. Do not continue to Step 6.
• "environmentId not found" or environment validation error: Verify the environment ID is correct and the user has maker permissions in that environment, then retry.
• Example: _"The npx power-apps init command failed: [error text]. Please check that environment ID 32a51012-... is correct and that you have maker permissions in that environment."_

Critical: Read power.config.json after init and verify environmentId is set correctly.

Step 6: Build & Deploy (baseline)

Pre-approved: This baseline deploy is part of the scaffold flow and does not require a separate confirmation prompt.

Build and deploy the bare template to verify the pipeline works before adding data sources.

npm run build

Verify dist/ folder created with index.html and assets/.

npx power-apps push

Capture app URL from output: https://apps.powerapps.com/play/e/{env-id}/app/{app-id}

Common deploy errors: See troubleshooting.md.

Create or update `memory-bank.md` in the project root now -- don't wait until the end. Include:

• Project path, app name, environment ID, app URL
• Completed steps: scaffold, init, baseline deploy
• Data sources planned (from Step 2)

This ensures progress is saved even if the session ends unexpectedly.

Step 7: Add Data Sources

Invoke the /add-* skills identified in the plan (Step 3). Run each in sequence. Pass context as arguments so sub-skills skip redundant questions (project path, connector name, etc.):

Each /add-* skill runs npm run build to catch errors. Do NOT deploy yet.

If no data sources needed: Skip to Step 8.

Step 8: Implement App

This is the core step. Build the actual app features described in the plan from Step 3.

1. Review generated services: Use Grep to find methods in generated service files (they can be very large -- see connector-reference.md). Do NOT read entire generated files. 2. Build components: Create React components for each screen/feature in the plan 3. Connect data: Wire components to generated services (use *Service.getAll(), *Service.create(), etc.) 4. Apply theme: Use the user's theme preference (default: dark theme per development standards) 5. Iterate with user: Show progress, ask for feedback, adjust as needed

Key rules:

• Use generated services for all data access -- never use fetch/axios directly
• Read dataverse-reference.md if working with Dataverse (picklist fields, virtual fields, lookups have critical gotchas)
• Remove unused imports before building (TS6133 strict mode)
• Don't edit files in src/generated/ unless fixing known issues

Step 9: Final Build & Deploy

npm run build

Fix any TypeScript errors. Verify dist/ contains the updated app.

Ask the user: _"Ready to deploy to [environment name]? This will update the live app."_ Wait for explicit confirmation before proceeding.

npx power-apps push

Step 10: Summary

Provide:

• App name, environment, app URL, project location
• What was built: features, data sources, components
• Next steps: how to iterate (npm run build && npx power-apps push), how to add more data sources
• Suggest what else the app could do:
• /add-datasource -- add another data source (describe what you need, and the plugin will recommend the best approach)
• /add-dataverse -- store and manage custom business data
• /add-azuredevops -- track work items, bugs, and pipelines
• /add-teams -- send and read Teams messages
• /add-sharepoint -- work with SharePoint lists or documents
• /add-office365 -- send emails, manage calendar
• /add-connector -- connect to any other service
• Manage at https://make.powerapps.com/environments/<environment-id>/home

Update Memory Bank

Update the memory bank (created in Step 6) with final state:

• All completed steps (scaffold, data sources, implementation, deploy)
• Features implemented and components created
• Data sources connected
• Suggested next steps

---

Example Walkthroughs

These walkthroughs show the full sequence from user request to final output — commands run, files changed, and the verbatim summary format the assistant should use.

---

Example 1: Create a Task Tracker App with Dataverse

User request:

"Build me a simple task tracker that stores tasks in Dataverse. I want to add tasks, mark them complete, and see a list."

Commands run (in order):

# Step 1: Prerequisites
node --version   # → v22.4.0

# Step 4: Scaffold
npx degit microsoft/PowerAppsCodeApps/templates/vite powerapps-task-tracker-20260302 --force
cd powerapps-task-tracker-20260302
npm install

# Step 5: Initialize (browser login prompt on first run; CLI prompts for env ID if -e omitted)
npx power-apps init -n 'Task Tracker' -e <environment-id>

# Step 6: Baseline deploy (pre-approved as part of scaffold flow)
npm run build
npx power-apps push
# → App URL: https://apps.powerapps.com/play/e/32a51012-.../app/<app-id>

# Step 7: Add Dataverse (via /add-dataverse)
npx power-apps add-data-source -a dataverse -t cr123_task
npm run build   # verify connector — no deploy yet

# Step 9: Final deploy (requires user confirmation)
npm run build
npx power-apps push

Files changed:

Final assistant summary (verbatim format):

Task Tracker is live.

App: Task Tracker
Environment: <your-environment-name> (<environment-id>)
URL: https://apps.powerapps.com/play/e/<environment-id>/app/<app-id>
Project: ~/powerapps-task-tracker-20260302/

What was built:
- Task list view with Active / Completed filter
- Add task form (title, description, due date)
- Mark complete / delete actions
- Dataverse table `cr123_task` (Title, Description, DueDate, IsComplete)

To redeploy: npm run build && npx power-apps push (from the project folder)

What you can add next:
- /add-teams — post task updates to a Teams channel
- /add-office365 — send email notifications on completion

What to record in `memory-bank.md`:

# Task Tracker — Memory Bank

## Project

- Path: ~/powerapps-task-tracker-20260302/
- App name: Task Tracker
- Environment: <your-environment-name> (<environment-id>)
- App URL: https://apps.powerapps.com/play/e/<environment-id>/app/<app-id>

## Completed Steps

- [x] Step 1: Prerequisites validated
- [x] Step 4: Scaffold (npx degit)
- [x] Step 5: Initialize (npx power-apps init)
- [x] Step 6: Baseline deploy
- [x] Step 7: Add Dataverse (cr123_task)
- [x] Step 8: Implement app (TaskList, AddTaskForm)
- [x] Step 9: Final deploy

## Data Sources

- Dataverse: cr123_task (Title, Description, DueDate, IsComplete)

## Components

- TaskList.tsx — filtered list, mark complete, delete
- AddTaskForm.tsx — create new tasks

## Next Steps

- Consider /add-teams for task assignment notifications

---

Example 2: Add SharePoint Connector to an Existing App

User request:

"My app already exists. Add SharePoint so I can read items from a list called 'Project Milestones'."

Commands run (in order):

# Step 6: Get connection ID (via /list-connections)
npx power-apps list-connections
# → ConnectionId: conn-sp-xyz789  (SharePoint Online)

# Step 7: Discover sites
npx power-apps list-datasets -a sharepointonline -c conn-sp-xyz789
# → https://contoso.sharepoint.com/sites/Projects

# Step 8: Discover tables
npx power-apps list-tables -a sharepointonline -c conn-sp-xyz789 -d 'https://contoso.sharepoint.com/sites/Projects'
# → Project Milestones, Documents, Team Wiki

# Step 9: Add connector
npx power-apps add-data-source -a sharepointonline -c conn-sp-xyz789 -d 'https://contoso.sharepoint.com/sites/Projects' -t 'Project Milestones'

# Step 11: Build to verify
npm run build   # → success

Files changed:

Final assistant summary (verbatim format):

SharePoint Online connector added.

Connector: SharePoint Online
Site: https://contoso.sharepoint.com/sites/Projects
List: Project Milestones
Build: Passed ✓

Usage:
  const result = await SharePointOnlineService.GetItems({
    dataset: "https://contoso.sharepoint.com/sites/Projects",
    table: "Project Milestones"
  });
  const milestones = result.data?.value || [];

Next: Implement your UI components using the generated service, then run /deploy when ready.

Prerequisites Reference

Required Tools

The Power Apps CLI (@microsoft/power-apps-cli) is installed automatically as part of npm install when the project is scaffolded from the template. No separate CLI install is required.

Required Account

• Power Platform account with code apps enabled
• At least one environment available
• Know your environment ID: find it in the URL at make.powerapps.com, e.g. https://make.powerapps.com/environments/<env-id>/home

Required Permissions (allowedPrompts)

When using plan mode, include these in allowedPrompts:

{
  "allowedPrompts": [
    { "tool": "Bash", "prompt": "check tool versions (node, git)" },
    { "tool": "Bash", "prompt": "scaffold power apps template (npx degit)" },
    { "tool": "Bash", "prompt": "install npm dependencies" },
    { "tool": "Bash", "prompt": "build for production (npm run build)" },
    { "tool": "Bash", "prompt": "initialize power apps project (npx power-apps init)" },
    { "tool": "Bash", "prompt": "list connections (npx power-apps list-connections)" },
    { "tool": "Bash", "prompt": "add data sources (npx power-apps add-data-source)" },
    { "tool": "Bash", "prompt": "deploy to power platform (npx power-apps push)" }
  ]
}

Troubleshooting

Common npm Scripts

Common Issues

Deploy Errors

Resources

Docs:

• Code Apps
• CLI Reference
• Connectors
• Azure DevOps API
• Dataverse API

GitHub:

• Template
• Issues