拡張テンプレートで何ができるの？

拡張テンプレートを利用することで従来のベーステンプレート（ @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 のライブラリを更新することで可能です。

ただしバージョン更新時はバージョンの衝突のないように確認することやテストの実行を必ず行うようにしてください。