リミックス、SQLite、およびPrisma、ああ私!

18609 ワード
sqlite react remix prisma テキストリンク
以前公開されたfullstackfish.com
リミックスアプリを作成し、PrismaとSQLiteに接続してみましょう.
端末を開き、新しいリミックスアプリを作成します.
npx create-remix@latest
あなたはどのようにあなたのアプリを設定したいの短いインタビューを通過します.あなたが少しの冒険のために気分でいるならば、沿って続くか、変わるために、これらのオプションを選んでください.
あなたが好きなアプリを呼び出します.私は、「Run RSP」を私のものと呼びます.
現在のリミックスアプリサーバーに展開するオプションを選択します.これは後で変更するのが簡単です.
JavaScriptを選択します.
実行へのオファーを下げるnpm install 今日は糸を使う予定です.
セットアッププロセスが完了したら、プロジェクトフォルダにCDを入れます.
cd run-rsp

VSコード、または使用するエディタを開きます.
code .
依存関係をインストールします.
yarn
すべてが正しく設定されていることを確認します.
yarn dev
今すぐあなたのブラウザで実行しているテンプレートのリミックスアプリを見る必要があります.

では、デフォルトのコードを自分で置き換えましょう.我々は、主にアプリケーションのフォルダで作業するつもりです.

ルートを開けましょう.JSXファイルとその内容を調べます.
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration
} from "remix";

export function meta() {
  return { title: "New Remix App" };
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        {process.env.NODE_ENV === "development" && <LiveReload />}
      </body>
    </html>
  );
}
ホームページでご覧になっている内容は<Outlet /> コンポーネント.我々はそれを1秒で編集します.
我々が行動でLivereloadを見ることができるように、小さい変化をしましょう.
アプリのタイトルを変更するmeta() 何でも好きなように機能しなさい.ファイルを保存し、ブラウザでアプリケーションのタイトルがほぼ即座に変更されることに注意してください.(アプリケーションのブラウザタブをチェックするか、右クリックしてページソースを表示)
ホームページの内容はroutes\index.jsx . ファイルを開き、すべて削除します.ファイルを保存します.ブラウザでエラーが表示されます.
エラーを修正するには、次の関数を追加します.
export default function Index() {
  return (
    <div>
      <h1>I'll soon be connected to SQLite</h1>
    </div>
  );
}
あなたは再びLivereload作業を得るためにブラウザをリフレッシュする必要があります.したら、ブラウザのデフォルトスタイルでレンダリングされた見出しが表示されます.それは少し良く見えるようにCSSのリセットといくつかのグローバルなスタイルを我々のアプリに追加してみましょう.
我々の中でroot.jsx ファイルを追加するlinks() 関数.我々はすでに輸入しているLinks 私たちのドキュメントの先頭にあるコンポーネントを使用してlinks() 関数はLinks コンポーネント.
// root.jsx
export function links() {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/[email protected]/dist/reset.min.css"
    }
  ]; 
}
今すぐ追加styles フォルダapp ファイルを追加するglobal.css 規則または2つで.

ファイルを保存します.あなたが追加したどのようなスタイルはまだ適用されません-我々は、アプリケーションにスタイルシートをリンクしていない.
に戻るroot.jsx . あなたのスタイルをインポートしてくださいlinks() .
import globalStyles from '~/styles/global.css'
...
// root.jsx
export function links() {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/[email protected]/dist/reset.min.css"
    },
    {
      rel: "stylesheet",
      href: globalStyles
    }
  ]; 
}
あなたの変更を保存し、今あなたのスタイルをブラウザで適用表示する必要があります.

PrismaとSQLiteの設定
アプリを停止し、いくつかの依存関係を追加しましょう.
yarn add @prisma/client
yarn add -D prisma
インストールを完了したら、SQLiteプロバイダーでPrismaを初期化します.
npx prisma init --datasource-provider sqlite
これはスキーマを持つPRISMAフォルダーを追加します.Prismaファイル.また、.あなたがすでに1を持っていないならば、ENVファイル.

DataSourceプロバイダーを含めることで、スキーマを編集する必要はありません.Prismaファイルsqliteにデフォルトのプロバイダを変更するには、.ENVファイルは、SQLiteファイルへの接続文字列を私たちのために設定されます.ニースタッチ、prisma.
モデルをあなたのschema.prisma サッカーチームのファイル.プリズマファイルをフォーマットしていない場合は、Prisma拡張モジュールをインストールします.プリマーはPrismaの書式設定を上書きしようとするかもしれません.そのため、もしそうならばファイルを右クリックし、フォーマットドキュメントを選択し、ファイルをフォーマットするべきであることを示します.今すぐあなたのモデルをフォーマットについて心配する必要はありません.我々は物事がここですべてを一緒に配線されている方法を示すためにシンプルに保つつもりです.当社のデータベースは、サッカーチームのリスト、または任意の種類のチームのようになります.
チームモデルをあなたのschema.prisma ファイル.
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Team {
  id        String   @id @default(uuid())
  team      String
  country   String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
モデルをデータベースに配備する
npx prisma db push
スキーマの横にあるPrismaフォルダーにdev . dbファイルがあるはずです.Prismaファイル.
結果を見るためにPrisma Studioを起動します.
npx prisma studio

我々は直接Prismaスタジオでいくつかのチームを追加することができます.ボタンをクリックします.

ファイルを追加するapp/lib/db.server.js ) データベースへの接続を設定するには.ファイルの「サーバ」がリミックスにサーバでこれを走らせることに注意してください.
import { PrismaClient } from "@prisma/client";

let prisma;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  if (!global.prisma) {
    global.prisma = new PrismaClient();
  }
  prisma = global.prisma;
}

export default prisma;
今すぐデータベースからチームを取得し、我々のアプリでそれらを表示しましょう.私たちはローダ機能(このコードはサーバー上で実行されます)を使用しますuseLoaderData() フック.
// routes/index.js
import { useLoaderData, Link } from 'remix'
import  prisma from '~/lib/db.server'

export const loader = async () => {
  const data = {
    teams: await prisma.team.findMany(),
  }
  return data
}

export default function Index() {
  const { teams } = useLoaderData()

  return (
    <>
      <div>
        <h1>Soccer Teams around the world</h1>
      </div>
      <ul>
        {teams.map((team) => (
          <li key={team.id}>
            <h1>{team.team}</h1>
            <p>{team.country}</p>
          </li>
        ))}
      </ul>
    </>
  )
}
Prismaを使用していますfindMany() 機能は、当社のデータベース内のすべてのチームを取得します.
それは今のところです.我々が構築したアプリは、特に便利ではありませんが、あなたは今、あなたが好きなスタイルを構築するビルディングブロックを持っているが、それはあなたが好きです.
それは何度も言われていますが、本当のままです:開発者であるより良い時間が、これまでありませんでした.そこから選択するように多くの素晴らしいツールがあります.最大の課題は、あなたのツールベルトに含めることを決定することができます.リミックスとPrismaはあなたの短いリストにする必要があります.両方の開発者の経験はトップノッチです.
新年おめでとうございます!
新規コメントPOSTの作成
キュー