Introduction to Blitz.js
Tags: react
Published: 2020-06-01 17:02:10

---
title: Introduction to Blitz.js
published: true
date: 2020-05-14 16:00:37 UTC
tags: react
canonical_url: https://blog.logrocket.com/introduction-to-blitz-js/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/t1495kd8quzlursn6f83.png
---
**Written by [Nathan Sebhastian](https://blog.logrocket.com/author/nathansebhastian/)**✏️

Creating a new React project requires a lot of configuration before you can start coding your application. That’s one of the major reasons why boilerplate libraries such as Create React App exist in the first place. But even with those libraries, there are still a lot of hoops jump through to build a complete web app.

For example, you have to determine what database you’ll use. And what about the server and backend? It’s enough to make you miss the old days of using Rails, where you just download the framework and everything was already there.

If you wish you could have a full-stack, database-backed structure while using React, you might want to check out [Blitz.js](https://github.com/blitz-js/blitz), a new framework for building monolithic React applications.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## A monolithic React framework

Blitz is a React framework that brings back the simplicity and convention of 2000s web frameworks like Rails and Laravel while still enabling you to write JSX syntax and render on the client side. It’s a great framework for small development teams that need to build and ship applications fast.

Let’s run down some of the main benefits of using Blitz.

- You don’t need to build APIs for fetching data in client-side rendering
- You can do client-side, server-side, and static page rendering from the same app
- React concurrent mode is enabled by default
- Includes CLI for code scaffolding, which is similar to how Rails can generate controllers and models
- Fully supports TypeScript with static, end-to-end typing
- Enables you to deploy serverless or serverful

The Blitz team also plans to add support for React Native and authentication in the future.

Just like Rails, Blitz is used for creating monolithic applications. This means you don’t have to create APIs just to fetch data from your server. You can create APIs later if you encounter third-party software that needs access to your system.

To get started, download Blitz with `npm install -g blitz` or `yarn global add blitz` if you’re using Yarn. Once downloaded, create your first Blitz app with `blitz new myBlitzApp`.

Inside the `myBlitzApp` directory, you’ll find a number of auto-generated files and directories that make up the [structure of a Blitz.js application](https://github.com/blitz-js/blitz/blob/canary/TUTORIAL.md#creating-a-project). Here’s a rundown of what these directories are used for:

![Blitz.js App Structure](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/blitz-js-app-structure.png?resize=720%2C487&ssl=1)

Some notes about the above:

- Most of your application code will go inside `app/` directory for obvious reasons. Since Blitz is a multipage application, you’ll save your pages here
- The `db/` directory is for your database configurations. It stores your schema and compiles the migrations output into the `migrations` folder
- The `node_modules/` directory is for installed dependencies
- The `public/` directory stores static assets, such as images and videos
- The `utils` directory stores shared utility code across your applications
- The “dotfiles” (`.babelrc.js`, `.env`, etc.) are for environment configurations
- There is a `blitz.config.js` file for advanced Blitz configuration. You can use it to customize the Webpack build, for example
- The `jobs/` directory might be for creating a cron service similar to Rails’ active job, but there is no documentation for that as of this writing

Creating a new Blitz app might take a while because it will automatically install its dependencies for you. Once the installation is finished, move into the `myBlitzApp` directory and run your Blitz app with the `blitz start` command.

Navigate to your [http://localhost:3000](http://localhost:3000) to see your Blitz index page.

![Blitz.js Index Page](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/blitz-js-index-page.png?resize=720%2C418&ssl=1)

Blitz supports TypeScript out of the box and uses `.tsx` syntax for all its generated files. The code for the index page above is at `app/pages/index.tsx`.

When using Create React App, you need to add React Helmet for inserting meta tags and React Router for moving to a different page. Since Blitz is built on Next.js, you can use its API, such as [head](https://nextjs.org/docs/api-reference/next/head) and [link](https://nextjs.org/docs/api-reference/next/link), to add meta tags and create anchor text.

```jsx
import {Head, Link} from 'blitz'
const Home = () => (
  <div className="container">
    <Head>
      <title>myBlitzApp</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <main>
        <Link href="/projects">
          <a>/projects</a>
        </Link>
    </main>
  </div>
)
export default Home
```

The concept of pages in Blitz is exactly the same as [Next.js pages](https://nextjs.org/docs/basic-features/pages), but unlike in Next.js, you can have multiple pages folders nested inside the `app` folder to organize them in a neat way.

All React components written inside the `pages/` folder will be accessible through its corresponding URL, so `pages/about.tsx` can be accessed from `localhost:3000/about`.

## Blitz database configuration

By default, Blitz use SQLite with Prisma 2 for its database client. That said, you can use whatever you want, like PostgreSQL or TypeORM. The default Prisma 2 schema is located on `db/schema.prisma`.

```jsx
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

datasource sqlite {
  provider = "sqlite"
  url      = "file:./db.sqlite"
}

// SQLite is easy to start with, but if you use Postgres in production
// you should also use it in development with the following:
//datasource postgresql {
//  provider = "postgresql"
//  url      = env("DATABASE_URL")
//}

generator client {
  provider = "prisma-client-js"
}


// --------------------------------------

//model Project {
//  id        Int      @default(autoincrement()) @id
//  name      String
//}
```

You can specify your models inside this schema and migrate the database using the `blitz db migrate` command. To see how this works, uncomment the `Project` model above, then run `blitz db migrate` and input your migration name. You can write anything for the migration name.

Next, automate the process of generating files from the model by running the `blitz generate` command from the terminal.

```jsx
blitz generate all project
```

The generated files will be logged into the console.

```jsx
CREATE    app\projects\pages\projects\index.tsx
CREATE    app\projects\pages\projects\new.tsx
CREATE    app\projects\pages\projects\[id]\edit.tsx
CREATE    app\projects\pages\projects\[id].tsx
CREATE    app\projects\queries\getProjects.ts
CREATE    app\projects\queries\getProject.ts
CREATE    app\projects\mutations\createProject.ts
CREATE    app\projects\mutations\deleteProject.ts
CREATE    app\projects\mutations\updateProject.ts
```

Since Blitz is still in the alpha stage as of this writing, it still lacks adequate documentation to explain the interaction between pages, queries, and the database under the hood. I’ve found some explanations of queries and mutations on [GitHub](https://github.com/blitz-js/blitz/issues/89). Simply put, Blitz queries and mutations are plain, asynchronous JavaScript functions that always run on the server.

## Conclusion

Documentation aside, Blitz.js certainly has the potential to reduce pain when developing apps with React — especially for developers who yearn for the old days when creating a new project meant simply running the `rails new` command.

With Blitz, you can deploy your application as a single entity and add advanced technologies on your terms and at your own pace.

If you’re interested in trying out Blitz for yourself, check out its [tutorial page](https://github.com/blitz-js/blitz/blob/canary/TUTORIAL.md).

* * * 
## Full visibility into production React apps 

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — [start monitoring for free.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [Introduction to Blitz.js](https://blog.logrocket.com/introduction-to-blitz-js/) appeared first on [LogRocket Blog](https://blog.logrocket.com).