BASEのテーマをReactで構築しECサイトをつくる #React

GitHub

必須タグがすべて記述された状態のテンプレートなのでyarn startすれば、BASEのHTML編集機能上ですぐに反映できるはずです(2022/6現在)。

BASEは非エンジニアでも簡単にECサイトをGUI上から作成でき、その手軽さから広く使用されているサービスです。

ですが、BASEのデザインをカスタマイズするためには素のHTML/CSSを記述する必要があり、Reactを使用しているエンジニアには大変遠回りの作業になります。

そこで、webpackのhtml-webpack-pluginを使用してBASEのテンプレートを構築できる環境を作成しました。

Reactを使用し、コンポーネントごとに別ファイルに記述し、webpackのhtml-webpack-pluginを使用して１枚のHTMLへ出力する

出力するHTMLにはBASEのタグを入れ込む必要があります。しかし、開発環境ではその値を読み取ることができません。なので、開発環境ではモックデータを読み出すように、環境変数によって結果を分岐する関数を用意しました。

以下のように記述すると…

<div>
  {baseTag('itemName')}
</div>

開発環境では以下のような出力になります。

<div>
  商品名１
</div>

本番環境では以下のように、BASEの専用タグが出力されます。

<div>
  {itemTitle}
</div>

baseTag関数が返す値はJSONで管理しています。

1・２の問題が解決されたので、プレビューしながらローカルで開発でき、gitで差分管理することができます。

webpackでhtml-webpack-pluginを使用します。
構成などはhisho/react-static-generatorをかなり参考にさせて頂きました。ありがとうございます。

また、emotionのSSR機能を使用しているため、jsx内にCSSを記述するとHEAD内の<style>へemotionがCSSを書き出してくれます。

BASEはCSSファイルをアップロードすることができますが、一度アップロードしたファイルのバージョン管理などが出来ないため、HTML内にCSSが書き出せるとかなり楽になります。