Meta tags:
description=Pidrang turns the tables of a Supabase project into an Angular admin: a list, create, show and edit page for each table, with sign-in. pidrang init reads...;

Headings (most frequently used words):

ui, app, getting, started, guide, layers, reference, maintainers, prerequisites, choose, your, path, new, existing, row, level, security, choosing, layer, troubleshooting, next, steps,

Text of the page (most frequently used words):
the (138), and (51), app (43), pidrang (23), with (22), sign (18), init (18), pages (17), page (17), your (17), routes (17), key (13), supabase (12), angular (11), resource (11), material (11), layout (11), new (11), table (10), not (9), project (9), that (9), src (9), when (9), tables (9), write (8), route (8), add (8), edit (7), top (7), see (7), read (7), has (7), existing (7), writes (7), tailwind (7), are (6), database (6), you (6), adds (6), run (6), its (6), one (6), every (6), create (6), yourself (5), layers (5), same (5), environment (5), from (5), url (5), file (5), router (5), navigation (5), outlet (5), for (5), later (5), list (5), show (5), core (4), still (4), publishable (4), secret (4), need (4), only (4), user (4), which (4), config (4), shows (4), already (4), html (4), components (4), cli (4), field (4), demo (4), getting (4), started (4), next (3), this (3), how (3), both (3), button (3), never (3), password (3), environments (3), supabasepublishablekey (3), rls (3), authentication (3), troubleshooting (3), missing (3), guards (3), opens (3), nothing (3), edited (3), build (3), set (3), own (3), path (3), above (3), welcome (3), content (3), css (3), each (3), signed (3), two (3), lists (3), leaves (3), anything (3), then (3), resources (3), declares (3), bash (3), reference (3), menu (3), form (3), column (3), whether (3), admin (3), refine (2), what (2), data (2), providers (2), architecture (2), hand (2), step (2), shown (2), connect (2), dashboard (2), formerly (2), anon (2), supabaseurl (2), error (2), plain (2), after (2), providesigninpath (2), below (2), everything (2), array (2), paths (2), resourceroutes (2), products (2), but (2), their (2), call (2), comment (2), line (2), providerouter (2), withcomponentinputbinding (2), does (2), development (2), match (2), change (2), cannot (2), warns (2), budget (2), sets (2), json (2), holds (2), replaces (2), template (2), needs (2), layer (2), row (2), level (2), security (2), again (2), guard (2), wrote (2), instead (2), generated (2), keeps (2), none (2), prints (2), other (2), entry (2), helpers (2), stops (2), rename (2), yours (2), asks (2), npx (2), fields (2), hide (2), primary (2), schema (2), into (2), else (2), generates (2), demos (2), artifacts (2), releasing (2), design (2), notes (2), maintainers (2), mit, licensed, inspired, affiliated, pager, github, contribute, contributing, planned, roadmap, fit, together, built, steps, requests, fail, invalid, api, reach, placeholders, point, another, hold, was, rotated, values, use, saving, says, may, returns, permission, text, prompt, configured, denying, access, login, empty, unsigned, private, found, sits, matches, belongs, fixed, changes, stays, blank, inputs, render, without, could, console, name, generate, auth, any, segment, ng04002, initial, bundle, exceeded, 500, client, starts, about, 690, even, though, load, lazily, warning, succeeds, raise, want, gone, budgets, maximumwarning, had, changed, renders, where, should, appear, expose, different, styling, theme, ships, global, stylesheet, setup, source, choosing, performs, authorization, guarantee, comes, policies, second, extends, earlier, names, those, opening, home, redirect, example, either, way, pathmatch, full, redirectto, things, stay, safely, exact, make, files, lines, registers, exists, before, move, questions, except, gets, unless, workspace, root, rendered, follows, otherwise, option, package, register, host, they, per, typed, label, turn, action, off, open, first, picked, link, http, localhost, 4200, serve, placeholder, replace, runs, browser, put, there, removes, writable, such, fills, unchanged, hasdefault, created_at, readonly, hidden, install, packages, among, yes, default, scaffold, actions, supports, delete, definitions, direct, connection, graphql, used, them, order, treats, just, created, wires, including, choose, working, examples, result, three, listed, dev, sb_publishable_, least, assumes, composite, differently, named, keys, supported, application, using, standalone, apis, creates, node, checks, message, prerequisites, turns, reads, overview, guide, sidebar, return, main, search, docs, skip,

