Skip to main content
Mapagam

Building and Deploying Applications

1. Building for Production

Command Description Notes
ionic build Builds the application for production Generates optimized bundles for web and mobile platforms
ionic build --prod Builds the application with production optimizations Enables tree-shaking, minification, and other optimizations
ionic build --release Builds the application with release settings Applies additional optimizations for release builds

Example: Building for Production

ionic build --prod
Note: The --prod flag enables Angular's production mode, which includes optimizations like AOT compilation and tree-shaking.

Production Build Process

  • Compiles the application using Angular's production build process
  • Minifies CSS and JavaScript files
  • Removes development-only code and comments
  • Optimizes assets for faster loading

2. Configuring Build Options

Option Description Default Value Notes
--prod Enables production mode build false Optimizes for performance and size
--release Enables release mode build false Builds for deployment with optimizations
--platform Target platform for build all Valid values: ios, android, web
--cordova Include Cordova plugins in build false Required for hybrid apps using Cordova plugins
--no-build Skips the build process false Useful for testing configuration only

Example: Production Build Configuration


<code>ionic build --prod --platform=android</code>
</pre>
</div>
</div>
<div class="example">
<h2 id="example-release-build-with-cordova-plugins">Example: Release Build with Cordova Plugins<a href="#example-release-build-with-cordova-plugins" class="toc__headingLink" aria-label="Link to this section"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<div class="codeBlock" data-language="bash">
<pre><code>
<code>ionic build --release --cordova --platform=ios</code>
</pre>
</div>
</div>
<h2 id="3-generating-android-build">3. Generating Android Build<a href="#3-generating-android-build" class="toc__headingLink" aria-label="Link to this section"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<table>
<tbody>
<tr>
<th>Command</th>
<th>Description</th>
<th>Notes</th>
</tr>
<tr>
<td class="property">ionic build</td>
<td>Builds the web assets for the app</td>
<td>Run before generating native builds</td>
</tr>
<tr>
<td class="property">ionic capacitor build</td>
<td>Builds the app using Capacitor</td>
<td>Generates native project files in <code>src-capacitor</code></td>
</tr>
<tr>
<td class="property">ionic capacitor run android</td>
<td>Builds and runs the app on an Android device/emulator</td>
<td>Requires Android Studio and SDK installed</td>
</tr>
<tr>
<td class="property">ionic capacitor build android</td>
<td>Builds the Android app in release mode</td>
<td>Generates <code>app-release.apk</code> in <code>android/app/build/outputs/apk</code></td>
</tr>
</tbody>
</table>
<div class="example">
<h2 id="example-building-for-android">Example: Building for Android<a href="#example-building-for-android" class="toc__headingLink" aria-label="Link to this section"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a></h2>
<div class="codeBlock" data-language="bash">
<pre><code>ionic build
ionic capacitor build android
Note: Ensure Android Studio and the Android SDK are properly configured before building.
Warning: Release builds require signing with a keystore file.
Build Type Output File Command Notes
Debug APK app-debug.apk ionic capacitor build android --mode=debug For testing and development
Release APK app-release.apk ionic capacitor build android --mode=release For publishing to Google Play Store

4. Generating iOS Build

Command Description Notes
ionic capacitor build Builds the Capacitor project for iOS Must be run after ionic build
npx cap open ios Opens the iOS project in Xcode Requires Xcode to be installed

Example: Building for iOS

ionic build
npx cap sync
npx cap open ios
Note: Ensure you have configured the iOS platform in your Capacitor project before building.

5. Signing Android APK

Property Description Value
keyStore Path to the keystore file ./android/app/release-key.keystore
keyStorePassword Password for the keystore your-keystore-password
keyAlias Alias of the key in the keystore release-key
keyPassword Password for the key your-key-password

Example: Signing with Gradle

android {
  signingConfigs {
    release {
      storeFile file('release-key.keystore')
      storePassword 'your-keystore-password'
      keyAlias 'release-key'
      keyPassword 'your-key-password'
    }
  }
  buildTypes {
    release {
      signingConfig signingConfigs.release
    }
  }
}
Note: Ensure the keystore file is securely stored and not committed to version control.

