話題の Carlo で何か作ってみようと思い、Vue CLI で作ったプロジェクトの開発モードと組み合わせようとして、環境設定に少しつまづいたのでメモ。

Carlo設定

main.js（Carlo起動スクリプト）

// Tell carlo where your web files are located.
app.serveOrigin('https://localhost:8080')

これにより localhost の内容が Carlo で表示されるようになります。
※開発中は上記の設定で、ビルド後は app.serveFolder(__dirname) 等を使用するよう、環境変数などで分岐を入れることになると思います。

webpack-dev-server設定

vue.config.js

module.exports = {
  devServer: {
    disableHostCheck: true,
    headers: {
      'Access-Control-Allow-Origin': 'https://domain'
    },
    host: 'localhost',
    https: true
  }
}

今回 Vue CLI なのでこのファイル名ですが、他の場合も webpack.config.js に同様の設定を追加すれば動くと思います。

経緯

最初、デフォルト設定の http://localhost:8080 を Carlo で読み込むように設定して起動したら画面が真っ白になっていて、 DevTools を開いたらJS等が読み込めていませんでした。
コンソールで location を調べると、 https://domain/index.html となっていたので、とりあえず HTTPS に変更してみたところ、画面は表示されましたがHMR部分でエラーが出ました。
あとはエラー内容をググりながら、 host → disableHostCheck → headers の順に追加したところで、ようやく HMR が動くようになりました。

おまけ

Carlo を立ち上げたときに Chrome DevTools も開く設定。（Chrome の起動オプションです。上記の Carlo の設定同様、開発モードのみ有効になるように調整する必要がありますね）

main.js（Carlo起動スクリプト）

  const app = await carlo.launch({
    args: ['--auto-open-devtools-for-tabs']
  })

また、localhost を HTTP 化した後に、「この接続はプライバシーが保護されません」という Chrome の警告画面が出るようになり、毎回許可するのが面倒だったので、上記 args に --allow-insecure-localhost を入れていたのですが、いま試しにはずしたら警告は表示されなくなっていた……。devServer の設定を https だけに戻しても警告は出ないので、一度設定したら出なくなるのかも？

Carloでホットリロードしながら開発するためのwebpack-dev-serverの設定

Carlo設定

webpack-dev-server設定

経緯

おまけ