Text of the page (random words):
getting started pidrang skip to content pidrang docs search k main navigation getting started reference core components ui layers cli maintainers design notes releasing demo artifacts demos menu return to top sidebar navigation guide getting started write the pages yourself authentication architecture data providers ui layers overview angular material tailwind css reference core components cli maintainers design notes releasing demo artifacts on this page getting started pidrang turns the tables of a supabase project into an angular admin a list create show and edit page for each table with sign in pidrang init reads your schema and generates it this page sets up a new app then an existing one to write the pages by hand instead see write the pages yourself prerequisites node js 22 22 3 or a later 22 x 24 15 0 or a later 24 x or 26 and later pidrang init checks it and stops with a plain message on anything else an angular 22 1 or a later 22 x application using standalone apis and the router as ng new creates it a supabase project with at least one table that has an id primary key column pidrang assumes id on every table composite or differently named keys are not supported the project url and the publishable key formerly anon sb_publishable_ shown by the connect button at the top of the supabase dashboard two working examples show the result demo material and demo tailwind the same three resources on the two ui layers listed at pidrang dev demos choose your path new app an app just created by ng new init generates and wires everything including a layout with a menu of the tables existing app an app with its own pages and routes init adds the pages and the routes next to yours and leaves the entry of the app to you no cli write the pages yourself with the same components init treats an app as new when src app app html still holds the welcome page of ng new and app routes ts declares no route anything else is an existing app new app bash ng new my admin cd my admin npx pidrang init init asks in order the project url of your supabase project how to read your table definitions the secret key a direct database connection or graphql with the publishable key the secret key and the database password are used to read the schema only init does not write them into the app the tables to scaffold the actions each one supports list create show edit delete and the fields to hide whether to add the navigation layout and the sign in page both yes by default and whether your tables need a signed in user to be read whether to install the packages the app is missing among pidrang core pidrang supabase supabase supabase js and pidrang material and to run ng add angular material hidden removes a field from the list and the edit form the create form shows every writable field and the show page keeps every field set readonly on a column only the database writes such as the primary key or created_at set hasdefault on a column the database fills when the create form leaves it unchanged it writes src environments environment ts and environment development ts with your project url and a placeholder for the key replace supabasepublishablekey in both with the publishable key of the project the app runs in the browser so never put the secret key or the database password there bash ng serve open http localhost 4200 the app opens on the list of the first table you picked or on the sign in page when your tables need a signed in user to be read the menu of the layout lists the tables and its sign in link opens sign in what init wrote src app resources ts one resource per table with its typed fields edit it to rename a label hide a field or turn an action off src app resource routes ts the routes resource resource create resource id and resource id edit with their guards and the sign in route src app pages and src app pidrang the list create show edit and sign in pages and the helpers they call src app layout the navigation layout app config ts app routes ts and app html edited to register pidrang add the routes and host the layout the pages are rendered with angular material the layout follows the ui layer of the app tailwind when package json declares pidrang tailwind angular material otherwise every file and every option is in the cli reference existing app from the workspace root of the app bash npx pidrang init it asks the same questions except the layout which an existing app never gets and the sign in page which it writes unless app routes ts already declares a sign in route then it writes resources ts resource routes ts the pages and the helpers as on a new app a file that already exists with other content stops init before it writes anything and lists the paths move or rename yours then run it again adds resourceroutes at the top of the routes array of app routes ts and registers pidrang and withcomponentinputbinding in app config ts replaces the welcome page of app html with router outlet and leaves a template that already has an outlet as it is writes the environment files when the app has none when it has init prints the supabaseurl and supabasepublishablekey lines to add to src environments environment ts when a file cannot be edited safely init adds a pidrang comment at its top that lists the exact change to make two things stay with you the entry of the app your own route keeps opening your home page when the app has none init prints the redirect to add above your other routes for example path pathmatch full redirectto products the generated pages are at table either way the sign in guard for the tables that need a signed in user to be read init adds the guard only on a new app or extends the one an earlier run wrote on an existing app it names those tables instead see guards on the generated routes to add a table later run init again see a second run row level security pidrang supabase performs no authorization every guarantee comes from your supabase rls policies see row level security choosing a ui layer pidrang material and pidrang tailwind expose the same components with different styling material needs a material theme tailwind ships no css and needs a source line in your global stylesheet see ui layers and angular material or tailwind css for the setup of each one troubleshooting the app still shows the angular welcome page app html still holds it init replaces that template with router outlet or the navigation layout if you had already changed the file and it has no outlet the page renders nothing below your content so add router outlet where the pages should appear ng build warns that the initial bundle exceeded its budget the budget ng new sets warns above 500 kb and an app with the supabase client angular material and the layout starts above it about 690 kb with the layout even though the pages load lazily it is a warning the build succeeds raise maximumwarning in the budgets of angular json if you want it gone the sign in button does nothing and the console shows the router error ng04002 cannot match any routes url segment sign in in a development build providesigninpath sign in is set but no sign in route is and the resource routes do not match a name that is not a resource run pidrang generate auth which writes the page and adds its route to resource routes ts add your own sign in page at sign in or change the path in app config ts the url changes but a page stays blank providerouter has no withcomponentinputbinding the pages read resource and id from their inputs and render nothing without it init adds it to the existing providerouter call if your app config could not be edited the pidrang comment at the top of the file shows the line to write products opens the not found route resourceroutes is missing from routes or sits below a route which matches everything it belongs at the top of the array with your fixed paths after it the table is empty see authentication troubleshooting rls on read only tables missing guards or an unsigned in user on a private table saving says you may need to sign in or returns a permission error see authentication troubleshooting plain text sign in prompt when providesigninpath is not configured or rls denying access after login requests fail with an invalid api key or do not reach supabase supabaseurl and supabasepublishablekey in src environments environment ts are still the placeholders point to another project or hold a key that was rotated both values are shown by the connect button at the top of your project s supabase dashboard use the publishable key formerly anon never the secret key or the database password next steps write the pages yourself the same pages built by hand step by step architecture how core the data providers and the ui layers fit together roadmap md what is planned contributing md how to contribute edit this page on github pager next page write the pages yourself mit licensed inspired by refine not affiliated with angular or refine pidrang