> For the complete documentation index, see [llms.txt](https://en.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en.docs.monaca.io/release_notes/20180918_monaca_cli_3.0.md).

# 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

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 [Migrating from other platforms](/products_guide/migration.md).

#### 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`.

```javascript
"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`.

```javascript
"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.

{% hint style="info" %}
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.
{% endhint %}

## 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. | <p>Run <strong>monaca:preview</strong> script in <code>package.json</code> file.<br> It by default will use locally installed <strong>browser-sync</strong> or <strong>webpack-server</strong> for previewing. For migrated project, it will use <strong>webpack-dev-server.</strong></p> |
|                          | **monaca transpile** | Use **globally installed** Webpack to transpile and build the project.          | <p> Run <strong>monaca:transpile</strong> script in <code>package.json</code> file.<br> It will use <strong>locally installed</strong> Webpack by default.</p>                                                                                                                            |
|                          | **monaca debug**     | Use **globally installed** Webpack to transpile and watch the file changes.     | <p> Runs <strong>monaca:debug</strong> script in <code>package.json</code> file.<br> It will use <strong>locally installed</strong> Webpack by default.</p>                                                                                                                               |

If you have any questions, please feel free to contact us via the [contact form](https://monaca.io/service/index.html) 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.
