PWA Kit の拡張テンプレートを使ってみる

※ これから記載する事項は、私が所属する会社とは切関係のない事柄です。

今回は PWA Kit の バージョン3 から登場した[拡張テンプレート（Template Extensibility）](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/template-extensibility.html)と使ってみたいと思います。


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

拡張テンプレートを利用することで従来のベーステンプレート（ `@salesforce/retail-react-app`）を直接修正していた開発方法から、同じフォルダ構成内に同じファイル名のファイルを作成することで、ベーステンプレートを直接修正することなくPWA Kitを上書く開発方法することができます。これまでどおり直接修正（[Create a Base Template](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/template-extensibility.html#create-a-base-template)）することも可能です。
一番大きなメリットととしてはベーステンプレートを直接修正することがないためベーステンプレートのバージョンアップが容易にできることです。



## インストール方法

これまで通り `npx @salesforce/pwa-kit-create-app@latest` コマンドで PWA Kit のプロジェクトを作成する際に「Do you wish to use template extensibility?」と聞かれるのでここで「Yes」と答えれば拡張テンプレートを利用するプロジェクトが作成されます。「No」と答えれば従来通りのプロジェクトが作成されます。
![スクリーンショット 2023-07-03 18.44.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/49e964d5-175a-5046-fd53-412d1834e4f0.png)



## 従来の開発方法との違い

ホームページを修正したい場合の違いを見てみようと思います。

#### 従来の開発方法

従来の開発方法では `app/pages/home/index.jsx` に直接修正を入れていました。
![スクリーンショット 2023-07-03 17.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/7bb73c7c-48cf-1325-c371-13a50f46a5fc.png)



#### 拡張テンプレート

拡張テンプレートでは `overrides/app/pages/home/index.jsx` のように `overrides` フォルダの下に従来ベーステンプレートの[ファイル構成と同様の場所](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/template-retail-react-app/app)にファイルを置くことで上書きしながら利用します。

:::note
プロジェクト作成直後はサンプルとして下記のようにホーム画面の例が梱包されているので参考にしてみてください！
:::
![スクリーンショット 2023-07-03 17.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/a09f3a27-9f56-bea8-61c0-9dfed79a2c93.png)


## 上書きフォルダの設定

上記の違いでお見せしたように `overrides` 配下に対して上書きすることをお見せしましたが、このフォルダは下記のように `package.json` 内の `ccExtensibility.overridesDir` を書き換えることで変更も可能です。
![スクリーンショット 2023-07-04 18.11.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/80a76968-dd85-fc62-4468-4057ea03c160.png)



## 新しいページを作成したい場合

ベーステンプレートにあるページ以外にページを追加したい場合は新しく `page` 内にコンポーネントを作成し、 `route.jsx` 内の `route` 変数にコンポーネントを追加することで可能です。

:::note
プロジェクト作成直後はサンプルとして下記のように `/my-new-route` へ遷移時のページの例が梱包されているので参考にしてみてください！
:::
![スクリーンショット 2023-07-04 17.16.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/6e08dae7-1e95-a594-51ff-40c06450ca9c.png)



## グローバルコンポーネントの変更

ヘッダーやフッターといった全ページで呼ばれるレイアウトを管理しているコンポーネントがあります。それが、[`app/components/_app/index.jsx`](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/components/_app/index.jsx) です。
このファイルを `<ccExtensibility.overridesDir>/app/components/_app/index.jsx` にて上書きすることで全ページに反映させることができます。

#### やってみる
今回は試し全ページで `<head>` タグに 
```html
<meta name="test" content="テスト" />
```
と言うタグを追加してみたいと思います。  

まず下記のように `overrides/app/components/_app/index.jsx`  に、 [`app/components/_app/index.jsx`](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/develop/packages/template-retail-react-app/app/components/_app/index.jsx) をコピーし、`<head>` タグの修正時に利用する `<Seo>` タグ内に下記のように追加します。
![スクリーンショット 2023-07-04 18.09.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/19c69071-7fcb-d7c6-2516-98ef176a89aa.png)

修正を保存しフロントサイトを確認してみると下記のようにタグが追加されていることを確認できます。
![スクリーンショット 2023-07-04 18.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fc6afa2d-ba49-7353-02a0-2ce52b260e3c.png)



## ベーステンプレートのアップグレード方法

拡張テンプレート使用時のベーステンプレートのアップグレード方法は非常にシンプルです。
NPM などのコマンドで `@salesforce/retail-react-app` と言う Node.js のライブラリを更新することで可能です。

:::note warn
ただしバージョン更新時は[バージョンの衝突](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/template-extensibility.html#version-conflicts)のないように確認することやテストの実行を必ず行うようにしてください。
:::