loading...
Cover image for a first look at blitz.js

a first look at blitz.js

ajcwebdev profile image anthonyCampolo Updated on ・5 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

The Blitz docs will give the command npm install -g blitz but for my environment I have to also include sudo at the beginning of my install command because of how I've configured Node. Node by default has privileged access to your computer and while that's almost never a problem on rare occasions it turns out to be a really big problem. The sudo command tells Node on my computer that I did intend to give Blitz the ability to do whatever it needs to do to get set up.

01-sudo-npm-install-global-blitz

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

02-blitz-version-0.15.1

blitz new

This command generates a new Blitz project in the current directory. It will include scaffolding for a landing page, a database, and other configurations to quickly get up and running.

03-blitz-new-ajcwebdev

04-create-blitz-app

blitz start

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.

05-blitz-start

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.

06-localhost-blitz-page

blitz generate

This command scaffolds code into your project. It can generate pages, queries, and mutations. Press ctrl-c to stop your server and then enter blitz generate all project name:string

07-blitz-generate-all-project-name-string

blitz db migrate

Follow the next instruction and enter blitz db migrate. You will be asked to enter a name for the migration. I named mine initialize-database.

08-blitz-db-migrate

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.

09-prisma-migrate

A datamodel is created that will initialize your database.

10-datamodel

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

11-import-prisma-client

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.

12-projects-route

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

13-create-new-project

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.

14-202-create-success

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.

15-project-1-json

The edit button takes you to an edit route.

16-edit-project-1

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

17-202-success-update

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

18-projects-myNewName

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

19-delete-warning

Our projects list is now empty.

20-projects-no-projects

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. This gives a clear boundary between your front end components and your backend data layer.

21-file-structure

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.

22-readme

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

23-app

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. I'm providing screenshots of my editor instead of using markdown for the code snippets because markdown was having trouble with the syntax highlighting.

24-pages-index.tsx

Lets 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.

25-edit-pages-index.tsx

With those changes lets return to our landing page.

26-edited-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.

Discussion

markdown guide