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
  • What's new in Monaca CLI 3.0 and Localkit
  • Ejecting all build dependencies
  • Cordova of your choice
  • Configurable tasks with package.json scripts
  • New Monaca CLI Commands
  • Migration to the new version
  • How it affects your project?
  • Summary table

Was this helpful?

  1. Release Notes and Updates

New Monaca CLI and Localkit

What's new in Monaca CLI 3.0 and Localkit

The new Monaca CLI and Localkit is a significant improvement from the past toolkits, providing you the more flexibility and robustness to your development.

Ejecting all build dependencies

The new version of Monaca toolkits enable to configure everything for the project.

In the previous version of CLI and Localkit, common modules used for building, bundling, and previewing apps were globally installed. Some example of these modules were Webpack, Browser-sync, Loader, and Babel. Installed globally meant that all Monaca projects shared a single set of tools and version locked.

The new release removes the global modules and installs them with each project. We now have the freedom of managing our toolset. Additionally, being installed into the project scope means the ability to customize each project uniquely.

The freedom to customize and manage is now in your hands.

Cordova of your choice

From this new release, Cordova is also decoupled from the project. It is now installed as one of the devDependencies for each project. That means the developer can now choose to use different Cordova versions for their projects.

At the moment, remote build server is still using a preconfigured Cordova distribution and you cannot change the version freely. We are working on to eliminate this limitation too!

Configurable tasks with package.json scripts

To provide more flexibility to developers in choosing their previewing and building tool, you can define each task in package.json. Now, monaca preview, monaca transpile, and monaca debug commands basically just execute scripts defined in package.json.

New Monaca CLI Commands

The following commands are added to the CLI.

monaca init

monaca update

This command is used to update project created using Monaca CLI 2 or lower.

Migration to the new version

All existing projects are required to update.

Monaca Cloud IDE and Localkit users

When opening the project, a dialog will appear to automatically update the project. Please follow the instruction and the update is done.

Monaca CLI Users

For Monaca CLI users, run monaca update to update the project.

How it affects your project?

Non-Transpile projects

The package.json will be created/modified with the following changes:

  • A monaca:preview command will be added to the script property.

  • A dev command will be added to the script unless it already exists.

    • "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"

  • Browser-sync and Cordova will be added as devDependencies.

"scripts": {
    "monaca:preview": "npm run dev",
    "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
}

Transpile projects

The package.json will be modified with the following changes:

  • monaca:preview, monaca:transpile and monaca:debug commands will be added to the script property.

  • dev, build, and watch commands will be added to the script unless they already exist.

  • Required packages including Webpack and Cordova will be added as devDependencies.

"scripts": {
    "monaca:preview": "npm run dev & npm run watch",
    "dev": "PORT=8080 node ./monaca_preview.js",
    "monaca:transpile": "npm run build",
    "build": "webpack --config ./webpack.prod.new.config.js",
    "monaca:debug": "npm run watch",
    "watch": "webpack --watch --config ./webpack.prod.new.config.js"
}

Other file changes

  • monaca_preview.js: a script to manage webpack and webpack-dev-server instance.

  • webpack.dev.new.config.js: a refined webpack configuration for development mode. It is used in monaca_preview.js.

  • webpack.dev.prod.config.js: a refined webpack configuration for production mode.

If you have changed your webpack configuration files (i.e webpack.dev.config.js or webpack.prod.config.js), you might need to modify the new generated webpack config files to your requirements.

Summary table

Confused with many changes? Here there is a table summarizing the changes we have made.

Changes

Previous Version

New Version

Package Dependencies

Install globally

Install required build modules to the project.

Cordova

Install globally

Install to the project

Monaca CLI Commands

monaca preview

Using globally installed browser-sync or webpack-dev-server for previewing.

Run monaca:preview script in package.json file. It by default will use locally installed browser-sync or webpack-server for previewing. For migrated project, it will use webpack-dev-server.

monaca transpile

Use globally installed Webpack to transpile and build the project.

Run monaca:transpile script in package.json file. It will use locally installed Webpack by default.

monaca debug

Use globally installed Webpack to transpile and watch the file changes.

Runs monaca:debug script in package.json file. It will use locally installed Webpack by default.

PreviousCordova 9 changesNextMigration from Cordova to Capacitor

Last updated 3 years ago

Was this helpful?

Initialize the current project as a Monaca project. With this command, you can migrate the project from PhoneGap, Ionic, Angular and Vue CLI. For more details, please refer to .

If you have any questions, please feel free to contact us via the or directly on chat (click the icon on the right-bottom corner). We also have the commercial technical support to solve any particular problems you have in your project.

Migrating from other platforms
contact form