Monaca Docs
  • Monaca
  • Create Your First App
  • Release Notes and Updates
    • Privacy Manifest Requirement for iOS Apps
    • Plugin uses-permission Tag Deduplication Feature
    • iOS Monaca Debugger Discontinuation & Alternative Features
    • Error submitting to iOS App Store (ITMS-90165)
    • Build error in cordova-custom-config
    • Cordova 11 changes
    • Cordova 10 changes
    • Cordova 9 changes
    • New Monaca CLI and Localkit
    • Migration from Cordova to Capacitor
  • Product Guides
    • Monaca Development Overview
    • Monaca Cloud IDE
      • Overview
      • Features in the Monaca Cloud IDE
      • Integrated Terminal
      • Editor Shortcuts
      • Project Dependencies
        • File and Folder Structure
        • JS/CSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Version Control
        • Introduction
        • GitHub Integration
        • Git SSH Integration
      • Monaca CI
        • Overview
        • Deploy Services
        • Deploy to Appetize.io
        • Deploy to DeployGate
        • Deploy to Firebase
      • Build
        • Building for iOS
          • Building an iOS App
          • Build Settings between Monaca and Xcode
        • Building for Android
        • Building for Electron
          • Building on Windows
        • Building for PWA
        • Building for Windows
        • Build Environment Settings
        • Common Build and Application Upload Errors
        • Build History
      • Distribution
        • App Store Distribution
          • App Store Connect Guide
          • iOS App Upload Feature
        • Google Play Distribution
        • Amazon Appstore Distribution
        • Non-market App Distribution
      • Download App Package
      • Tutorial
    • Monaca Localkit
      • Overview
      • Pairing and Debugging
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca CLI
      • Overview
      • Monaca CLI Commands
      • Pairing and Debugging
      • Project Dependencies
        • File and Folder Structure
        • JS/JSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca Debugger
      • Functionalities
      • Installation
        • Monaca Debugger for Android
        • Monaca Debugger for iOS
        • Monaca Debugger for Android Emulator
      • Usage
      • Custom Build Debugger for iOS
      • iOS App Simulator Build
      • Troubleshooting Guide
      • Tutorials
    • Team Dashboard
    • Quick Viewer
    • Migrating from Other Platforms
      • Key Points
      • Cloud IDE preview function settings
      • Migrating from Angular
      • Migrating from Ionic
      • Migrating from React
      • Migrating from Vue
      • Migrating from PhoneGap
        • Key Differences
        • Guide for PhoneGap Build Users
        • Guide for PhoneGap CLI Users
        • Guide for PhoneGap Desktop App Users
      • Migrating from Telerik
  • Build App
    • Build for iOS
      • Creating a Private Key and CSR
      • Creating a Certificate
      • Updating Provisioning Profiles
  • Tutorials
    • Monaca Cloud IDE Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Cloud IDE
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca Localkit Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Localkit
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca CLI Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca CLI
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Electron Tutorial
      • How to Use a NPM Package
      • How to Use a Web API
    • Barcode Scanner Plugin
    • Cordova SQLite Storage Plugin
    • Cordova Google Analytics Plugin
    • Cordova Firebase Plugin
    • Cordova In-app Purchase Plugin
    • Cordova AppVersion Plugin
    • Cordova Ionic Keyboard Plugin
    • Cordova Social Sharing Plugin
    • NIFCLOUD mobile backend
    • Phonegap Push Plugin
  • API Reference
    • Monaca API
      • Monaca Cloud & Remote Build API Guide
      • Utilities
    • Core Cordova Plugins
      • Cordova 11.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
      • Cordova 10.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
      • Cordova 9.0
        • Battery Status Plugin
        • Camera Plugin
        • Contacts Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • File Transfer Plugin
        • Geolocation Plugin
        • Globalization Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
    • Third-party Cordova Plugins
      • Advanced HTTP Plugin
      • PhoneGap BarcodeScanner Plugin
      • Cordova Custom Config Plugin
      • DatePicker Plugin
      • Share Plugin (Android)
      • WebIntent Plugin (Android)
    • Monaca Power Plugins
      • Monaca HTML5 Resource Encryption
      • Monaca In-App Updater
      • Monaca Secure Storage
      • Barcode Scanner Plugin
      • Android build memory size setting
    • Service Integration
      • Repro
      • AppsFlyer
    • Configuration Files
      • Android
        • Android Configuration
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS Configuration
        • config.xml
        • MonacaApp-Info.plist
  • Samples & Tips
    • Sample Apps
      • AdMob
      • Twitter Single Sign-on App
      • Facebook Single Sign-on App
      • Flickr
      • TODO App
      • BirthYear App
      • Break the Bricks
      • Train Catalog App
      • Omikuji Fortune Telling App
      • Clock App
      • Memo Application
      • RSS Reader App
      • Hello World App
    • Tips & Tricks
      • Playing Sound and Music
      • Control the Splash Screen
      • Using Database
  • Features
    • Push Notification
    • SNS Authentication
    • Database
  • FAQ
    • General
    • IDE
    • Build
    • Release
    • Subscription
      • How to Use Activation Code
    • Application
    • Usage
    • Debugger
  • Supported Environments
  • Trouble Shooting
    • Preview Log repeats to reload (Vue packages version mismatch error)
  • Monaca Product Website
  • 日本語
