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.
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
Blitz is built upon Next.js which means you can leverage almost all the features of Next in it. I hope you got a basic idea about blitz through this blog.
Thanks a ton for reading this blog 👏😊!