BlitzJSのTutorialをやってみた①

こんばんわ、hisayukiです❗

前回に引き続き、BlitzJSを進めていこうかと思います。
Blitzはチュートリアルが公式にあるので、これを進めるのが理解深まるかなと。

前回のリポジトリ
1. そのままじゃ動かない
ディレクトリ構成
Sign upを試してみる
1. DBの中身も見てみる
HomePageを変えてみる
まとめ

前回のリポジトリ

GitHub - mori-hisayuki/sample-blitz-app

Contribute to mori-hisayuki/sample-blitz-app development by creating an account on GitHub.

これをそのままgit cloneしてきます。

そのままじゃ動かない

Package

git cloneしただけだと動かなくなっています。
まずはyarn installでPackageのインストールします。

環境変数

加えて、README.mdに書いてありますが.env.localと.env.test.localを追加をする必要があります。

Environment Variables
Ensure the .env.local file has required environment variables:
DATABASE_URL=postgresql://<YOUR_DB_USERNAME>@localhost:5432/sample-blitz-app
Ensure the .env.test.local file has required environment variables:
DATABASE_URL=postgresql://<YOUR_DB_USERNAME>@localhost:5432/sample-blitz-app_test

この2つのファイルは必須ではありますが、両方共ローカル環境での設定なのでGit管理の対象から外されています。

ちなみに、README.mdではPostgresqlへの接続情報を書いてますが最初の段階ではSQLiteを使うので、以下の用に書きます。

# .env.local
DATABASE_URL="file:./db.sqlite"

#.env.test.local
DATABASE_URL="file:./db_test.sqlite"

DB Migrate

初期テーブルも消えているので、マイグレーションコマンドを実行してテーブルを作成します。

blitz prisma migrate dev

ディレクトリ構成

新規作成したアプリケーションのディレクトリはこんな感じです。

sample-blitz-app
├── app/
│   ├── api/
│   ├── auth/
│   │   ├── components/
│   │   │   ├── LoginForm.tsx
│   │   │   └── SignupForm.tsx
│   │   ├── mutations/
│   │   │   ├── changePassword.ts
│   │   │   ├── forgotPassword.test.ts
│   │   │   ├── forgotPassword.ts
│   │   │   ├── login.ts
│   │   │   ├── logout.ts
│   │   │   ├── resetPassword.test.ts
│   │   │   ├── resetPassword.ts
│   │   │   └── signup.ts
│   │   ├── pages/
│   │   │   ├── forgot-password.tsx
│   │   │   ├── login.tsx
│   │   │   ├── reset-password.tsx
│   │   │   └── signup.tsx
│   │   └── validations.ts
│   ├── core/
│   │   ├── components/
│   │   │   ├── Form.tsx
│   │   │   └── LabeledTextField.tsx
│   │   ├── hooks/
│   │   │   └── useCurrentUser.ts
│   │   └── layouts/
│   │       └── Layout.tsx
│   ├── pages/
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── index.test.tsx
│   │   └── index.tsx
│   └── users/
│       └── queries/
│           └── getCurrentUser.ts
├── db/
│   ├── index.ts
│   ├── schema.prisma
│   └── seeds.ts
├── integrations/
├── mailers/
│   └── forgotPasswordMailer.ts
├── public/
│   ├── favicon.ico*
│   └── logo.png
├── test/
│   ├── setup.ts
│   └── utils.tsx
├── README.md
├── babel.config.js
├── blitz.config.js
├── jest.config.js
├── package.json
├── tsconfig.json
├── types.d.ts
├── types.ts
└── yarn.lock

各ファイルの説明はこんな感じです。
とりあえず、チュートリアルサイトの説明を日本語にしてみただけなので、違うところはあとから適宜直していきます。

app/

アプリケーションのRootディレクトリになります。

app/pages

表示するページごとのディレクトリです。
NextJSではこの直下にすべてのページを配置する必要がありましたが、Blitzではページ単位でapp/pages/***のようなディレクトリを作成することが出来ます。

Build時に各page単位のディレクトリ内のページをpages直下にマージします。

app/core/

アプリケーション内で共通利用される、HookやComponents、Layoutsなどを配置します。

db/

データベース構成を配置する場所。
Prismaのスキーマファイルや、マイグレーションやSeed用のファイルなどもここに配置する。

public

静的Assetsファイルを配置する場所。
ImageやCSSなどのファイルを配置する。

etc

他には.envなどの環境変数ファイルやbaleやTypescritpの設定ファイルなどがあります。

Sign upを試してみる

まずはsample-blitz-appディレクトリに移動して、以下のコマンドでローカルホストで実行します。

blitz dev

✔ Compiled
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/vscode/develop/sample-blitz-app/.env
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
warn  - You have enabled experimental feature(s).
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.

info  - Using external babel configuration from /home/vscode/develop/sample-blitz-app/babel.config.js
event - compiled successfully

http://localhost:3000にアクセスし、Sign Upを選択します

メールアドレスとパスワードを入力してCreate Accountをクリックします

これでアカウントが作成されて、ログイン後の画面に変わります。

ログアウト後に先程登録したメールアドレスとパスワードでログインも出来るようになります。

DBの中身も見てみる

blitzはデフォルトでPrisma Studioを起動できます。
npxコマンドでもPrisma Studioは起動しますが、.envを読み込まないです。

schema.prismaを見てみると、

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

このようにURLを環境変数から読み込んでるので、blitzのコマンドから起動するようにします。

blitz prisma studio

Environment variables loaded from .env
Prisma schema loaded from db/schema.prisma
Starting Prisma Studio ...
Generating Prisma Client ... done
Prisma Studio is up on http://localhost:5555

起動したらhttp://localhost:5555を開くと以下の画面が表示されます。

Userを開きます。

このように１レコード増えていることがわかります。
余談ですが、追加されてたレコードがデフォルトでパスワードをハッシュ化して保持しているのすごいですね😊

HomePageを変えてみる

app/pages/index.tsxのHomeを以下の用に修正します

const Home: BlitzPage = () => {
  return (
    <div>
      <h1>Hello, world!</h1>

      <Suspense fallback="Loading...">
        <UserInfo />
      </Suspense>
    </div>
  )
}

ファイルを保存すると、ブラウザにページの更新が表示されます。