Powered by GitBook
On this page
  • Building a Monaca app for iOS
  • Prerequisites
  • Step 1: Configuring the iOS app settings
  • Step 2: Configuring the iOS build settings
  • Step 3: Building the app
  • Step 4: Installing the built app
  • Building a Monaca app for Android
  • Step 1: Configuring the Android app settings
  • Step 2: Configuring the Android KeyStore
  • Step 3: Building the app
  • Step 4: Installing the built app

Was this helpful?

  1. Tutorials
  2. Monaca CLI Tutorial

Part 3: Building a Monaca App

PreviousPart 2: Running Monaca Debugger with Monaca CLINextPart 4: Publishing a Monaca App

Last updated 3 years ago

Was this helpful?

This page will cover the two following topics:

For more information on how to build Monaca Apps for other platforms, please refer to .

Building a Monaca app for iOS

This section will demonstrate how to create a debug build of a Monaca app for iOS and install it on a development device. For more information about the types of build, please refer to .

Prerequisites

  1. You must enroll in the .

  2. After enrolling in the program, you will be able to create the following items that are required when creating a debug build in Monaca:

    • App ID (see )

    • Development Certificate (see )

    • Development Provisioning Profile (see )

Step 1: Configuring the iOS app settings

  1. In the terminal window, navigate to your project folder and use the command. The command will automatically upload your local project files to the Monaca Cloud. Please type the following command to open an interactive build interface in your browser.

monaca remote build --browser

2. In the build interface, under the App Settings, in the menu on the left select iOS.

3. Fill in the necessary information of your app:

  • Application Name: a name representing your app in the App Store.

  • App ID: a unique ID representing your app. It is recommended to use the reverse-domain style (for example, mobi.monaca.appname) for app ID. Only alphanumeric characters and periods (at least one period must be used) are allowed.

  • Version Number: the number representing the version of your app. It will be required when uploading (publishing process) your application via App Store Connect later. It needs 3 numbers separated by dots (for example, 1.10.2). Each number should be between [0-99].

  • The remaining information is optional. For example, you can configure the icon and splash screen of the app.

4. After finishing the configurations, click Save.

The app ID in Monaca Build Settings must be the same as the app ID you have registered in the iOS Provisioning Portal. The app ID cannot contain an asterisk (*) or the build will fail.

Step 2: Configuring the iOS build settings

  1. From the build interface under the Build & Build Settings on the left menu, select iOS. Then, click Manage build settings.

If you import an existing private key, you need to use the certificates that are issued based on it. However, if you create a new private key and a CRS file, you will need to use the new CRS file to issue new certificates.

