📜

ShopifyアプリのサンプルがNext.js / Koa / webpackを使わなくなっていたので経緯を調べた

2022/05/06に公開

Shopifyアプリを作成するコマンド shopify app create node でコードの展開元になっているShopify/shopify-app-node がここ半年くらいで様変わりしていたので超簡単にだけど経緯を調べてみた。

2021年10月 Next.jsをやめる

Next.jsとKoaを使っていたが遅いし複雑でKoaとwebpackで必要なことはほぼできるからKoaのみにします、ということでNext.jsをやめたみたい。

JSフレームワークの使い方に一貫性を保つために、ということでKoaをやめてExpressを使うように変わっていた。プルリクに貼ってあるリンク先が見れないのでどの辺に対する一貫性（consistent）を言っているのかはわからなかった。

webpackからViteに変更したみたい。合わせて色々リファクタリングが入っている。ファイル変更を見ているとVitestでテスト書きたい＆もろもろ、という感じがした。

変化が激しい。

いつからこうなったのかわからないけれど、2022年8月2日時点でShopify CLI（バージョン3.x）で展開されるアプリは https://github.com/Shopify/shopify-app-template-node/tree/cli_three になっている。cli_threeブランチ。

実際に展開されるのは Shpoify/cli のfixtureディレクトリのコード https://github.com/Shopify/cli/tree/main/fixtures/app だと思う。

バックエンドのExpress（webディレクトリ）とフロントエンドはReact（web/frontendディレクトリ）が明確に分離された。ReactはViteでビルド。

ルートディレクトリも合わせると node_modules、web/node_modules、web/frontend/node_modules という3段階構成で、なんだかNext.jsのときより結局複雑になってるんじゃないかという気持ちがしなくもない。

ルートはshopifyコマンドの実行が主でバックエンドとフロントを同時に起動したりできる。開発を始める際には一見便利だけど、プロダクションの運用を考えると結局裏で何をやっているか理解しなければいけないので、ちゃんとドキュメントに書いて欲しい。