# クラウドIDE プレビュー機能の設定

プレビュー機能を利用するには、プロジェクトの `package.json` ファイルに、次の設定が必要となります。

1. `monaca:preview`コマンド

   * Monaca クラウドIDEは、プレビュー機能に必要となる開発サーバーを起動させるため`monaca:preview` コマンドを実行します。

2. 開発用サーバーの接続ポートを「8080」に指定
   * 起動した開発用サーバーは、ポート番号「8080」でリッスンします。

Monaca以外のサービスや開発ツールで作成されたプロジェクトは、上記の設定によりプレビュー機能をご利用いただけます。

## トランスパイルを利用しないプロジェクト

トランスパイルを利用しないプロジェクトは、`package.json` ファイルの `script`プロパティと`devDependencies`プロパティを次のように設定します。開発用サーバーは、BrowserSyncを利用して起動しています。

### scriptプロパティ

scriptプロパティへ`monaca:preview`コマンドと`dev`コマンドを追加します。

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

### devDependencies

`devDependencies`プロパティへ`browser-sync`モジュールを追加します。

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

最新のMonacaプロジェクト(Cordova12)において、`browser-sync`は上記のバージョンを指定します。

## トランスパイルを利用するプロジェクト

VueやReact、Angularなどのトランスパイルを利用するプロジェクトは、`monaca:preview`コマンド内に開発用サーバーを起動する処理を登録します。

また、ソースコードの変更時に自動的にビルドを実行させる場合は、`watch`コマンドも`monaca:preview`コマンド内に追加してください。

{% hint style="warning" %}
トランスパイルを利用するプロジェクトは、多くのモジュールに依存しているため、Monacaへの移行ができない可能性があります。予めご了承ください。
{% endhint %}

### scriptプロパティ

下記は、webpackを利用した場合の設定内容の一例です。

開発用サーバーを起動する`webpack server`コマンドを `dev` コマンドに設定。

ソースコードの変更検知の処理を`watch` コマンドに設定し、`monaca:preview`コマンド内で2つの処理を登録しています。

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