おい、開発者

現在、ブリッツ.JSはユニークな特徴のために立ち上がる.同様に、typescriptはJavaScriptのスーパーセットですブリッツ.JSは次のスーパーセットのようです.js次のほとんどすべての機能.ジェッツワークス.jsも.

インデックス

Introduction

Features

Installation

Routing in Blitz.js

Building Project Management Application

Tailwind CSS (Recipe)

Clean Up

Creating files (Code Scaffolding)

Database(Prisma)

What we learned today?

導入

電撃によると.JSチーム、ブリッツは、Ruby on Railsに触発されたバッテリーを含むフレームワークです.そして、「ゼロAPI」を特徴とします🤯 REST/Graphqlの必要性を排除するデータ層抽象化.
ブリッツ.JSは次の上に構築されたフレームワークです.JSは、すべての退屈なものはすでにあなたのために設定が付属しています!eslintと同様に、jest、ユーザーのサインアップ、ログイン、およびパスワードをリセットします.

ブリッツ.JSは非常に柔軟である間、ルーティング、ファイル構造と認証のために役に立つデフォルトと規則を提供します.

機能

フルスタック＆モノリシック
ブリッツ.JSは、あなたが簡単にサーバーまたはSerlilessのようなNetLifyまたはVercelのように保存することができますレコード時間で完全なスタックのアプリを構築するために、単一のアプリケーションですべてのプリセットされたフロントエンドにデータベースが付属しています.

必須ではないAPI
バックエンドからデータを取得する代わりに、サーバーコードを直接コンポーネントにインポートします.ビルド時に、その関数インポートは自動生成されたHTTP APIでスワップアウトされます.
生成されたAPIはまた、アプリケーション＆サードパーティによって使用することができます.

ゆるい意見
電撃で.JSは、あなたが使用できる何かをプラグインする無料です.ブリッツ.JSは特定のライブラリのみを使用するよう命令しません.例えば、デフォルトでは、blit.あなたは他の人に快適に感じるならば、あなたは他を使うことができます.

構成上の協定
ブレイク.JSはすべての退屈なセットアップとデフォルトの設定を行います.共通のプロジェクト構造と建築パターンは、1つの電撃アプリから別のに移動し、すぐに自宅で感じる.

簡単に、簡単にスケールを開始する
それは簡単に使用して、次の移行に簡単です.電撃へのJSアプリケーション.jsアプリ.
簡単にすべてのフォームでスケール:コードの行、コードベースで動作する人々の数、およびコードの実行.

レシピ
レシピは、ブリッツの美しい機能の一つです.jsレシピを使用すると、簡単にコマンドの1行でサードパーティ製ライブラリを設定することができます.
例えば:blitz install tailwind あなたのために風を設定します.

テスト
テストは電撃で事前設定されます.jsブリッツ.JSはテスト用のJestを使用します.

ファーストクラスのタイプサポート
ブリッツ.jsは完全にtypescriptで構築され、電撃データ層は完全にエンドツーエンドtypesafeです.すべての型は完全に別の型生成プロセスを必要とせずに静的です!

インストール

ブリッツ.JSは、新しい電撃アプリ、コード足場、および多くを作成するための独自の強力なCLIを持っています.
ブリッツでの作業を開始します.あなたはノードを持たなければなりません.JSバージョン12またはあなたのPCに新しいインストールされます.インストールされたJSNode.js official documentation あなたのシステムにインストールするには.
次のコマンドを実行して、blitz CLIをグローバルにインストールします.

yarn global add blitz # yarn

npm install -g blitz --legacy-peer-deps # npm 

While installing Blitz CLI with npm --legacy-peer-deps is needed because npm totally change the behavior of peer dependencies, and some dependencies haven't caught up

よく行うと、あなたのマシンにblitz CLIをインストールしました.今、あなたはAを実行してそれをチェックすることができますblitz -v コマンド.
あなたはこのようなものを得る必要があります.でもsystem option , binaries path , and blitz versions 異なるかもしれません.

➜ blitz -v
Linux 5.11 | linux-x64 | Node: v14.17.3

blitz: 0.39.0 (global)
blitz: 0.39.0 (local)

  Package manager: yarn 
  System:
    OS: Linux 5.11 Pop!_OS 20.04 LTS
    CPU: (4) x64 Intel(R) Core(TM) i3-5005U CPU @ 2.00GHz
    Memory: 146.59 MB / 3.76 GB
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.3/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: Not Found
    blitz: ^0.39.0 => 0.39.0 
    prisma: Not Found
    react: Not Found
    react-dom: Not Found
    typescript: Not Found

エラーが発生した場合は、comment section , きっとそれを解決しようと思います.
アフターblitz cli がインストールされ、新しい電撃アプリを作成しましょう.
ブリッツCLIを使用して、新しい電撃アプリを作成することができます.

blitz new your-amazing-app-name

Protip: If you don't want to install blitz CLI locally, you can even use it with the following command.

npx blitz new your-amazing-app-name

Blitz uses the alpha version of React, so you can use the features of the alpha release like <Suspense>.

さて、次のコマンドを実行して、Blitzアプリケーションを実行できます.

yarn dev # yarn

npm run dev # npm

あなたがブラウザを開いたとき、あなたはこのようなものを見るべきですhttp://localhost:3000 .

あなたがサインアップしようとすると、電撃をチェックするにログインしてください.デフォルトの認証設定.
今すぐシンプルなプロジェクト管理アプリケーションを構築することによって学びましょう.

ブリッツにおけるルーティングjs

電撃から.JSは次の上に構築されます.JSは、次のように同じファイルベースのルーティングを使用します.js
電撃参照.jsRouting docs を参照してください.

プロジェクト管理アプリケーションの構築

