shadriz – Full Stack TypeScript Automation Inspired by Ruby on Rails

07.16.2024

UPDATE 2024-11-04. The project has been renamed to shadrizz (with an extra z). The new url is here: www.shadrizz.com.

UPDATE 2024-09-13. This article is obsolete. See the latest version of shadriz at www.shadriz.com.

I just released shadriz a Full Stack TypeScript Scaffolding Tool that is inspired by Ruby on Rails.

shadriz generates fully functional full stack Next.js code. Start with a fresh Next.js installation and generate components as you need.

Build prototypes in minutes instead of days. It’s free and open source.

What motivated me was my nostalgia for the days where you could run a scaffold command and have an entire full stack component generated for you.

What do I mean by full stack component? Well, the basic CRUD model, view, controller, routes, and database migrations.

It didn’t build the application for you. You still have to code the interesting parts of your program. But the boilerplate stuff was done. This was a huge time saver back in the day. It really saved you from having to remember all the nuances and syntax of writing front end and back end code from scratch.

Then the world moved to Node.js and TypeScript. I jumped on the bandwagon. Mainly because one of my first jobs hired me to do Ruby on Rails, but was switched to JavaScript projects within 2 weeks. Kind of a bait and switch, but turned out ok in the end.

As someone who starts a lot of side projects and teach a lot of courses in TypeScript, I found myself writing the same boilerplate code repetitively.

And I couldn’t find a solution that gave me the same Developer Experience as Ruby on Rails.

So I finally decided to solve the problem.

For the omakase today, you will be served:

  • Next.js – React Framework
  • shadcn/ui – UI Components
  • Drizzle ORM – Object Relation Mapper
  • TailwindCSS – CSS Framework
  • Auth.js – Authentication

Philosophy: The Best of Both Worlds in The Best of Two Worlds

In addition to Ruby on Rails, shadriz was greatly inspired by both shadcn/ui and Drizzle ORM. Hence the name shadriz.

In this section, I’ll try to justify my tech choices. But the TLDR; of it is that shadriz aims to be provide automations, convention over configuration, and maximum flexibility in customization.

The Front End: shadcn/ui

The beauty of shadcn/ui was not only that it provided good default styling on top of radix-ui components, but that it copies and pastes the components into your source code. Which means you have full control over the customization of the components.

If you’ve used enough third-party UI libraries, you know how hard it can be to customize a component that is hidden behind a third party package. And with headless UI libraries, it can be a lot of work to get them styled.

shadcn/ui strikes a good balance by leveraging radix ui, a headless UI library, and providing sensible and customizable styling defaults that are copied and pasted into your code. You have the best of both worlds when it comes to good-looking prebuilt styles and customizability.

The Back End: Drizzle ORM

Drizzle ORM also provides a best of both worlds approach with SQL-like and Relational Queries. Previously you had to choose between using a raw db driver like pg, a query builder like knex, or an ORM. There are many ORM options out there.

However, what made Drizzle stand out was that it not only provides both approaches, but it also provides many automations around database migrations, such as push schema and a traditional migrate command. I also like that the migrations are generated in plain SQL, as opposed to a package-specific DSL.

Furthermore, Auth.js has pretty good documentation with Drizzle Adapter setup. Even with a library like Auth.js doing much of the heavy lifting, there was still a good amount of boilerplate and configuration that is needed, which shadriz aims to automate.

Some example shadriz commands

With a few commands you can have a functional CRUD app.

Create a new project:

npx shadriz new demo

cd into the freshly generated Next.js app:

cd demo

Set up a Drizzle ORM:

npx shadriz db pg

Currently, shadriz supports pg, mysql2, and better-sqlite3, but may add more package support in the future.

Run a scaffold command:

npx shadriz scaffold post -d pg -c id:bigserial:pk title:varchar text:content created_at:default-now

And that’s it. You have a functional blog application with shadcn/ui components and a tanstack data table. Forms with zod validation. And server actions for creating, updating, and deleting records.

shadriz supports a variety of primary key configurations including uuidv7, uuidv4, and auto increment. The README contains all examples.

If you need authentication, shadriz also comes with an Auth.js automation:

npx shadriz auth google github credentials -d pg

Tutorial

shadriz Internals

shadriz is a fairly lightweight npm package. It doesn’t have many dependencies besides commanderjs, handlebars, and chalk. After all, we’re just automating the running of shell scripts and rendering templates.

If you prefer a different way of generating the code, the architecture of shadriz is fairly straightforward. There is a commanderjs entry point with several commands. Which kicks off several methods. The methods render out the handlebars templates based on what is passed into the CLI. Feel free to fork and create your own omakase.

If you want to see new features or prefer a different database package than one that is available, feel free to leave a github issue. Or fork the repo. PRs are welcome.

Conclusion

shadriz is a full stack typescript automation tool that generates fully functional Next.js code. With shadriz, you can build prototypes in minutes instead of days. shadriz was greatly inspired by Ruby on Rails. And it automates the setup process and code generation of shadcn/ui and Drizzle ORM, which shadriz was also inspired by. Free. Open Source.

Want to learn shadcn/ui, Drizzle ORM, TypeScript, and Next.js? Check out my Full Stack Book courses. 30+ hours of content for $8.