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
  • Menu bar
  • File
  • Edit
  • View
  • Run
  • Build
  • Project
  • Configure
  • Publish a project
  • Direct import
  • Debugger tab
  • Preview log tab
  • Previewer
  • Previewer limitations
  • Share
  • Sharing a project
  • Code editor

Was this helpful?

  1. Product Guides
  2. Monaca Cloud IDE

Overview

PreviousMonaca Cloud IDENextFeatures in the Monaca Cloud IDE

Last updated 1 year ago

Was this helpful?

Monaca Cloud IDE is a browser-based development environment. Right on your web browser, all your Cordova development can be done without any setup.

On this page, we will describe the Graphic User Interface (GUI) of the Monaca Cloud IDE.

Menu bar

The main menu bar contains the following submenus:

Menu Item

Description

File

Edit

View

Run

Build

Project

Configure

Backend

Help

Shows how to find help during the development.

File

Menu Item

Description

New File

Creates a new file.

Save

Saves the currently open file.

Save All

Saves all the currently open files.

Upload

Uploads the files in the current folder.

Edit

Menu Item

Description

Undo

Undoes the latest action.

Redo

Redoes the previous action.

Search

Searches for a string in the currently open file.

Replace

Replaces a found string in the currently open file.

Search All Files

Searches through all the project files.

Comment

Comments out/in the current line.

View

Menu Item

Description

Debugger Tab

Shows/Hides the debugger tab

Reset Layout

Resets the IDE's layout to the default arrangement.

Run

Menu Item

Description

Show Preview Tab

Opens the previewer.

Run on Device

Runs the project on the Monaca Debugger.

Setup Monaca Debugger

Installs the Monaca Debugger on your device.

Build

Menu Item

Description

Build App for Android

Builds the app for an Android device.

Build App for iOS

Builds the app for an iOS device.

Build App for Windows

Builds the app for a Windows device.

Build History

Shows the build history of the current project.

CI History

Shows the continuous integration history of the current project.

Project

Menu Item

Description

Commit

Commits the local changes.

Show Commit History

Shows the commits history from Monaca Cloud IDE.

Pull

Pulls the remote changes.

Push

Pushes the local changes to the remote server.

Show Remote History

Shows the commits history in the remote server.

VSC Configure

Configures the remote repository.

Invites other Monaca users to join the project.

Export

Exports the project.

Publish

Configure

Menu Item

Description

App Settings for Android

App Settings for iOS

App Settings for Windows

Cordova Plugin Settings

JS/CSS Component Settings

Service Integration Settings

Continuous Integration

Deploy Service

Workspace Configuration

Configures the appearance of the code editor.

Publish a project

This feature allows you to make your project available to other users by sharing the link generated after publishing your project. By accessing the generated link, users can get a copy of their own on their account. All changes made in the copies are not transferred to the original, so there will be no fear of someone messing up the original.

Publishing your project is really easy and done by following these steps:

  1. From the Monaca Cloud IDE menu, go to Project → Publish.

  2. Click Publish.

3. Use the generated link to share your project.

If you no longer wish for your project to be available, you can make it private again by clicking the Make Private button that appears after publishing your project.

Direct import

With this feature, we allow Monaca users to directly import published Monaca projects or projects from a given URL directly by just accessing a link. Upon accessing the link, the users will be forwarded to the following screen (if signed in), whereby just clicking the import button the project will be imported onto their account.

Debugger tab

Preview log tab

Preview Log tab is a terminal window for running a HTTP service to provide content in the previewer.

Previewer

The previewer provides an overview of your app in real-time. You can also interact with the previewer as if it is running on an actual device with the limitation of executing the specific device’s functionality (such as camera, contact and so on) and cross-origin network AJAX request. Along with the Monaca Debugger, you will have effective and efficient experiences during the app development.

In this tab, you can:

  • Refresh the previewer.

  • Change the display of the device's screen in that tab. You will see a drop-down list of different devices such as iPad, iPhone, and Pixel. You can change the orientation of the screen as well.

  • Detach/attach the previewer.

Previewer limitations

When using the previewer, you should be aware of the following limitations:

  • Cordova plugin APIs are not available.

  • Ajax requests will fail because of the Cross-origin restriction. However, it can be done if server-side scripts return Access-Control-Allow-Origin header (i.e., Cross-Origin Ajax Request is permitted).

  • Viewport appearance may differ from real devices.

Share

The Share function allows you to:

  • Manage the team: add/remove members to the shared project.

  • Share the source code with multiple people (members are assigned as developers). There are 3 ways to do it:

    1. The easiest way is to use Monaca Cloud's Team Management function. Then, two or more people can open the same project in different Monaca Cloud IDEs. However, if there is any conflict while updating the project, the previous version of the project will be overwritten.

    2. Another way is to set up a version control system and do the

  • Let multiple people to test the project (members are assigned as

    testers).

Sharing a project

In order to share and manage the members of your project, please do as follows:

  1. From the Monaca Cloud IDE, go to Project → Share .

  2. The Share Project dialog will appear. To add a member, input the emails of your team members. Please enter one email address per line. You can also assign the role of each member as a developer or a tester by choosing from the drop-down menu. Then, click the Add User button to send the invitation to them.

Code editor

  • basic syntax colorization

  • rich intelliSense & validation

If you want to search within the current editor, press Cmd+F or Ctrl+F. The following dialog will appear:

Shows the sumbmenu.

Shows the submenu.

Shows the submenu.

Shows the submenu.

Shows the submenu.

Shows the submenu.

Shows the submenu.

Opens the in a new window.

Makes the current project public (see ).

For more information to enable vision control on your project, please refer to .

Configures Android app’s information (see ).

Configures iOS App’s information (see ).

Configures necessary information to build a Windows app (see ).

Enables/Disables Cordova plugins in the current project (see ).

Adds/removes JavaScript and CSS libraries to/from the current project (see ).

Integrates services to Monaca projects in the form of plugins (see ).

Automates building and deployment cycles (see ).

Adds/Removes deployment services for Monaca CI (see ).

Once Monaca Debugger is connected with Monaca Cloud IDE, you can do console debugging as well DOM inspection in this panel. For more information, please refer to .

The usability of this function depends on your Monaca subscription plan. For more information, please refer to .

local development using or . This requires a higher skillset, but it is more collaborative.

If you want to join a team and edit the project files, you need to subscribe to a valid plan. Otherwise, you can only join as a tester. Please refer to .

3. To remove a member from the project, just click the icon at the end of the row and then click OK.

Monaca uses the because of various reasons such as:

a robust auto-completion system that can be expanded with the use of a language server that provides support for TypeScript, HTML, JavaScript and . And more to come such as React and Vue.

Please refer to for the list of all the shortcuts available in the Monaca code editor.

✖️
Version Control
Monaca Debugger with Monaca Cloud IDE
Monaca Subscription Plans
Monaca Localkit
Monaca CLI
Monaca Subscription Plans
Monaco editor
Onsen UI
Editor Shortcuts
Monaca Backend
Cordova Plugins
JS/CSS Components
Service Integration
Monaca CI
Deployment Services
File
Edit
View
Run
Build
Project
Configure
Share
Publish Project
Configure Android App
Configure Windows App Settings
Configure iOS App Settings