MonacaクラウドIDEのプレビュー表示について

2023年10月6日

MonacaクラウドIDEでプレビュー表示をさせたい場合…

1.package.jsonの内に以下を追加

①scriptプロパティへmonaca:previewコマンドとdevコマンドを追加

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

②devDependenciesプロパティへbrowser-syncモジュールを追加

“devDependencies”: {
“browser-sync”: “~2.27.7”
}

2.Monaca Dashboardに戻り、プロジェクトを選択。「クラウドIDEで開く」ボタンの右隣にある三角のアイコンをクリックし、「ライトモードで開く」にチェックを付ける。

設定完了

クラウドIDEを表示したら、プレビューが表示されているはずです。

「tecn」を運営している DXジュン です。
Apice Technology株式会社の代表として、20年以上にわたり Web制作・業務改善DX・クラウドシステム開発に携わっています。

普段は企業の現場課題に寄り添いながら、
在庫管理システム／予約システム／求人管理／受発注システム／クラウドソーシング など、中小企業の仕事を“ラクにするツール”を作っています。

tecn では、業務改善のリアルや、Webシステムの仕組み、そして「技術が生活をちょっと楽しくしてくれる」ような日常×デジタルのヒントをゆるく発信しています。

現在の注力テーマは 在庫管理のDX化。 SKU・JAN・棚卸・リアルタイム連携など、現場で役立つ情報を発信しつつ、自社のクラウド在庫管理システムも開発・提供しています。
無料在庫管理システムの提供も行っております。
下記より申し込んでください。

小規模店舗・倉庫向けのシンプルな在庫管理ツールを無料公開中

記事があなたの仕事や生活のヒントになれば嬉しいです。コメント・ご相談があればお気軽にどうぞ！

よかったらシェアしてね！

プロフィール　DXジュン