Blitz.js is a fullstack React framework built on top of Next.js inspired by Ruby and Rails.

It includes everything from the database to your frontend all inside a single app. Only one development server. Only one thing to deploy.

Instead of having an API Layer, it allows you to import server code into your frontend and call it like like a normal function.

You will have one thing to deploy to a server or serverless.

In this collection, you will learn how to get started with Blitz.js. After watching this collection you will be able to:

* Create a new Blitzjs Project
* Create Pages
* Work with the database in your app

For Blitz.js to wrok properly you need to have *Node.js 12 or newer*.

You can create a new Blitz.js project using the Framework's cli tool.

### Install Blitz

Run `npm install -g blitz`

### Create a New App

1. `blitz new myApp`
1. `cd myApp`
1. `blitz start`
1. Navigate to your app at [http://localhost:3000](http://localhost:3000)




Create a new Blitz.js Project

In Blitz, a page is a React Component exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in a pages directory. Each page is associated with a route based on its file name.

*Example*: if you create a file under `app/pages/post` like below, it will be accessible at `/about` 

```js
const Post = () => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

export default Post
```

Unlike Next.js, you can have many `pages/` folders nested inside `app/`. This way pages can be organized neatly, especially for larger projects.


Create Pages in Blitz.js

Blitz supports pages with dynamic routes. For example, if you create a file called `app/pages/posts/[slug].tsx`, then it will be accessible at `posts/my-first-post`, `posts/my-second-post`, etc.

*Example*: If you create `app/pages/[slug].tsx` that exports a React component like below, it will be accessible at `/post/you-slug-param`.

```js
import { useParams } from "blitz"

const Post = () => {
  const params = useParams()
  return (
    <div>
      <h1>Post: {params.title}</h1>
    </div>
  )
}

export default Post

```

Using the `useParams` or `useParam` hooks provided by `blitz` to get the dynamic param and use it in your component.

Create Pages With Dynamic Routes in Blitz.js

By default, Blitz uses Prisma 2 which is a strongly typed database client.

__Prisma 2 is not required for Blitz. You can use anything you want, such as Mongo, TypeORM, etc.__

To add a Database Table you need to add a model to your `db/shcema.prisma` file.

*Example*:

```
model Post {
  id   Int  @default(autoincrement()) @id
  slug String @unique
  title String
  content String
}
```
Then run `blitz db migrate`. the cli will prompt you to name the migration, give it any name you want, and confirm.

After the migration is done you can explore your DB tables using `blitz db studio`.

__For local development using sqlite is very convenient as it is basically a file and it does not require any extra setup.__

Setup a database model in Blitzjs

In a classic App to read from the database, you need some code to run on a server layer somewhere and share the data via REST with your client code.
Blitz makes this process a lot easier using queries.

Blitz queries are plain, asynchronous JavaScript functions that always run on the server. Instead of calling an endpoint Blitz will allow you to import that code directly into your front end code so you don't need to build an API and do data fetching from the frontend. At build time, Blitz automatically inserts an API call that runs the server code on the server. Essentially, Blitz abstracts your API into a compile step.

__Queries must be inside queries folder__

*Example*:
* `app/queries/getPost.ts`
* `app/posts/queries/getPost`
* `app/admin/posts/queries/getPost`

To read from the database you can use the `db` package e.g `db.{modelName}.findOne`.

To a single post, your query should look like this

```js
import { NotFoundError } from "blitz"
import db, { FindOnePostArgs } from "db"

type GetPostInput = {
  where: FindOnePostArgs["where"]
}

export default async function getPost({ where }: GetPostInput) {
  const post = await db.post.findOne({ where })
  if (!post) throw NotFoundError
  return post
}
```

Another cool thing with Blitz is that React Concurrent Mode is enabled by default. So the `<Suspense>` component is used for loading states and <ErrorBoundary> is used to display errors. If you need, you can read the [React Concurrent Mode Docs](https://reactjs.org/docs/concurrent-mode-intro.html).

In order to use a query on your React component, you need to wrap them in `<Suspense>`.

*Example*:

```js
import { useParams, useQuery } from "blitz"
import getPost from "../../posts/queries/getPost"
import { Suspense } from "react"

const Post = () => {
  const params = useParams()
  const [post] = useQuery(getPost, { where: { slug: params.slug as string } })
  return (
    <div>
      <h1>Post: {post.title}</h1>
    </div>
  )
}

const PostPage = () => {
  return (
    <Suspense fallback={<span>Loading...</span>}>
      <Post />
    </Suspense>
  )
}

export default PostPage
```

Read Data from a DB model in Blitzjs

Similar to The Blitz queries, mutations are also are plain, asynchronous JavaScript functions that always run on the server. And they must be inside a `mutations` folder


__Mutations must be inside mutations folder__

*Example*:
* `app/mutations/createPost.ts`
* `app/posts/mutations/createPost.ts`
* `app/admin/posts/mutations/createPost.ts`

To write to the database you can use the `db` package e.g `db.{modelName}.create`.

*Example*:

```js
import db, { PostCreateArgs } from "db"

type PostCreateInput = {
  data: PostCreateArgs["data"]
}

export default async function ({ data }: PostCreateInput) {
  const post = await db.post.create({ data })

  return post
}
```

To use the mutation client-side you can import it into your React Component directly.

*Example*:

```js
import createPost from "app/posts/mutations/createPost"
const NewPost = () => {
  return (
    <form
      onSubmit={async (e) => {
        e.preventDefault()
        const post = await createPost({
          data: { title: "new Title", slug: "new-post", content: "some new content" },
        })
      }}
    >
      <button type="submit">Create a new Random Post</button>
    </form>
  )
}

export default NewPost
```

Getting Started with Blitz.js

Instructor

Course Content