ローカル環境にRemixでアプリをセットアップしてみた覚書

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や有料メディアなどの組み込みもできそうな気がします。

Reference

https://remix.run/docs/en/v1/tutorials/blog