我々は、電撃の多くのクールな機能を使用します.JSこのアプリケーションを構築中.私たちは、スタイルのためのTruwind CSSを使用します、データベースのためのSQLite(デフォルトでPrismaであらかじめ設定される)、およびデフォルト認証システム.

CSS

このチュートリアルでは、スタイルのためにTruwind CSSを使用しています.このプロジェクトではTruwind CSSを使用していますRecipe .
プロジェクトフォルダで次のコマンドを実行し、電撃のレシピの魔法を参照してください.

blitz install tailwind

Tailwindセットアップが完了すると、このようなものが表示されます.

そして、あなたのプロジェクトのフォルダを参照してくださいpostcss.config.js , tailwind.config.js , and app/core/styles/index.css .

tailwind.config.js tailwind構成を含みます.デフォルト使用のブリッツjit Cookieにおけるモード

postcss.config.js PostCSS構成を含みます.

app/core/styles/index.css スタイルを含みます.

/* index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .hero {
    @apply w-full text-[#333];
  }
}

.title {
  @apply m-0 w-full pt-20;
  font-size: 48px;
}

.title,
.description {
  @apply text-center;
}

セットアップのセットアップは、単一のコマンドで完了します.それは電撃のレシピの魔法です.

クリーンアップ（ブリッツアプリケーションをクリーンアップしましょう）

クリーンアップするには

app/pages/index.tsx ファイル.

app/api -> このプロジェクトのAPIルートを作成していないので

app/pages/projects フォルダ

app/projects フォルダ

You might get a question when we're building a Project Management application then why the heck we are removing the projects folder too.
The reason is, I want to show you the code scaffolding feature by blitz.js.

このプロジェクトのファイルを作成する

Aを作るapp/pages/index.tsx 以下の内容をファイルにします.

import { BlitzPage } from "blitz"
import Layout from "app/core/layouts/Layout"
/*
 * This file is just for a pleasant getting started page for your new app.
 * You can delete everything in here and start from scratch if you like.
 */
const Home: BlitzPage = () => {
  return <></>
}

Home.suppressFirstRenderFlicker = true
Home.getLayout = (page) => <Layout title="Home">{page}</Layout>

export default Home

その後、インデックスページにデータを表示するために他のコンポーネントを使用します.
私たちのプロジェクトはプロジェクトマネジメントに関するものです.これにより、ユーザーはプロジェクトを作成し、認証されたユーザーによって作成されたプロジェクトを取得し、プロジェクトを更新し、それらを削除して、それらのプロジェクトに関連するタスクを管理できます.我々は、すべてのCRUD操作をカバーします.
これらの操作のために必要なファイルを作成する必要があります.
次のコマンドを実行して魔法を見てください.

blitz generate all project

どうするか
これは、ページ、クエリ、突然変異を生成し、Prismaモデルproject .
これは次のファイルを生成します.

app/pages/projects/[projectId]/edit.tsx
app/pages/projects/[projectId].tsx
app/pages/projects/index.tsx
app/pages/projects/new.tsx

app/projects/components/ProjectForm.tsx

app/projects/queries/getProject.ts
app/projects/queries/getProjects.ts
app/projects/mutations/createProject.ts
app/projects/mutations/deleteProject.ts
app/projects/mutations/updateProject.ts

Prismaスキーマを更新します.
これで、プロジェクト関連のページにアクセスできます.

/projects/some-id/edit
/projects/some-id
/projects/index
/projects/new

プロジェクト関連タスクのページはapps/pages/projects フォルダ、そのコンポーネントはapps/projects/components , そしてバックエンドの論理はapp/projects/queries and app/projects/mutations .

Prisma migrate devを実行するかどうか尋ねます.現在、我々は我々を編集しなければなりませんschema.prisma ファイル.

prisma migrate dev will update your database with the schema blitz generated.

上で述べたように、タスクを管理するためのファイルも必要です.
そのためには、次のコマンドを実行します.

blitz generate all task --parent project

このコマンドは何でしょうか?
このコマンドはいくつかのファイルを生成します:

app/pages/projects/[projectId]/tasks/[taskId].tsx
app/pages/projects/[projectId]/tasks/[taskId]/edit.tsx
app/pages/projects/[projectId]/tasks/index.tsx
app/pages/projects/[projectId]/tasks/new.tsx

app/tasks/components/TaskForm.tsx

app/tasks/queries/getTask.ts
app/tasks/queries/getTasks.ts
app/tasks/mutations/createTask.ts
app/tasks/mutations/deleteTask.ts
app/tasks/mutations/updateTask.ts

プロジェクトとタスクは1対多の関係を持つので、すべてのタスクはプロジェクトに関連します.だから、我々はtasks with the parent of project .

データベース

電撃から.JSはPrismaとSQLiteをあらかじめ設定しています.
オープンユアdb/schema.prisma ファイルと置換Project and Task 以下のモデル.

model Project {
  id          Int      @id @default(autoincrement())
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  name        String
  description String
  tasks       Task[]
}

model Task {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  project   Project  @relation(fields: [projectId], references: [id])
  projectId Int
}

Install Prisma Vs code extension for syntax highlighting, formating, auto-completion, jump-to-definition and linting for .prisma files.

次のコマンドを実行してデータベースを更新します.

blitz prisma migrate dev

さて、この移行に名前を付けます.何でも書けます.タイプしますcreate_project_tasks_table .

Protip: You can view the GUI for managing the database by the command blitz prisma studio.

From here you can select the model.

これは今日のみんな、明日、私は完全なアプリケーションを構築する次の記事が付属します.

今日学んだこと

電撃機の設置js

レシピの使用

データベースの使用

コード足場

ここまで読んでくれてありがとう.