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

Cloudflareなど、エッジコンピューティングがいよいよアツくなってきそうなこの頃。 いつまでも後回しにできないなと思ったので、Remixをとりあえず動かしてみました。 Remixアプリをセットアップ まずはCLIで […]

広告ここから
広告ここまで

目次

    Cloudflareなど、エッジコンピューティングがいよいよアツくなってきそうなこの頃。

    いつまでも後回しにできないなと思ったので、Remixをとりあえず動かしてみました。

    https://remix.run/

    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

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark