オープンソース LWC のアプリを Heroku にデプロイしてみた

この記事ではオープンソース Lightning Web Components(LWC) で作成したアプリを Heroku にデプロイした際の手順を紹介しています。

オープンソース Lightning Web Components

オープンソース Lightning Web Components(LWC) は、Web Components の技術をコアとした UI フレームワークで、軽量且つ高速で動作するブラウザネイティブなアプリ開発を実現します。
LWC はこの他に、Salesforce の Lightning Platform 上で動作するアプリや Lightning コンポーネントを作成する Lightning プラットフォーム LWC があります。

環境

• オープンソース LWC を使った開発では、 Node.js と version 5.2 以上の npm が必要となるので、現在の環境を確認した上で必要に応じて更新します。

$ node -v
> v12.1.0

$ npm -v
> 6.9.0  // 5.2+ required

プロジェクトの作成

プロジェクトを作成するフォルダを作って移動します。

$ mkdir ~/workspace
$ mkdir ~/workspace/lwc-oss
$ cd ~/workspace/lwc-oss

オープンソース LWC のプロジェクトを作成する方法はいくつかありますが、今回は lwc-create-app を利用します。
lwc-create-app は実行可能な npm パッケージとして提供されているオープンソースのツールです。
オープンソース LWC の開発に必要なツール群をインストールし、土台となるプロジェクトフォルダを作成してくれます。

$ npx lwc-create-app my-first-app

? Package name for npm my-first-app
? Description 
? Author hrk623
? Version 0.0.0
? License MIT
? Who is the GitHub owner of the repository (https://github.com/OWNER/repo) 
? What is the GitHub name of the repository (https://github.com/owner/REPO) my-first-app
? Select a package manager npm
? Register web component No
? Use custom Express server configuration No

オープンソース LWC で作成したアプリやコンポーネントは、 npm パッケージとして公開できます。
lwc-create-app を実行すると、npm パッケージ化する時に必要となる情報を聞いてきます。
今回は、パッケージ化をしないのでデフォルト値でプロジェクトを作成します。

出来上がったプロジェクトフォルダの構造を見てみると、SFDX プロジェクトとはかなり違うのが分かります。
初期状態では、名前空間 my の下に app と greeting というコンポーネントが作成されています。

ローカルサーバーで実行

ローカル環境で実行するには、プロジェクトフォルダで以下のコマンドを実行します。
localhost とポート番号が出力されるので、ブラウザで開きます。

$ cd my-first-app
$ npm run watch
> Local server listening: http://0.0.0.0:3001

• こんな感じで表示されれば成功です！

Heroku にホストする

• Procfile を作成
  • Heroku 上で起動するために、Procfile を作成し web: npm run serve と書いておきます。

• heroku アプリを作成し、プッシュすれば Heroku アプリでも OSS 版 LWC によるアプリが動作しているのが確認出来ます。

$ git add .
$ git commit -m "my first commit"
$ heroku login
$ heroku create
$ git push heroku master
$ heroku open

参考

• Lightning Web Components
• trailheadapps/lwc-recipes-oss