Cloud IDE preview function settings

To use the preview function, the following settings are required in the package.json file of the project.

1. monaca:preview command Monaca Cloud IDE runs the monaca:preview command to start the development server required for the preview function.

2. Specify the connection port of the development server as "8080" The started development server listens on port number "8080".

Projects created with services and development tools other than Monaca can use the preview function with the above settings.

Projects that do not use transpile

For projects that don't use transpile, set the script and devDependencies properties in the package.json file as follows. The development server is started using BrowserSync.

script property

Add monaca:preview command and dev command to script property.

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

Add the browser-sync module to the devDependencies property.

"devDependencies": {
    "browser-sync": "~2.27.7"
}

In the latest Monaca project (Cordova 12), browser-sync specifies the above version.

Project use transpile

For projects that use transpile such as Vue, React, Angular, etc., register the process to start the development server in monaca: preview command.

Also, if you want the build to be executed automatically when the source code is changed, add the watch command in the monaca:preview command as well.

Projects that use transpile depend on many modules, so it may not be possible to migrate to Monaca.

The following is an example of the settings when using webpack. Set the webpack server command to start the development server to the dev command.

The source code change detection process is set in the watch command, and two processes are registered in the monaca:preview command.

"scripts": {
    ・・・
    "monaca:preview": "npm run dev & npm run watch",
    "dev": "webpack serve --port 8080 --open",
    "watch": "webpack --watch --mode production",
    ・・・
  }