Pidrang 0.1.1: a working Angular admin from your Supabase schema

[fetrarij]

Pidrang 0.1.1: a working Angular admin from your Supabase schema

Pidrang 0.1.1 is on npm. With 0.1.0, pidrang init wrote the pages, but you still installed the packages, wired four files by hand, and could not save anything without writing a sign-in page. With 0.1.1, a fresh Angular app gets a working admin from one command:

ng new my-admin
cd my-admin
npx pidrang init

Answer the questions, put your Supabase publishable key in the two environment files, run ng serve. You get a list, create, show and edit page for each table you picked, delete, a sign-in page and a menu of your tables.

What init does now

• Installs what the pages need. It offers to install @pidrang/core, @pidrang/supabase, @pidrang/material and @supabase/supabase-js, and runs ng add @angular/material. Say no and it prints the exact commands.
• Wires the app. It registers Pidrang and the Supabase client in app.config.ts, adds the routes to app.routes.ts and writes both environment files. A file it cannot edit safely gets a comment with the change to make.
• Generates a sign-in page. When your Row Level Security policies only let signed-in users write, the app can now save. Signed out, the pages hide Create, Edit and Delete and the forms say "Sign in to make changes."
• Lands somewhere useful. On a new app, / opens the first list, and a layout shows a menu of your tables with a Sign in button.
• Reads your columns better. Readable labels, created_at and updated_at (also createdAt and updatedAt) read-only, lists newest first, and the "database default" hint on create only.
• Uses the current Supabase key names. Publishable and secret, as the dashboard shows them today. The secret key is only used to read your schema; it never goes into the app.
• Can run again. Run init later to add a table: it adds it to resources.ts and leaves the rest alone.

All the changes are in the changelog.

Known limits

• The generated CRUD pages use Angular Material. The sign-in page and the layout follow Tailwind when your app uses @pidrang/tailwind; Tailwind CRUD pages are planned (#61).
• A new app is over Angular's default 500 kB initial budget (#172).
• Dates show as raw ISO text (#187).
• If you run init again before setting the key, Next steps no longer reminds you to replace the placeholder (#192, planned for 0.1.2).

Try it, help shape it

• Live demos, on Angular Material and on Tailwind, built from 0.1.1.
• Getting started.
• Eight good first issues are open, each with the files to look at and what "done" means. A first pull request is welcome.
• Tell us what you are building in Discussions.

Pidrang is MIT licensed and pre-1.0: the API may still change between minor versions.