DEV Community

Cover image for a first look at blitz.js

a first look at blitz.js

ajcwebdev profile image anthonyCampolo Updated on ・4 min read

In this article I've documented my first time installing and setting up a Blitz.js application.

I've structured the article to reflect the actual process I go through when experimenting with a new framework for the first time. I stick to the path laid out in the official docs tutorial, but as I go through each step I reference the documentation for each command or component. This helps me build a mental model of the framework instead of just copy-pasting commands and code snippets.


I will start at the very beginning and assume no prior knowledge of Blitz. The first step is to install Blitz globally to my system.

npm install -g blitz
Enter fullscreen mode Exit fullscreen mode

After installing we see the current version number, which is 0.15.1 as of June 17, 2020.


Generating a Blitz App

This command generates a new Blitz project in the current directory.

blitz new ajcwebdev
Enter fullscreen mode Exit fullscreen mode

It will include scaffolding for a landing page, a database, and other configurations to quickly get up and running.


cd ajcwebdev
blitz start
Enter fullscreen mode Exit fullscreen mode

Follow the instructions and cd into your project folder. Then enter blitz start to start the server. The server starts in development mode by default.


After starting the server open a web browser and enter localhost:3000 into the address bar. If you've done everything correctly up to this point you'll see the Blitz starter page.


Scaffolding a Project

This command scaffolds code into your project.

blitz generate all project name:string
Enter fullscreen mode Exit fullscreen mode

It can generate pages, queries, and mutations. Press ctrl-c to stop your server and then enter the command.


blitz db migrate
Enter fullscreen mode Exit fullscreen mode

You will be asked to enter a name for the migration. I named mine initialize-database.


Blitz reads the schema file located at db/schema.prisma and runs migrations to update tables and columns to match what's in your schema file. It generates your Prisma Client code and enables you to have typesafe access to your database.


A datamodel is created that will initialize your database.


After the migration finishes a few metrics will be given and your Prisma Client will be generated.


Create New Project

Returning to our home page, if we click the link for /projects we'll be routed to localhost:3000/projects. This page contains a link to create a project.


We are now on a page that lets us create a new project and submit it to our database.


After clicking the submit button the browser gives an alert confirming the successful entry of the project including an autogenerated id, timestamps for createdAt and updatedAt, and a project name.


Return to the projects page and click on your new project. This will take you to a new route created using the autogenerated id of the project.


Edit Project

The edit button takes you to an edit route.


Click submit and we will be given an alert with the updated project. The project name is now MyNewName instead of MyName.


If we return to our projects page we will see the new name reflected in the projects list.


Delete Project

If we click the delete button instead of edit we will be given a warning message letting us know it will be deleted.


Our projects list is now empty.


Here is the high level structure of our entire project. The most important thing to note at this point is the separation between app and db.


Since we are responsible developers the first thing we do is go to the README. The README provides instructions for the commands that we used earlier to get our application set up, blitz db migrate and blitz start.


Our app folder contains folders for components, layouts, pages, and projects.


Lets start in our index.tsx file which contains our Home component. I have collapsed most of the HTML and CSS to focus on the overall structure of the component.


We'll edit this page and see what happens. I'm removing all Blitz specific content with the exception of the footer and adding a few simple header and paragraph tags.


With those changes lets return to our landing page.


In the next article we will look at the projects folder containing the files that implement our default CRUD operations and the db folder which has our default database configuration.


Editor guide