ローカル環境にRemixでアプリをセットアップしてみた覚書
Cloudflareなど、エッジコンピューティングがいよいよアツくなってきそうなこの頃。 いつまでも後回しにできないなと思ったので、Remixをとりあえず動かしてみました。 Remixアプリをセットアップ まずはCLIで […]
目次
Cloudflareなど、エッジコンピューティングがいよいよアツくなってきそうなこの頃。
いつまでも後回しにできないなと思ったので、Remixをとりあえず動かしてみました。
Remixアプリをセットアップ
まずはCLIでアプリをセットアップします。
% npx create-remix@latest --template remix-run/indie-stack blog-tutorial
TypeScriptを使うかどうかを訊かれます。
? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript
JavaScript
対話コマンドの流れでnpm install
を実行するかも訊かれます。テザリングや機内wi-fiなどを利用している場合は、ここでno
を選ぶとよさそうです。
? Do you want me to run `npm install`? (Y/n)
次のメッセージが表示されれば、セットアップ完了です。
Setup is complete. You're now ready to rock and roll 🤘
Start development with `npm run dev `
ローカルサーバーでアプリを起動する
npm run dev
でサーバーを起動しましょう。
$ yarn dev
yarn run v1.22.19
$ run-p dev:*
$ cross-env NODE_ENV=development binode --require ./mocks -- @remix-run/dev:remix dev
$ npm run generate:css -- --watch
🔶 Mock server running
> generate:css
> tailwindcss -o ./app/styles/tailwind.css --watch
Rebuilding...
Done in 129ms.
Loading environment variables from .env
Remix App Server started at http://localhost:3002 (http://10.5.102.254:3002)
GET / 200 - - 117.286 ms
テンプレートのアプリが起動します。
indie-stack
テンプレートには、「会員機能」と「ノート管理機能」が用意されています。
prisma/schema.prisma
にDBの定義などが書かれていますので、気になる方はここを触ってみましょう。
datasource db {
provider = "sqlite"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model User {
id String @id @default(cuid())
email String @unique
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
password Password?
notes Note[]
}
model Password {
hash String
user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
userId String @unique
}
model Note {
id String @id @default(cuid())
title String
body String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
user User @relation(fields: [userId], references: [id], onDelete: Cascade, onUpdate: Cascade)
userId String
}
DBにはsqliteが指定されています。そのため、データベースのセットアップなどは特段必要ない様子でした。
loaderを使って、APIからデータを取得する
外部のCMSなどからコンテンツデータを取得する場合、loader
変数をexportします。
import { json } from "@remix-run/server-runtime";
export const loader = async () => {
const response = await fetch("https://api.github.com/gists");
if (!response.ok) {
return json({
items: []
})
}
return json({
items: await response.json()
});
}
export default function Index() {
...
loader
で取得したデータは、useLoaderData
でコンポーネント側から利用できます。
import { Link, useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/server-runtime";
export const loader = async () => {
const response = await fetch("https://api.github.com/gists");
if (!response.ok) {
return json({
items: []
})
}
return json({
items: await response.json()
});
}
export default function Index() {
const data = useLoaderData<typeof loader>()
loader
関数内では、DBへのアクセスなども書くことができる様子です。
Stripeのカートセッションや、ShopifyのStorefront APIなどを呼び出すことで、ECや有料メディアなどの組み込みもできそうな気がします。