Cloud IDE preview function settings
To use the preview function, the following settings are required in the package.json file of the project.
monaca:previewcommand Monaca Cloud IDE runs the
monaca:previewcommand 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.
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.
devcommand to script property.
"monaca:preview": "npm run dev",
"dev": "browser-sync start -s www/ --watch --port 8080"
Add the browser-sync module to the devDependencies property.
In the latest Monaca project (Cordova 11), browser-sync specifies the above version.
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
watchcommand in the
monaca:previewcommand as well.
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
watchcommand, and two processes are registered in the
"monaca:preview": "npm run dev & npm run watch",
"dev": "webpack serve --port 8080 --open",
"watch": "webpack --watch --mode production",