Files
supabase/apps/docs/content/_partials/quickstart_db_setup.mdx
T
192a736d7f docs: Remove two pane layout from quickstarts and rearrange the content (#47398)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary

- **Documentation**
- Reworked API settings content to recommend client libraries for
auto-generated Data API endpoints, refreshed authentication/URL
guidance, and streamlined API keys messaging.
- Updated shared setup partials and restructured the database quickstart
with clearer dashboard/management API steps and expanded SQL/RLS
snippets.
- Updated multiple framework quickstarts to use consistent section-based
layouts and refreshed environment-variable instructions across guides.

- **Chores**
- Expanded MDX heading-case lint allowlist for common framework names
(Astro, Flask, Node, Rails, TanStack Start).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

## How to test

Run the docs site locally:

```bash
pnpm install
pnpm dev:docs   # serves on http://localhost:3001
```

Then start with the **Next.js quickstart**, which exercises every change
in this PR:

👉 http://localhost:3001/docs/guides/getting-started/quickstarts/nextjs

Verify on that page:

- [ ] **"Get API details"** section now renders **before** the "Declare
environment variables" step, and shows the live **Project URL** +
**publishable key** helper widgets (moved into the shared
`api_settings.mdx` partial).
- [ ] The shadcn/ui **"Explore Components"** CTA appears in the **"Query
data"** section (not up top in the create-app step).
- [ ] The API keys deprecation notice still renders, and there are no
broken/empty partial includes.

### Where to find the rest

All other framework quickstarts got the same treatment and live in the
same folder — just swap the framework slug in the URL:


`http://localhost:3001/docs/guides/getting-started/quickstarts/<framework>`

`reactjs`, `vue`, `nuxtjs`, `astrojs`, `tanstack`, `solidjs`,
`sveltekit`, `expo-react-native`, `flutter`, `kotlin`, `ios-swiftui`,
`flask`, `hono`, `refine`, `redwoodjs`, `ruby-on-rails`

Things that vary by framework (worth a quick spot-check across a
couple):

- **UI CTA** kept only on React-DOM frameworks (Next.js, React,
TanStack, Astro); removed from non-React / React Native (Vue, Nuxt,
SolidJS, SvelteKit, Expo).
- **Mobile guides** (Flutter, Kotlin, iOS SwiftUI): the "Get API
details" partial renders *after* the client-init code block, so the key
helper widgets show below the snippet rather than beside it.
- **Redwood, Hono, Refine, Laravel** Are quite different from the other
quickstarts, so I didn't touch them as much and they need some further
thought.

Because the edited `api_settings.mdx` partial is shared, these
non-quickstart pages also render it and are worth a glance:

- Auth quickstarts:
`/docs/guides/auth/quickstarts/{nextjs,react,react-native,astrojs}`
- `/docs/guides/auth/server-side/creating-a-client`
- `/docs/guides/realtime/getting_started`
- Getting-started setup guides that pull in `project_setup.mdx` /
`kotlin_project_setup.mdx`

---------

Co-authored-by: awaseem <8704380+awaseem@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Miranda Limonczenko <miranda.limonczenko@supabase.io>
Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>
2026-07-02 11:10:47 +00:00

136 lines
4.5 KiB
Plaintext

export const sqlSetup = ` -- Create the table
create table instruments (
id bigint primary key generated always as identity,
name text not null
);
-- Insert sample data into the table
insert into instruments (name)
values
('violin'),
('viola'),
('cello');
-- Grant the privileges the role needs, which is read access
grant select on public.instruments to anon;
-- Enable row level security for the table
alter table instruments enable row level security;
-- Create a policy to allow the anon role to read from the instruments table
create policy "public can read instruments"
on public.instruments
for select to anon
using (true);`
## 1. Create a Supabase project
Before you can use Supabase, you need a Supabase project. You can create a project visually in the Dashboard or programmatically using [the Management API](/docs/reference/api/introduction).
<Tabs scrollable size="small" type="underlined" defaultActiveId="dashboard" queryGroup="create-project">
<TabPanel id="dashboard" label="Dashboard">
Create a new Supabase project from [the Dashboard of any organization](/dashboard/new/_) you belong to.
<Admonition type="tip">
You can also use [database.new](https://database.new) to create a new Supabase project.
</Admonition>
</TabPanel>
<TabPanel id="management-api" label="Management API">
First, get your access token from the [**Account Settings > Access Tokens**](/dashboard/account/tokens) section of the Dashboard.
Then create a project using [the Management API](/docs/reference/api/introduction):
```bash
export SUPABASE_ACCESS_TOKEN="your-access-token"
# List your organizations to get the organization ID
curl -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
https://api.supabase.com/v1/organizations
# Create a new project (replace <org-id> with your organization ID)
curl -X POST https://api.supabase.com/v1/projects \
-H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
"organization_id": "<org-id>",
"name": "My Project",
"region": "us-east-1",
"db_pass": "<your-secure-password>"
}'
```
</TabPanel>
</Tabs>
## 2. Set up your database
When your Supabase project is up and running, create an `instruments` table with some sample data.
Then set a secure baseline by setting only the privileges each Postgres role needs, add [Row Level Security (RLS)](/docs/guides/database/postgres/row-level-security) for enhanced security for database data by default, and create an RLS policy to make the data in your table publicly readable.
You can click this button to prefill all the SQL needed in [the SQL editor of your project](/dashboard/project/_/sql) in the Dashboard.
<Button variant="primary" asChild>
<a href={`/dashboard/project/_/sql/new?content=${encodeURIComponent(sqlSetup)}`}>Prefill SQL</a>
</Button>
<Accordion
type="default"
openBehaviour="single"
chevronAlign="right"
justified
size="medium"
className="text-foreground-light mt-8 mb-6"
>
<AccordionItem
header="Want to learn more about the SQL and add it manually?"
id="manual-sql"
>
Run the following snippet in your project's [SQL Editor](/dashboard/project/_/sql/new). You can also choose the SQL and prefill it from the **Reference > Samples** menu at the side of the SQL Editor.
```sql SQL_EDITOR
-- Create the table
create table instruments (
id bigint primary key generated always as identity,
name text not null
);
-- Insert sample data into the table
insert into instruments (name)
values
('violin'),
('viola'),
('cello');
-- Grant the privileges the role needs, which is read access
grant select on public.instruments to anon;
-- Enable row level security for the table
alter table instruments enable row level security;
-- Create a policy to allow the anon role to read from the instruments table
create policy "public can read instruments"
on public.instruments
for select to anon
using (true);
```
</AccordionItem>
</Accordion>
<Admonition type="note" label="Disabled the Data API during project setup?">
If you disabled the Data API during project setup, enable it in the [**Integrations > Data API**](/dashboard/project/_/integrations/data_api/settings) section of the Dashboard and expose the specific tables or functions you want to access. To automatically grant access for new tables and functions in `public`, enable **Automatically expose new tables**.
</Admonition>