[ShopifyApp]Remixでアプリ作ってみる・参考URLもろもろまとめ

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

Remixでアプリ作る際の参考URLをここにまとめています。（まりんのただのメモです）

Shopifyアプリ開発100本ノック(Remix)｜まりん | Shopifyフロントエンジニア+SNSマーケティング｜note

１）はじめにやること

🔸パッケージインストール

Shopify App package for Remix

npm init @shopify/app@latest

この画面になったらコマンド叩く

cd 作成したディレクトリ

エクステンション（あとでもいれられる）

npm run shopify app generate extension

Build theme app extensions

themeで検索かけてEnter

🔸Poralis

App settings layout — Shopify Polaris

🔸チュートリアル

Build a Shopify app using Remix

２）開発時に使う

npm run dev

テーマファイル指定の場合

npm run dev -- --theme 127439274051

🔸remix-utilsを入れておく

npm install remix-utils

🔸corsを入れておく

npm install cors

🔸Remix Loader

Fullstack Data Flow | Remix

この二つはよく使う

export async function loader() {
  // provides data to the component
}

export async function action() {
  // updates persistent data
}

🔸Prisma migration

Quickstart with TypeScript & SQLite | Prisma Documentation

npx prisma migrate dev -- --name ファイル名なんでも

🔸Prisma Studio

npm run prisma studio

🔸GraphQL

GraphQL Admin API reference

🔸デプロイ

npm run deploy

３）使えるフレームワークやアイコンなど

🔸Alpine

Alpine.js

🔸React Icons

React Icons

４）基本的な書き方テンプレート