Step 3: Building the app

  1. From the Monaca Cloud IDE menu, go to Build → Build App for iOS .

  2. Select the Debug Build option and the corresponding provisioning profile. Then, click Start Build.

3. It may take several minutes for the build to complete. The following screen will open after the build is complete.

Step 4: Installing the built app

There are 3 ways to install a debug built app such as:

  1. Download the built app and use the Apple Configurator 2 to install the built app on your iOS device. (Mac Only)

  2. Install via QR code.

Building a Monaca app for Android

Step 1: Configuring the Android app settings

monaca remote build --browser

2. In the build interface under the App Settings, in the menu on the left, select Android.

3. Fill in the app information:

Setting

Description

Application Name

The name representing your app in the market

Package Name

A unique name that will be used when uploading to the Android Market. It is recommended to use the reverse-domain style (for example, io.monaca.app_name) for app ID. Only alphanumeric characters, periods (at least one period must be used) and underscore are allowed. Each segment should be separated by a period and started with an alphabetic character.

Use Different Package Name for Debug Build

If enabled, the package name of a release built and a debug built apps are different. The package name of a debug built app will have .debug extension, and the one for a project debugger will have .debugger extension. However, this option is disabled by default because it made some plugins impossible to be debugged due to the fact that they are tied to the exact package names (eg. in-app purchase).

Version

The version number of your app. A version number consist of numbers separated by dots (for example, 1.0.0).

Version Code

The internal version number of your app, relative to other versions. The value must be an integer, so that the applications can programmatically evaluate it for an upgrade.

Fullscreen

This option is only available with the Cordova 3.5 and later. If enabled, your app will run in a fullscreen mode which hides the status bar.

The remaining information is optional. You can configure for example the icon and splash screen of the app.

4. After finishing the configurations, click Save.

Step 2: Configuring the Android KeyStore

Android KeyStore is used for storing the keys (alias) needed to sign a package. When a KeyStore is lost or overwritten by another KeyStore, it is impossible to resign the signed package with the same key. One KeyStore can contain multiple alias, but only one alias is used for code-signing an application.

Android KeyStore is required in order to create a release build. However, it’s not necessary in order to create a debug build.

To configure an Android KeyStore in Monaca, follow the instructions below:

  1. From the build interface under the Build & Build Settings on the left menu, select Android. Then, choose Build for Release and click Manage KeyStore and Alias.

2. The KeyStore can either be created or imported. In this tutorial, we assume that you need to create a new KeyStore. Therefore, click the Clear and Generate New button. The following window will open:

3. Fill in the necessary information related to the KeyStore such as:

  • Alias: the name representing the private key that you will use later when signing your app. Multiple aliases can be stored within one KeyStore.

  • Alias Password: the password for the private key (alias).

  • Password for KeyStore: the password for the KeyStore. You will need this password when importing the KeyStore.

4. Click Generate KeyStore and Alias.

Step 3: Building the app

  1. From the Monaca Cloud IDE menu, go to Build → Build App for Android.

  2. Select the Debug Build option and click the Start Build button.

3. It may take several minutes for the build to complete. The following screen will open after the build is successfully completed.

Step 4: Installing the built app

There are 5 ways to install the built app:

  1. installing via QR Barcode

  2. downloading the built app directly to your computer and installing it via USB cable

  3. sending a URL to download the built app to a registered email address

2. Click the Generate Key and CSR button and fill in your Apple ID information (user name and email address) and country. Then, click Generate Key and CSR. After that, you will be asked to download the CSR file. You can also if you have one.

Install via .

This section will explain, how to create a debug build version of your app for Android. For more information about the types of build, please refer to .

In the terminal window, navigate to your project folder and run the command. The command will automatically upload your local project files to the Monaca Cloud. Type the following command to open an interactive build interface in your browser.

using the

installing via configured .

configured deployment services
deployment services
Build
Apple Developer Program
Building a Monaca app for iOS
Building a Monaca app for Android
import an existing private key
network install
Types of build
monaca remote build
monaca remote build
Types of Build
how to register an app ID
how to generate a certificate
how to create a provisioning profile