6. Signing iOS App

Property Description Value
ios.signing Enable iOS code signing true
ios.signing.cert Path to iOS certificate ./certs/ios_dev.p12
ios.signing.certPassword Password for the iOS certificate secret123
ios.signing.provisioningProfile Path to provisioning profile ./profiles/ios_dev.mobileprovision

Example: Configuring iOS Signing in ionic.config.json

{
  "name": "myApp",
  "integrations": {
    "cordova": {}
  },
  "build": {
    "ionic1": {
      "build": "ionic build"
    },
    "ionic2": {
      "build": "ionic build"
    }
  },
  "ios": {
    "signing": {
      "cert": "./certs/ios_dev.p12",
      "certPassword": "secret123",
      "provisioningProfile": "./profiles/ios_dev.mobileprovision"
    }
  }
}
Note: Ensure that the certificate and provisioning profile are valid and not expired.
Warning: The certificate password should be stored securely and not committed to version control.

7. Publishing to Google Play

Step Description Details
1. Prepare App Ensure app is ready for release Build with ionic build --prod, verify app works correctly, and test on device/emulator.
2. Create Google Play Console Account Set up developer account Go to Google Play Console, create an account, and pay the $25 registration fee.
3. Generate Signed APK or AAB Build release version of app Use ionic capacitor build android --release to generate an Android App Bundle (.aab) or APK.
4. Upload to Google Play Console Submit app for review Navigate to the "App releases" section, upload the .aab file, and fill in release details like changelogs and screenshots.
5. Configure App Store Details Set up app metadata Add app title, description, category, screenshots, and set up in-app purchases if needed.
6. Submit for Review Finalize submission Review all details and submit the app for Google Play review. Wait for approval before it becomes live.

Example: Building Release APK

ionic capacitor build android --release
Note: Ensure your keystore is securely stored and backed up. Losing the keystore means you can't update the app on Google Play.

8. Publishing to App Store

Platform Requirements Notes
iOS Apple Developer Account Must have a paid Apple Developer account ($99/year)
Android Google Play Developer Account Must have a paid Google Play Developer account ($25 one-time fee)

Example: Building for iOS

ionic build --prod
cd ios
pod install
ionic capacitor build ios

Example: Building for Android

ionic build --prod
cd android
./gradlew assembleRelease
Note: Before publishing, ensure all app metadata (name, description, screenshots) is correctly set in the respective developer portals.
Warning: App Store and Google Play review processes can take several days to weeks. Ensure your app meets all platform guidelines before submission.

9. Creating Progressive Web App Build

Option Values Description
--prod true Enables production optimizations including minification and tree-shaking
--mode production Sets the build mode to production for optimized builds
--base-href /my-app/ Base URL for the application when deployed to a subdirectory
--www-dir dist/my-app Output directory for the built files

Example: Building PWA with Production Flags

ionic build --prod --mode=production

Example: Building PWA with Custom Base Href

ionic build --prod --base-href=/my-pwa/
Note: The built PWA will be located in the dist/ directory by default.
Warning: Ensure that all asset paths are correctly configured to avoid broken links in the built PWA.

10. Deploying Web App

Platform Deployment Method Notes
Vercel Deploy from GitHub/GitLab with one click or CLI Supports automatic builds and custom domains
Netlify Drag & drop or connect repo Provides preview deployments and form handling
Firebase Hosting CLI command: firebase deploy Global CDN with automatic SSL
GitHub Pages Use ionic build --prod and push to gh-pages branch Free, simple, but limited customization

Example: Deploy to Vercel

npm install -g vercel
cd my-ionic-app
vercel

Example: Deploy to Firebase

npm install -g firebase-tools
cd my-ionic-app
firebase init
firebase deploy
Note: Ensure ionic build --prod is run before deploying to optimize performance.

Was this article helpful?

Related Cheat Sheets