💧

Hydrogenを試す

2022/10/30に公開

React

Begin developing a Hydrogen storefront

この記事では、以下のドキュメントを読み、Hydrogenのチュートリアルを順番に実施していく。

このチュートリアルでは、以下を学習する。

開発環境のセットアップ
カスタムストアフロントを構築するためのコードベースの生成
Hydrogen プロジェクトの構造
テキストとコンポーネントのスタイルの変更

要件

以下について理解していること。 ← ハードル高い
- React
- Vite（SSRで使用）
- Tailwind CSS
以下がインストール済みであること。
- Yarn v1.x または npm
- Node.js v16.14.0以上

Node.jsのアップデート

Node.jsが要件を満たしていなかったので、以下を参考にアップデートする。

Step1. Hydrogenストアフロントを新規作成する

適当なディレクトリに移動する。
今回はhydrogen-sample-appというディレクトリを作成して、そこに移動する。

$ mkdir hydrogen-sample-app
$ cd hydrogen-sample-app/

以下を実行し、hello-worldテンプレートをローカルに準備する。
テンプレートは2種類あり、hello-worldテンプレートは必要最低限のテンプレート、demo-storeテンプレートはゴージャスなテンプレートとなっている。
今回はTypeScriptで開発したいため、--tsオプションをつけてTypeScriptのテンプレートを取得する（デフォルトではJavaScriptとなっている）。

$ npm init @shopify/hydrogen -- --template hello-world --ts

上記コマンドを実行後、プロジェクトの名前（hydrogen-appとした）などを入力した後、生成されたディレクトリに移動する。

$ cd hydrogen-app

Step2. 開発サーバーを起動する

$ npm run dev

> hydrogen-app@0.0.0 dev
> shopify hydrogen dev

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

起動後、http://localhost:3000/ にアクセスすると以下のような画面が表示される。

また、ターミナルにアクセスログが表示される。

GET streaming SSR     200 ok    120.78 ms  http://localhost:3000/

Step3. プロジェクトの構造を調べる

今回はTypeScriptでテンプレートを取得したため、実際は.js→.ts、.jsx→.tsxとなっている。

├── public
    └── .gitkeep // Gitでディレクトリを管理するためのファイル。
├── src
    └── assets
    │   └── favicon.svg   // Hydrogen favicon
    ├── routes
    │   ├── index.server.jsx  // アプリのページを描画するためのReactサーバーコンポーネント
    ├── App.server.jsx  // Your app's top-level React component
    ├── index.css   // スタイル
├── hydrogen.config.js  // Hydrogen 設定ファイル
├── index.html   // Your app's root HTML template
├── jsconfig.json // JavaScript or TypeScript configuration file
├── package.json   // Used to install dependencies and run scripts
├── README.md   // A README file that introduces the Hello World template
├── vite.config.js  // Vite 設定ファイル

Step4. テキストを変更する

/src/routes/index.server.tsxのHomeコンポーネントがHello,World!とHydrogenの紹介文を返すように変更する。

export default function Home() {
  return (
    <div>
      <h1>Hello world!</h1>
      <p>Welcome to Hydrogen.</p>
      <p>
        Hydrogen is a front-end web development framework used for building
        Shopify custom storefronts.
      </p>
    </div>
  );
}

変更を保存すると、変更がリアルタイムで適用され以下のような画面になる。

Step5. スタイルを追加する

このステップでは、Tailwind をインストールし、いくつかの要素のスタイルを設定する。

Tailwindは、クラスで構成される CSS フレームワークである。
スペース、色、レスポンシブレイアウトユーティリティの限られたセットを提供することで、開発者に一連のガードレールを提供します。

npm installを実行するため、Ctrl-cでサーバーを一旦止める。
次に、tailwindcss とその依存関係をインストールし、tailwind.config.jsと postcss.config.jsを生成する。

$ npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer
$ npx tailwindcss init -p

tailwind.config.jsにテンプレートファイルへのパスを追加する。

module.exports = {
  // ↓追加
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  // ↓追加
  plugins: [require('@tailwindcss/typography')],
}

Tailwind ディレクティブを /src/index.css に追加する。

@tailwind base;
@tailwind components;
@tailwind utilities;

サーバーを再起動する。

$ npm run dev

> hydrogen-app@0.0.0 dev
> shopify hydrogen dev

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

GET streaming SSR     200 ok    117.31 ms  http://localhost:3000/

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

/src/routes/index.server.tsxで、いくつかのクラスを追加して、Hello world!の見出しと、Welcome to Hydrogen.の段落にスタイルを設定する。

export default function Home() {
  return (
    <section className="p-6 md:p-8 lg:p-12">
      <h1 className="font-extrabold mb-4 text-5xl md:text-7xl">Hello world!</h1>
      <p className="font-bold mb-3">Welcome to Hydrogen.</p>
      <p>
        Hydrogen is a front-end web development framework used for building
        Shopify custom storefronts.
      </p>
    </section>
  );
}

変更を保存すると、スタイルが適用され、以下のような画面になる。