deploy-codeapp

name	deploy-codeapp
description	Deploy Code App to Power Platform with comprehensive pre-deployment validation, build verification, and post-deployment checks. Ensures vite.config.ts has base path configured.
argument-hint	["solution-name (optional)"]
disable-model-invocation	false
allowed-tools	Bash, Read, Write, Edit, Grep, Glob, Skill

Deploy Code App to Power Platform

Deploy your Code App to Power Platform with integrated validation, build checks, and deployment verification.

What This Skill Does

1. Pre-deployment validation (codeapps-validator skill)
2. Build quality check (build-lint-validator skill)
3. Build application with asset path verification
4. Deploy to Power Platform (pac code push)
5. Post-deployment verification to ensure successful deployment
6. Provide deployment summary with app URL and next steps

Usage

Deploy to Preferred Solution

/deploy-codeapp

Deploy to Specific Solution

/deploy-codeapp MySolutionName

Let Claude Invoke Automatically

Deploy my Code App to Power Platform
Push this app to production
Deploy to the "Marketing Apps" solution

Deployment Workflow

Phase 1: Pre-Deployment Validation

CRITICAL: Always validate BEFORE deploying to catch issues early.

Invoke codeapps-validator Skill

Automatically check:

• ✅ Package.json scripts configuration
• ✅ Port configuration (5173 and 8081)
• ✅ Dependencies installed
• ✅ Power Platform config (power.config.json valid)
• ✅ Vite config has base: './' ← CRITICAL for asset loading
• ✅ Project structure complete
• ✅ TypeScript compilation succeeds
• ✅ ESLint compliance

If validation fails:

1. Report specific issues found
2. Attempt automatic fixes (e.g., add base: './' to vite.config.ts)
3. Re-run validation
4. STOP deployment if critical issues remain

Phase 2: Build Quality Check

Invoke build-lint-validator Skill

Verify code quality:

• ✅ TypeScript compiles without errors
• ✅ ESLint passes all rules
• ✅ No type mismatches
• ✅ No unused variables
• ✅ React Hook dependencies correct

If build validation fails:

1. Report specific TypeScript/ESLint errors
2. Guide user to fix errors
3. STOP deployment until issues resolved

Phase 3: Build Application

npm run build

Expected Output:

vite v5.x.x building for production...
✓ XX modules transformed.
dist/index.html                  X.XX kB
dist/assets/index-xxxxx.js      XX.XX kB
✓ built in X.Xs

Verify Build Success:

• Build command exits with code 0
• dist/ folder created
• dist/index.html exists
• dist/assets/ contains JS and CSS files

Critical: Verify Asset Paths

Check that built HTML uses relative paths (not absolute):

# Check asset references in built index.html
cat dist/index.html | grep -E 'src=|href='

Expected: src="./assets/index-xxxxx.js" (relative path with ./) Problematic: src="/assets/index-xxxxx.js" (absolute path)

If absolute paths found:

❌ ERROR: vite.config.ts missing base: './'

This will cause 404 errors when deployed. Assets won't load.

Fixing automatically...

Add base: './' to vite.config.ts and rebuild:

export default defineConfig({
  plugins: [react()],
  base: './',  // ✅ Add this line
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

Then rebuild:

npm run build

Phase 4: Deploy to Power Platform

Check Authentication

# Verify authenticated
pac auth list

If not authenticated:

pac auth create
pac env select --environment <environmentId>

Execute Deployment

Option 1: Deploy to Preferred Solution (default)

pac code push

Option 2: Deploy to Specific Solution

pac code push --solutionName "$ARGUMENTS[0]"

Deployment Progress:

Uploading code app package...
Publishing to Power Platform...
Code app published successfully.

Phase 5: Post-Deployment Verification

List Deployed Apps

pac code list

Verify the app appears in the list with correct name and version.

Deployment Success Checklist

Provide user with verification steps:

✅ Deployment Verification Checklist:

1. Open Power Apps portal:
   https://make.powerapps.com

2. Navigate to Apps section

3. Find your app: $ARGUMENTS[0]

4. Click "Play" to launch the app

5. Verify in browser:
   - [ ] App loads (no blank screen)
   - [ ] No 404 errors in console (F12 → Console)
   - [ ] CSS styles applied correctly
   - [ ] JavaScript executes
   - [ ] Data operations work (if using Dataverse/connectors)

6. Check browser console for errors:
   - Open DevTools (F12)
   - Check Console tab
   - Check Network tab for failed requests

Common Post-Deployment Issues

Issue: Blank screen

• Cause: Missing base: './' in vite.config.ts
• Symptom: 404 errors for assets in console
• Fix: Add base: './', rebuild, redeploy

Issue: Assets fail to load

• Cause: Absolute paths in index.html
• Symptom: GET .../assets/index-xxx.js 404
• Fix: Verify base: './' in vite.config.ts

Issue: MIME type errors

• Symptom: Refused to apply style ... MIME type ('application/json')
• Cause: Asset files returning 404 (interpreted as JSON error page)
• Fix: Ensure base: './' configured and assets built correctly

Phase 6: Deployment Summary

🎉 Deployment Successful!

📦 App Name: $ARGUMENTS[0]
🌐 Solution: <solution-name or "Default">
⏰ Deployed: <timestamp>

🔗 Quick Links:
- Power Apps Portal: https://make.powerapps.com
- App URL: <app-url from pac code list>
- Environment: <environment-name>

✅ Verification Status:
- Build: Success
- Upload: Success
- Publish: Success

📋 Next Steps:
1. Test app functionality in deployed environment
2. Verify data operations work correctly
3. Share app with users (Power Apps portal → Share)
4. Monitor for errors or issues

💡 To update the app:
1. Make changes to code
2. Run: /deploy-codeapp

ALM (Application Lifecycle Management)

Deploy to Multiple Environments

Recommended Pattern: Dev → Test → Prod

# Deploy to Dev
pac env select --environment <dev-environment-id>
pac code push --solutionName "CodeApps-Dev"

# Export solution
pac solution export --path ./solution.zip --name "CodeApps-Dev"

# Import to Test
pac env select --environment <test-environment-id>
pac solution import --path ./solution.zip

# Update connection references in Test environment

# Test thoroughly, then promote to Prod
pac env select --environment <prod-environment-id>
pac solution import --path ./solution.zip

Connection References (Recommended)

For better portability across environments, use connection references:

• Connections can be reconfigured per environment
• No code changes needed when promoting
• Better governance and security

# Add data source with connection reference
pac code add-data-source -a <apiId> -cr <connectionReferenceLogicalName> -s <solutionID>

Error Handling

Error: Authentication Required

Symptom: pac code push fails with authentication error

Fix:

pac auth clear
pac auth create
pac env select --environment <environmentId>
pac code push

Error: Solution Not Found

Symptom: Can't find specified solution

Fix:

1. List solutions: pac solution list
2. Verify solution name (case-sensitive)
3. Create solution if doesn't exist in Power Apps portal

Error: Build Fails

Symptom: npm run build exits with errors

Fix:

1. Read error messages from build output
2. Fix TypeScript compilation errors
3. Run npm install if dependencies missing
4. Retry build

Error: Upload Size Limit

Symptom: Deployment fails with "size limit exceeded"

Fix:

1. Check bundle size: ls -lh dist/assets/
2. Optimize imports (remove unused dependencies)
3. Consider code splitting
4. Compress assets

Error: Missing Power Config

Symptom: pac code push fails with "power.config.json not found"

Fix:

pac code init --displayName "AppName"

Rollback Strategy

If deployment causes issues:

Option 1: Quick Rollback

1. Open Power Apps portal
2. Find the app
3. Navigate to versions
4. Restore previous version

Option 2: Redeploy Previous Version

# Checkout previous git commit
git checkout <previous-commit-hash>

# Rebuild and redeploy
npm run build
pac code push

Option 3: Solution Rollback

1. Export previous solution version
2. Import to restore environment

CI/CD Integration

This skill can be integrated into CI/CD pipelines:

GitHub Actions

- name: Deploy Code App
  run: |
    pac auth create --environment ${{ secrets.ENVIRONMENT_ID }}
    npm run build
    pac code push

Azure DevOps

- script: |
    pac auth create
    npm run build
    pac code push
  displayName: 'Deploy Code App'

Validation Summary

Before allowing deployment, ensure:

• ✅ codeapps-validator passes all checks
• ✅ build-lint-validator passes all checks
• ✅ npm run build succeeds
• ✅ dist/ folder contains built assets
• ✅ Asset paths are relative (./assets/)
• ✅ User is authenticated with Power Platform
• ✅ Target environment is selected

If ANY check fails: Stop deployment and fix issues first.

Success Criteria

Deployment succeeds when:

• ✅ All validation passes
• ✅ Build completes without errors
• ✅ pac code push exits successfully
• ✅ App appears in pac code list
• ✅ App opens in Power Apps portal
• ✅ No 404 errors in browser console
• ✅ Assets load correctly
• ✅ Data operations work (if applicable)

Related Skills

• Validate project: codeapps-validator (invoked automatically)
• Build validation: build-lint-validator (invoked automatically)
• Initialize project: /init-codeapp
• Add data source: /add-datasource
• Fix issues: /fix-codeapp-issue

---

Pro Tip: Always test in a Dev environment before deploying to Production. Use solutions and connection references for better ALM across environments.

Documentation: https://learn.microsoft.com/power-apps/developer/code-apps/