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:previewcommand Monaca Cloud IDE runs themonaca: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.
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 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
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",
・・・
}
Last modified 9mo ago