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.
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.
After installing we see the current version number, which is 0.15.1 as of June 17, 2020.
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.
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.
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
Follow the next instruction and enter
blitz db migrate. You will be asked to enter a name for the migration. I named mine
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.
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.
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
If we return to our projects page we will see the new name reflected in the projects list.
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
db. This gives a clear boundary between your front end components and your backend data layer.
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
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. I'm providing screenshots of my editor instead of using markdown for the code snippets because markdown was having trouble with the syntax highlighting.
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.
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.