※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。
今回は PWA Kit の バージョン3 から登場した拡張テンプレート(Template Extensibility)と使ってみたいと思います。
拡張テンプレートで何ができるの?
拡張テンプレートを利用することで従来のベーステンプレート( @salesforce/retail-react-app
)を直接修正していた開発方法から、同じフォルダ構成内に同じファイル名のファイルを作成することで、ベーステンプレートを直接修正することなくPWA Kitを上書く開発方法することができます。これまでどおり直接修正(Create a Base Template)することも可能です。
一番大きなメリットととしてはベーステンプレートを直接修正することがないためベーステンプレートのバージョンアップが容易にできることです。
インストール方法
これまで通り npx @salesforce/pwa-kit-create-app@latest
コマンドで PWA Kit のプロジェクトを作成する際に「Do you wish to use template extensibility?」と聞かれるのでここで「Yes」と答えれば拡張テンプレートを利用するプロジェクトが作成されます。「No」と答えれば従来通りのプロジェクトが作成されます。
従来の開発方法との違い
ホームページを修正したい場合の違いを見てみようと思います。
従来の開発方法
従来の開発方法では app/pages/home/index.jsx
に直接修正を入れていました。
拡張テンプレート
拡張テンプレートでは overrides/app/pages/home/index.jsx
のように overrides
フォルダの下に従来ベーステンプレートのファイル構成と同様の場所にファイルを置くことで上書きしながら利用します。
プロジェクト作成直後はサンプルとして下記のようにホーム画面の例が梱包されているので参考にしてみてください!
上書きフォルダの設定
上記の違いでお見せしたように overrides
配下に対して上書きすることをお見せしましたが、このフォルダは下記のように package.json
内の ccExtensibility.overridesDir
を書き換えることで変更も可能です。
新しいページを作成したい場合
ベーステンプレートにあるページ以外にページを追加したい場合は新しく page
内にコンポーネントを作成し、 route.jsx
内の route
変数にコンポーネントを追加することで可能です。
プロジェクト作成直後はサンプルとして下記のように /my-new-route
へ遷移時のページの例が梱包されているので参考にしてみてください!
グローバルコンポーネントの変更
ヘッダーやフッターといった全ページで呼ばれるレイアウトを管理しているコンポーネントがあります。それが、app/components/_app/index.jsx
です。
このファイルを <ccExtensibility.overridesDir>/app/components/_app/index.jsx
にて上書きすることで全ページに反映させることができます。
やってみる
今回は試し全ページで <head>
タグに
<meta name="test" content="テスト" />
と言うタグを追加してみたいと思います。
まず下記のように overrides/app/components/_app/index.jsx
に、 app/components/_app/index.jsx
をコピーし、<head>
タグの修正時に利用する <Seo>
タグ内に下記のように追加します。
修正を保存しフロントサイトを確認してみると下記のようにタグが追加されていることを確認できます。
ベーステンプレートのアップグレード方法
拡張テンプレート使用時のベーステンプレートのアップグレード方法は非常にシンプルです。
NPM などのコマンドで @salesforce/retail-react-app
と言う Node.js のライブラリを更新することで可能です。
ただしバージョン更新時はバージョンの衝突のないように確認することやテストの実行を必ず行うようにしてください。