Deploy codeapp

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/