Blitz.js- A React.js Framework for Fullstack Apps
Tags: Blitzjs, Full Stack, Nextjs, React, App Development

By Payal Mittal

Blitz.js- A React.js Framework for Fullstack Apps

As technology is evolving, everyone is getting used to the simplicity it offers. The same thing is happening to the developers. With so many options available out there, the fresher developers keep looking for simpler options for web application development and the senior developers look forward to options that reduce the mundane manual work.

Ruby on Rails proved itself to be a major bundling force, after its release in 2005. Another major unbundling occurred with the release of React.js in 2013 which quickly become the driving force for rapid front-end development.

It was 2020 and almost the time for another major bundling, therefore the release of Blitz.

Blitz is the perfect choice for simpler web development, having a highly scalable architecture. It comes with all the boring stuff already configured and hence gives you a fun experience working with it.

In this blog, I’ll give you a brief insight into Blitz.js and its amazing features-

All About Blitz.js -

Blits.js is a battery-included, full-stack React framework built upon Next.js with a zero-API data layer, inspired by Ruby on Rails. Blitz is a simple method for building small as well as large full-stack applications with multiple graphical UIs.

“A Framework for building monolithic, full-stack, serverless React apps with zero data-fetching and zero client-side state management.”

It was created and released by Brandon Bayer on 24th April 2020. Brandon wanted to create something like Ruby on Rails but for React or JavaScript. He essentially announced the idea of Blitz on 17th February 2020 but he had only a few lines of prototype code at that time. Soon after, many people who were influenced by the idea came forward and offered their support to build its very first version.

We’ll see here what makes Blitz this special and what we can expect in the future from it, let’s get moving then-

What’s Special About Blitz.js?

Building a full-stack app is not at all an easy job. You have to spend a lot of time on things like figuring out the design pattern to use in the app, deciding a database to set up, setting up the configuration, deciding a folder structure, setting up the router/pages of the app, defining routing conventions, selecting a styling library and adding authorization and authentication at last.

All these things consume a great deal of time and patience, that too before even writing a single line of code.

Blitz is a blessing for the developer’s community as it is a lightning-fast framework that makes the development process far more productive than was ever possible. It comes with already configured Jest, Cypress, ESLint, Prettier, typescript, login, and password reset. It scaffolds the monolithic server-side rendered full-stack react app with all its configurations and backend already done.

Blitz Architecture

The list of features of Blitz goes on like this -

✔ Full-stack and Monolithic

Blitz includes everything from frontend to database, all inside a single app. You can deploy your backend and frontend separately on server or serverless likewise.

✔ Zero API Data Layer

React needed you to have a REST API or GraphQL API to work as a view layer, but not anymore. Blitz eliminates the need for API by introducing a new Zero-API data layer that can directly import your server code into React components, which is swapped with an auto-generated API at build-time. You can later use these APIs for apps and third-parties. It saves us from manually adding endpoints and do client-side fetching. This feature makes it faster and easier, that too, with an element of fun.

✔ Loose Opinions

Blitz is opinionated and when it does prefer convention, it doesn’t enforce it. It very well understands that there are reasons when you have to deviate from convention. It presents a perfect path for most applications but can diverge from it if needed.

✔ Convention over configuration

It means blitz prefers convention over configuration and does all the complex setup for you. With the simple architectural pattern and project structure, you can easily move from one Blitz app to another.

✔ Automatic image optimization

With its built-in image component Image, blitz optimizes images on-demand as per the user’s request. It resizes, optimizes, and serves images in modern WebP format and enables lazy-loading.

✔ Code Scaffolding

Blitz uses code scaffolding to reduce the code volume by scaffolding the initial code into your project. It gives you full ownership over the code and you can customize it as you wish. You would have unlimited design choices for your code. Blitz gives you a lot of blitz generate commands to scaffold code in your project. However, it is still in its early days and we will see a lot more to it in the upcoming versions.

Other features of blitz are -

Built-in CSS Support

Built-in authentication for session management

Built-in Support for Environment Variables

Automatic configuration of Jest for testing

Automatic static optimization

Server-side rendering

Code splitting

Easy to start and scale

The list does not end here. You can check more about its functionalities here.

Blitz CLI -

Blitz CLI (Command Line Interface) is the only way that you can interact with your application and enables you to build your project whatever way you want. To set up Blitz on your system, you would need Node.js 12 installed on your device.

You can install blitz globally via npm or yarn as given here -

# npm npm install -g blitz # Yarn yarn global add blitz

Some common Blitz CLI commands are given below -

To create a new blitz app, run -

blitz new blitz-app

To start the development server, run -

blitz dev

To create a production build of your app -

blitz build

Another command is to run db/seeds.ts script which quickly set up the dev environment, it is done by -

blitz db seed

For code scaffolding into your project, we use -

blitz generate [type] [model]

Here, type stands for the file types such as query , mutations , pages , crud , resources , etc., and model stands for the model-name to generate files for.

For instance, blitz generate all project will generate the following files -

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

To install blitz recipes (e.g. tailwind) into your project, run -

blitz install tailwind

The output will be as follows -

> blitz install tailwind ✅ Installed 2 dependencies ✅ Successfully created postcss.config.js, tailwind.config.js ✅ Successfully created app/styles/button.css, app/styles/index.css ✅ Modified 1 file: app/pages/_app.tsx 🎉 The recipe for Tailwind CSS completed successfully! Its functionality is now fully configured in your Blitz app.

There are many other commands that you can check here.

Routing in Blitz:

Blitz uses file-based routing such that all the components in pages/ and HTTP handlers in api/ are mapped to a URL.

- Index Routes

The file-based router automatically routes index files to the root directory, for example-

app/pages/index.js → /

app/pages/blog/index.js → /blog

- Nested Routes

The router also supports nested files so that when you create a nested folder, all the structure files are routed to the root directory as shown below-

app/pages/blog/first-post.js → /blog/first-post

app/pages/dashboard/settings/username.js →/dashboard/settings/ username

- API Routes

File inside an api/ folder is mapped to a URL corresponding to its path. For example- app/projects/api/webhook.ts will be mapped to localhost:3000/api/webhook

You can use useRouter() and withRouter() hooks to access the router. Check out the code below to use the useRouter hook -

import {useRouter} from "blitz"

function Thing({href}) {

const router = useRouter()

return (

<div

style={{

color: router.pathname === href ? "red" : "black",

}}

/>

)

}

export default Thing

Blitz has built-in i18n (internationalized) routing support and can handle all the locales automatically via sub-path routing and domain routing.

Check out the official documentation for Blitz.js here -