Migrating from App Center to Capawesome Cloud¶

Microsoft App Center is being retired, leaving many developers looking for alternatives to continue delivering over-the-air updates and building their mobile applications. Capawesome Cloud provides a powerful, modern solution for Capacitor apps that offers seamless Live Updates and enterprise-grade features.

This guide will walk you through migrating your Capacitor app from App Center to Capawesome Cloud, focusing on replacing App Center's CodePush functionality with Capawesome Live Updates while maintaining your existing workflow and improving your app's update delivery system.

Why Migrate from App Center?¶

With App Center's retirement, you need a reliable alternative that provides:

Continued Service: Capawesome Cloud is actively maintained and continuously improved
Modern Architecture: Built specifically for Capacitor apps with modern tooling
Enhanced Features: Advanced update channels, rollback capabilities, and delta updates
Better Performance: Optimized delivery network and faster update mechanisms
Enterprise Support: Professional support and SLA options for critical applications
Open Source: The Live Update SDK is open-source and MIT licensed

Capawesome Cloud offers equivalent functionality to App Center's CodePush with additional benefits like channel management, automatic rollbacks, and better integration with the Capacitor ecosystem.

Prerequisites¶

Before starting the migration, ensure you have:

Node.js and npm: Version 16 or higher
Capacitor CLI: Install with npm install -g @capacitor/cli
Existing Capacitor App: Your app should already be using Capacitor
Git Repository: Your code should be in a Git repository
App Center Account: Access to your current App Center configuration for reference

If you're still using Cordova, consider migrating to Capacitor first using the Capacitor migration guide.

Migration Steps Overview¶

The migration process involves these key steps:

Set up Capawesome Cloud account and create your app
Install and configure the Capawesome Live Update SDK
Configure your app with the necessary settings
Replace App Center CodePush implementation
Build and deploy your first update
Test the migration thoroughly

Step 1: Setting Up Capawesome Cloud¶

Create Your Account¶

Visit the Capawesome Cloud Console
Sign up for a new account or log in if you already have one
Complete the onboarding process

Create Your App¶

In the Capawesome Cloud Console, click "Create App"
Choose a name for your app
Copy the App ID of the newly created app via the dropdown; you will need it later

Step 2: Installing the Capawesome Live Update SDK¶

Remove any existing App Center dependencies first. After that, install the Capacitor Live Update plugin from Capawesome:

npm install @capawesome/capacitor-live-update
npx cap sync

Step 3: Configuring Your App¶

Add Configuration¶

Add the Capawesome Live Update configuration to your capacitor.config.ts file:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your App Name',
  webDir: 'dist',
  plugins: {
    LiveUpdate: {
      appId: 'YOUR_CAPAWESOME_APP_ID', // Replace with your App ID from Step 1
    },
  },
};

export default config;

Sync Configuration¶

Apply the configuration changes:

npx cap sync

Step 4: Replacing App Center CodePush¶

Remove App Center Code¶

If you have existing App Center CodePush code, remove it.

Implement Capawesome Live Updates¶

Replace your App Center CodePush implementation with Capawesome Live Updates:

import { LiveUpdate } from '@capawesome/capacitor-live-update';

// Basic sync (equivalent to CodePush.sync())
const syncUpdates = async () => {
  try {
    const result = await LiveUpdate.sync();
    if (result.nextBundleId) {
      // Update is available and downloaded
      await LiveUpdate.reload();
    }
  } catch (error) {
    console.error('Update sync failed:', error);
  }
};

// Check for updates (equivalent to CodePush.checkForUpdate())
const checkForUpdates = async () => {
  try {
    const result = await LiveUpdate.fetchLatestBundle();
    if (result.bundleId) {
      console.log('Update available:', result.bundleId);
      return true;
    }
    return false;
  } catch (error) {
    console.error('Update check failed:', error);
    return false;
  }
};

// Manual update download and installation
const downloadAndInstallUpdate = async () => {
  try {
    const latestBundle = await LiveUpdate.fetchLatestBundle();
    if (latestBundle.bundleId) {
      await LiveUpdate.downloadBundle({ bundleId: latestBundle.bundleId });
      await LiveUpdate.setNextBundle({ bundleId: latestBundle.bundleId });
      await LiveUpdate.reload();
    }
  } catch (error) {
    console.error('Update installation failed:', error);
  }
};

Update Your App Initialization¶

Add the sync call to your app initialization:

// In your main app initialization
document.addEventListener('DOMContentLoaded', () => {
  // Sync updates when app starts
  syncUpdates();

  // Clean up interval when needed
  window.addEventListener('beforeunload', () => {
    clearInterval(interval);
  });
});

Step 5: Building and Distributing Updates¶

Build Your App¶

Create a production build of your web assets:

npm run build

Install Capawesome CLI¶

Install the Capawesome CLI for managing updates:

npm install -g @capawesome/cli@latest

Create and Upload a Bundle¶

Create and upload your first update bundle:

# Create a new bundle from your build
npx @capawesome/cli apps:bundles:create

# The CLI will prompt you for:
# - App ID (from your Capawesome Cloud Console)
# - Channel (e.g., 'production', 'staging')
# - Bundle directory (usually 'dist' or 'build')

Verify Upload¶

Check the Capawesome Cloud Console to verify your bundle was uploaded successfully. You should see your new bundle listed under your app's bundles section.

Step 6: Testing Your Migration¶

Test Update Delivery¶

Install the app with the Capawesome Live Update SDK on a test device
Upload a new bundle with a visible change (e.g., updated text or styling)
Trigger an update by calling LiveUpdate.sync() or restarting the app
Verify the update is applied correctly

Test Different Scenarios¶

Test these scenarios to ensure robust functionality:

Network connectivity issues: Ensure graceful handling of offline scenarios
Update failures: Test rollback functionality
Channel switching: Test different update channels if you use them
App backgrounding: Ensure updates work when the app is backgrounded

Best Practices¶

Update Strategy¶

Test thoroughly: Always test updates in staging before production
Gradual rollouts: Use channels to control update distribution
Monitor performance: Track update success rates and performance impact
Rollback plan: Have a rollback strategy for problematic updates

Security¶

Validate bundles: Only deploy tested and validated bundles
Use HTTPS: Ensure all update communications are encrypted
Monitor updates: Track update installations and failures

Performance¶

Optimize bundle size: Keep updates small and focused
Update timing: Schedule updates during low-usage periods
Network awareness: Consider network conditions when updating

Conclusion¶

Migrating from App Center to Capawesome Cloud provides a modern, reliable solution for delivering over-the-air updates to your Capacitor apps. The Capawesome Live Update plugin offers enhanced features, better performance, and ongoing support that App Center can no longer provide.

With this migration complete, you now have:

A robust update delivery system
Modern tooling and CLI integration
Professional support options
Enhanced features like channels and rollbacks
An open-source foundation you can trust

Your app is now ready to continue delivering seamless updates to your users with improved reliability and performance.