mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
docs: fix quickstart catalog gaps (#48618)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Docs update. Getting Started page is the most visited page in the docs at the moment: https://supabase.com/docs/guides/getting-started. Looking at all 19 guides, they appear to have drifted apart because there was never a written standard for what a quickstart must contain. Additionally, we are missing some frameworks, languages, and ORMs quickstarts. Phase 1 (this PR) fixes broken numbering, duplicated steps, and dead-end pages. Later phases bring all 19 guides into line with a single "definition of done" contract (error handling in samples, env vars everywhere, consistent Connect-panel pattern). The end goal is that every quickstart, regardless of framework, gives the same complete, trustworthy path from zero to a working app. ## What is the new behavior? 1. SvelteKit and Hono cards added to the [homepage grid](https://docs-git-docs-fix-quickstart-catalog-gaps-supabase.vercel.app/docs) (FrameworkQuickstarts.tsx). Only added the most popular missing frameworks to the grid. 2. [Rails](https://docs-git-docs-fix-quickstart-catalog-gaps-supabase.vercel.app/docs/guides/getting-started/quickstarts/ruby-on-rails#2-install-agent-skills-optional): Add missing second step (Agent Skills), add next steps at the end (point 6) 3. [Laravel](https://docs-git-docs-fix-quickstart-catalog-gaps-supabase.vercel.app/docs/guides/getting-started/quickstarts/laravel#6-set-up-the-postgres-connection-details): Remove duplicated instruction to create project from step 6. 4. [Refine](https://docs-git-docs-fix-quickstart-catalog-gaps-supabase.vercel.app/docs/guides/getting-started/quickstarts/refine#5-update-supabaseclient-with-environment-variables): In step 5, create .env file (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY), and the client reads them via import.meta.env, matching the Vite-based refine-supabase preset. 5. [Hono](https://docs-git-docs-fix-quickstart-catalog-gaps-supabase.vercel.app/docs/guides/getting-started/quickstarts/hono#6-set-up-the-required-environment-variables) TODO resolved: In step 6, add the "Open Connect panel" Button with the generic api_settings.mdx partial call, identical to the Flask and Expo pattern. 6. Next steps added to the 9 guides missing it at the end of the guide, linking to the framework tutorial or Auth, UI components, data import, and Storage (Flutter, Kotlin, Laravel, Nuxt, RedwoodJS, Refine, Ruby on Rails, SolidJS, and Vue). 7. Remove 4 stale screenshots from RedwoodJS and Refine, along with their now-orphaned image assets under apps/docs/public/img/. The surrounding text already covers what they showed; they weren't Connect-panel screens, so the Button pattern didn't apply as a replacement. 8. Add [Supabase Agent Skills](https://docs-git-docs-fix-quickstart-catalog-gaps-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#4-install-agent-skills-optional) purpose and benefits for the user 9. Start all guides from creating Supabase project ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Documentation - Added SvelteKit and Hono quickstarts with icons and documentation links. - Expanded Agent Skills guidance across framework quickstarts, including current authentication, SSR, and migration patterns. - Improved project creation, Connect panel, API configuration, and credential setup instructions. - Added framework-specific “Next steps” resources for Auth, database imports, Storage, UI components, and libraries. - Clarified PostgreSQL SSL, password encoding, connection, and environment-variable requirements. - Replaced outdated screenshots with clearer setup guidance and relevant examples. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Illia Basalaiev authored and GitHub committed
1 parent
9006e33f11
commit
5c5d7bcc63
26 files changed
+220
-106
No files matched your search
@@ -0,0 +1,11 @@
|
||||
## 1. Create a Supabase project
|
||||
|
||||
To start, you need a Supabase project.
|
||||
|
||||
Create a new Supabase project from [the Dashboard of any organization](/dashboard/new/_) you belong to.
|
||||
|
||||
<Admonition type="note" title="Want to create a project programmatically?">
|
||||
|
||||
Use [the Management API](/docs/reference/api/v1-create-a-project) or ask [the MCP server](/docs/guides/ai-tools/mcp#account-management) to create a new Supabase project.
|
||||
|
||||
</Admonition>
|
||||
@@ -23,17 +23,7 @@ on public.instruments
|
||||
for select to anon
|
||||
using (true);`
|
||||
|
||||
## 1. Create a Supabase project
|
||||
|
||||
To start, you need a Supabase project.
|
||||
|
||||
Create a new Supabase project from [the Dashboard of any organization](/dashboard/new/_) you belong to.
|
||||
|
||||
<Admonition type="note" title="Want to create a project programmatically?">
|
||||
|
||||
Use [the Management API](/docs/reference/api/v1-create-a-project) or ask [the MCP server](/docs/guides/ai-tools/mcp#account-management) to create a new Supabase project.
|
||||
|
||||
</Admonition>
|
||||
<$Partial path="quickstart_create_project.mdx" />
|
||||
|
||||
## 2. Set up your database
|
||||
|
||||
|
||||
@@ -17,10 +17,12 @@ npm create astro@latest my-app
|
||||
cd my-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -53,7 +55,7 @@ export default defineConfig({
|
||||
|
||||
## 7. Declare Supabase environment variables
|
||||
|
||||
Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=astro&tab=frameworks):
|
||||
Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=astro&connectTab=frameworks):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=astro">
|
||||
|
||||
@@ -16,10 +16,12 @@ Create a minimal Expo app using the `create-expo-app` command with the blank Typ
|
||||
npx create-expo-app my-app --template blank-typescript
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,10 +40,12 @@ cd my-app && npx expo install @supabase/supabase-js react-native-url-polyfill ex
|
||||
|
||||
## 6. Declare Supabase environment variables
|
||||
|
||||
Create a `.env` file in the root of your project and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true).
|
||||
Create a `.env` file in the root of your project and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=exporeactnative).
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=exporeactnative">
|
||||
Open Connect panel
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
Expo requires environment variables to be prefixed with `EXPO_PUBLIC_` to be accessible in your app code.
|
||||
@@ -51,7 +55,7 @@ EXPO_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
|
||||
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
|
||||
```
|
||||
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} />
|
||||
|
||||
## 7. Initialize the Supabase client
|
||||
|
||||
|
||||
@@ -18,10 +18,12 @@ python3 -m venv venv
|
||||
source venv/bin/activate
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -40,10 +42,12 @@ pip install flask supabase
|
||||
|
||||
## 6. Create environment variables file
|
||||
|
||||
Create a `.env` file in your project root and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true):
|
||||
Create a `.env` file in your project root and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=flask):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=flask">
|
||||
Open Connect panel
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
```text name=.env
|
||||
@@ -51,7 +55,7 @@ SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
|
||||
SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
|
||||
```
|
||||
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "flask", "tab": "frameworks" }} />
|
||||
|
||||
## 7. Query data from the app
|
||||
|
||||
|
||||
@@ -16,10 +16,12 @@ Create a Flutter app using the `flutter create` command.
|
||||
flutter create my_app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,7 +40,7 @@ supabase_flutter: ^2.0.0
|
||||
|
||||
## 6. Initialize the Supabase client
|
||||
|
||||
Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=flutter&tab=mobiles):
|
||||
Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=flutter&connectTab=mobiles):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=flutter">
|
||||
@@ -148,3 +150,10 @@ To do this, add the following line to the `android/app/src/main/AndroidManifest.
|
||||
<!-- ... -->
|
||||
</manifest>
|
||||
```
|
||||
|
||||
## Next steps
|
||||
|
||||
- Learn how to build a complete user management app with authentication in the [Flutter tutorial](/docs/guides/getting-started/tutorials/with-flutter)
|
||||
- Explore the [supabase-flutter](https://github.com/supabase/supabase-flutter) library on GitHub
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -16,10 +16,12 @@ Bootstrap the Hono example app from the Supabase Samples using the CLI.
|
||||
npx supabase@latest bootstrap hono
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -36,7 +38,7 @@ npm install
|
||||
|
||||
## 6. Set up the required environment variables
|
||||
|
||||
Copy the `.env.example` file to `.env` and update the values with your Supabase project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&tab=frameworks).
|
||||
Copy the `.env.example` file to `.env` and update the values with your Supabase project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&connectTab=frameworks).
|
||||
|
||||
Lastly, [enable anonymous sign-ins](/dashboard/project/_/auth/providers) in the Auth settings.
|
||||
|
||||
@@ -44,8 +46,11 @@ Lastly, [enable anonymous sign-ins](/dashboard/project/_/auth/providers) in the
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
{/* TODO: Not ideal for frameworks that have no entry in Connect */}
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "frameworks" }} />
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
|
||||
</Button>
|
||||
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
|
||||
|
||||
## 7. Start the app
|
||||
|
||||
|
||||
@@ -12,10 +12,12 @@ breadcrumb: 'Framework Quickstarts'
|
||||
|
||||
Select the **Xcode > New Project > iOS > App** menu item.
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -32,7 +34,7 @@ Make sure to add `Supabase` product package as a dependency to your application
|
||||
|
||||
## 6. Initialize the Supabase client
|
||||
|
||||
Create a new `Supabase.swift` file add a new Supabase instance using your project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=swift&tab=mobiles):
|
||||
Create a new `Supabase.swift` file add a new Supabase instance using your project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=swift&connectTab=mobiles):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=swift">
|
||||
@@ -109,3 +111,5 @@ If you want to implement authentication features like magic links or OAuth, you
|
||||
|
||||
- Learn how to build a complete user management app with authentication in the [Swift tutorial](/docs/guides/getting-started/tutorials/with-swift)
|
||||
- Explore the [supabase-swift](https://github.com/supabase/supabase-swift) library on GitHub
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -12,10 +12,12 @@ breadcrumb: 'Framework Quickstarts'
|
||||
|
||||
Select the **Android Studio > New > New Android Project** menu item.
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -64,7 +66,7 @@ You can create a Supabase client whenever you need to perform an API call.
|
||||
|
||||
For a quick example, create a client at the top of the `MainActivity.kt` file below the imports.
|
||||
|
||||
Replace the `supabaseUrl` and `supabaseKey` with your own, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=androidkotlin&tab=mobiles):
|
||||
Replace the `supabaseUrl` and `supabaseKey` with your own, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=androidkotlin&connectTab=mobiles):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=androidkotlin">
|
||||
@@ -156,3 +158,10 @@ fun InstrumentsList() {
|
||||
## 10. Start the app
|
||||
|
||||
Run the app on an emulator or a physical device by clicking the `Run app` button in Android Studio.
|
||||
|
||||
## Next steps
|
||||
|
||||
- Learn how to build a complete user management app with authentication in the [Kotlin tutorial](/docs/guides/getting-started/tutorials/with-kotlin)
|
||||
- Explore the [supabase-kt](https://github.com/supabase-community/supabase-kt) library on GitHub
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -18,10 +18,12 @@ See the [Laravel docs](https://laravel.com/docs/10.x/installation#creating-a-lar
|
||||
composer create-project laravel/laravel example-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -39,9 +41,7 @@ php artisan breeze:install
|
||||
|
||||
## 6. Set up the Postgres connection details
|
||||
|
||||
Go to [database.new](https://database.new) and create a new Supabase project. Save your database password securely.
|
||||
|
||||
When your project is up and running, navigate to your project dashboard and click on [Connect](/dashboard/project/_?showConnect=true&method=session).
|
||||
Navigate to your project dashboard and click on [Connect](/dashboard/project/_?showConnect=true&connectTab=direct&method=session).
|
||||
|
||||
Look for the Session Pooler connection string and copy the string. You will need to replace the Password with your saved database password. You can reset your database password in your [Database Settings](/dashboard/project/_/database/settings) if you do not have it.
|
||||
|
||||
@@ -53,7 +53,7 @@ If you're in an [IPv6 environment](https://github.com/orgs/supabase/discussions/
|
||||
|
||||
```bash name=.env
|
||||
DB_CONNECTION=pgsql
|
||||
DB_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
|
||||
DB_URL=postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-[REGION].pooler.supabase.com:5432/postgres
|
||||
```
|
||||
|
||||
## 7. Change the default schema
|
||||
@@ -77,10 +77,12 @@ The schema you specify in `search_path` has to exist on Supabase. You can create
|
||||
'prefix' => '',
|
||||
'prefix_indexes' => true,
|
||||
'search_path' => 'laravel',
|
||||
'sslmode' => 'prefer',
|
||||
'sslmode' => 'require',
|
||||
],
|
||||
```
|
||||
|
||||
Laravel ships with `sslmode` set to `prefer`, which sends your data in plaintext if the encrypted attempt fails. Set it to `require` so the connection fails instead. You can also [enforce SSL](/docs/guides/platform/ssl-enforcement) on the database side.
|
||||
|
||||
## 8. Run the database migrations
|
||||
|
||||
Laravel ships with database migration files that set up the required tables for Laravel Authentication and User Management.
|
||||
@@ -98,3 +100,9 @@ Run the development server. Go to http://127.0.0.1:8000 in a browser to see your
|
||||
```bash
|
||||
php artisan serve
|
||||
```
|
||||
|
||||
## Next steps
|
||||
|
||||
- Learn more about [Supabase Auth](/docs/guides/auth) if you want to replace Laravel's built-in authentication
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -16,10 +16,12 @@ Use the `create-next-app` command and the `with-supabase` template, to create a
|
||||
npx create-next-app -e with-supabase
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -28,7 +30,7 @@ npx skills add supabase/agent-skills
|
||||
|
||||
## 5. Declare Supabase environment variables
|
||||
|
||||
Rename `.env.example` to `.env.local` and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nextjs&tab=frameworks).
|
||||
Rename `.env.example` to `.env.local` and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nextjs&connectTab=frameworks).
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nextjs">
|
||||
|
||||
@@ -16,10 +16,12 @@ Create a Nuxt app using the `npx nuxi` command.
|
||||
npx nuxi@latest init my-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,7 +40,7 @@ cd my-app && npm install @supabase/supabase-js
|
||||
|
||||
## 6. Declare Supabase environment variables
|
||||
|
||||
Create a `.env` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nuxt&tab=frameworks):
|
||||
Create a `.env` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nuxt&connectTab=frameworks):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nuxt">
|
||||
@@ -110,3 +112,10 @@ npm run dev
|
||||
The community-maintained [@nuxtjs/supabase](https://supabase.nuxtjs.org/) module provides an alternate DX for working with Supabase in Nuxt.
|
||||
|
||||
</Admonition>
|
||||
|
||||
## Next steps
|
||||
|
||||
- Explore [drop-in UI components](/ui) for your Supabase app
|
||||
- Set up [Auth](/docs/guides/auth) for your app
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -16,10 +16,12 @@ Create a React app using a [Vite](https://vitejs.dev/guide/) template.
|
||||
npm create vite@latest my-app -- --template react
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,7 +40,7 @@ cd my-app && npm install @supabase/supabase-js
|
||||
|
||||
## 6. Declare Supabase environment variables
|
||||
|
||||
Create a `.env.local` file and populate it with your Supabase URL and publishable key that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=react&tab=frameworks)
|
||||
Create a `.env.local` file and populate it with your Supabase URL and publishable key that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=react&connectTab=frameworks)
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=react">
|
||||
|
||||
@@ -6,21 +6,13 @@ breadcrumb: 'Framework Quickstarts'
|
||||
|
||||
<AiPrompt id="redwoodjs" />
|
||||
|
||||
## 1. Setup your new Supabase project
|
||||
<$Partial path="quickstart_create_project.mdx" />
|
||||
|
||||
[Create a new project](/dashboard) in the Supabase Dashboard.
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
Be sure to make note of the Database Password you used as you will need this later to connect to your database.
|
||||
|
||||
</Admonition>
|
||||
|
||||
|
||||
Save your database password securely. You need it for the connection string.
|
||||
|
||||
## 2. Gather database connection strings
|
||||
|
||||
Open the project [**Connect** panel](/dashboard/project/_?showConnect=true). This quickstart connects using the [**Transaction pooler**](/dashboard/project/_?showConnect=true&method=transaction) and [**Session pooler**](/dashboard/project/_?showConnect=true&method=session) mode. Transaction mode is used for application queries and Session mode is used for running migrations with Prisma.
|
||||
Open the project [**Connect** panel](/dashboard/project/_?showConnect=true&connectTab=direct). This quickstart connects using the [**Transaction pooler**](/dashboard/project/_?showConnect=true&connectTab=direct&method=transaction) and [**Session pooler**](/dashboard/project/_?showConnect=true&connectTab=direct&method=session) mode. Transaction mode is used for application queries and Session mode is used for running migrations with Prisma.
|
||||
|
||||
To do this, set the connection mode to `Transaction` in the [Database Settings page](/dashboard/project/_/database/settings) and copy the connection string and append `?pgbouncer=true&connection_limit=1`. `pgbouncer=true` disables Prisma from generating prepared statements. This is required since our connection pooler does not support prepared statements in transaction mode yet. The `connection_limit=1` parameter is only required if you are using Prisma from a serverless environment. This is the Transaction mode connection string.
|
||||
|
||||
@@ -34,8 +26,6 @@ You can copy and paste these connection strings from the Supabase Dashboard when
|
||||
|
||||
</Admonition>
|
||||
|
||||
|
||||
|
||||
## 3. Create a RedwoodJS app
|
||||
|
||||
Create a RedwoodJS app with TypeScript.
|
||||
@@ -52,10 +42,12 @@ While TypeScript is recommended, If you want a JavaScript app, omit the `--ts` f
|
||||
yarn create redwood-app my-app --ts
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -75,11 +67,11 @@ In your `.env` file, add the following environment variables for your database c
|
||||
- The `DIRECT_URL` should use the Session mode connection string you copied in Step 2.
|
||||
|
||||
```bash name=.env
|
||||
# Transaction mode connection string used for migrations
|
||||
DATABASE_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
|
||||
# Transaction mode connection string — used by Prisma Client for app queries
|
||||
DATABASE_URL="postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-[REGION].pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
|
||||
|
||||
# Session mode connection string — used by Prisma Client
|
||||
DIRECT_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:5432/postgres"
|
||||
# Session mode connection string — used by Prisma Migrate
|
||||
DIRECT_URL="postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-[REGION].pooler.supabase.com:5432/postgres"
|
||||
```
|
||||
|
||||
## 7. Update your Prisma schema
|
||||
@@ -162,10 +154,14 @@ yarn rw g scaffold instrument
|
||||
|
||||
Start the app via `yarn rw dev`. A browser will open to the RedwoodJS Splash page.
|
||||
|
||||
|
||||
|
||||
## 13. View instruments UI
|
||||
|
||||
Click on `/instruments` to visit http://localhost:8910/instruments where should see the list of instruments.
|
||||
|
||||
You may now edit, delete, and add new instruments using the scaffolded UI.
|
||||
|
||||
## Next steps
|
||||
|
||||
- Set up [Auth](/docs/guides/auth) for your app
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -18,12 +18,12 @@ The `refine-supabase` preset adds `@refinedev/supabase` supplementary package th
|
||||
npm create refine-app@latest -- --preset refine-supabase my-app
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -32,7 +32,7 @@ npx skills add supabase/agent-skills
|
||||
|
||||
## 5. Update `supabaseClient` with environment variables
|
||||
|
||||
Update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your Supabase API, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=refine&tab=frameworks). The `supabaseClient` is used in auth provider and data provider methods that allow the Refine app to connect to your Supabase backend.
|
||||
Create a `.env` file and populate it with your Supabase URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=refine&connectTab=frameworks).
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=refine">
|
||||
@@ -40,11 +40,18 @@ Update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your S
|
||||
</a>
|
||||
</Button>
|
||||
|
||||
```text name=.env
|
||||
VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
|
||||
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
|
||||
```
|
||||
|
||||
Update `src/utility/supabaseClient.ts` to read the URL and publishable key from these environment variables. The `supabaseClient` is used in auth provider and data provider methods that allow the Refine app to connect to your Supabase backend.
|
||||
|
||||
```ts name=src/utility/supabaseClient.ts
|
||||
import { createClient } from '@refinedev/supabase'
|
||||
|
||||
const SUPABASE_URL = '<your-supabase-url>'
|
||||
const SUPABASE_KEY = '<your-supabase-publishable-key>'
|
||||
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL
|
||||
const SUPABASE_KEY = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
|
||||
|
||||
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
|
||||
db: {
|
||||
@@ -154,14 +161,18 @@ function App() {
|
||||
export default App
|
||||
```
|
||||
|
||||
## 8. View instruments pages
|
||||
## 8. Start the app
|
||||
|
||||
Start the app with the following command:
|
||||
Run the development server, go to http://localhost:5173/instruments in a browser, and you should see the instruments pages along the `/instruments` routes. You can edit and add new instruments using the Inferencer-generated UI.
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open http://localhost:5173/instruments in a browser, and you should be able to see the instruments pages along the `/instruments` routes. You can edit and add new instruments using the Inferencer generated UI.
|
||||
|
||||
The Inferencer auto-generated code gives you a good starting point on which to keep building your `list`, `create`, `show` and `edit` pages. You can get these by clicking the `Show the auto-generated code` buttons in their respective pages.
|
||||
|
||||
## Next steps
|
||||
|
||||
- Set up [Auth](/docs/guides/auth) for your app
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -6,7 +6,11 @@ breadcrumb: 'Framework Quickstarts'
|
||||
|
||||
<AiPrompt id="ruby-on-rails" />
|
||||
|
||||
## 1. Create a Rails project
|
||||
<$Partial path="quickstart_create_project.mdx" />
|
||||
|
||||
Save your database password securely. You need it for the connection string.
|
||||
|
||||
## 2. Create a Rails project
|
||||
|
||||
With your Ruby and Rails versions up to date, run `rails new` on your terminal to scaffold a new project.
|
||||
|
||||
@@ -16,27 +20,30 @@ Check the [Rails docs](https://guides.rubyonrails.org/getting_started.html) for
|
||||
|
||||
```bash
|
||||
rails new blog -d=postgresql
|
||||
cd blog
|
||||
```
|
||||
|
||||
## 3. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
npx skills add supabase/agent-skills
|
||||
```
|
||||
|
||||
## 3. Install MCP server (optional)
|
||||
## 4. Install MCP server (optional)
|
||||
|
||||
The Supabase MCP server connects AI assistants to Supabase, allowing you to interact with your projects on your behalf. Find out more on how to add it to your client in [the MCP docs](/docs/guides/ai-tools/mcp).
|
||||
|
||||
## 4. Set up the Postgres connection details
|
||||
## 5. Set up the Postgres connection details
|
||||
|
||||
Go to [database.new](https://database.new) and create a new Supabase project. Save your database password securely.
|
||||
Navigate to your project dashboard and click on [Connect](/dashboard/project/_?showConnect=true&connectTab=direct&method=session).
|
||||
|
||||
When your project is up and running, navigate to your project dashboard and click on [Connect](/dashboard/project/_?showConnect=true&method=session).
|
||||
|
||||
Look for the Session Pooler connection string and copy the string. You will need to replace the Password with your saved database password. You can reset your database password in your [Database Settings](/dashboard/project/_/database/settings) if you do not have it.
|
||||
Look for the Session Pooler connection string and copy the string. You will need to replace the Password with your saved database password, and [percent-encode](https://en.wikipedia.org/wiki/Percent-encoding) any reserved characters it contains, such as `&`, `#`, `?`, or a space. You can reset your database password in your [Database Settings](/dashboard/project/_/database/settings) if you do not have it.
|
||||
|
||||
<Admonition type="note">
|
||||
|
||||
@@ -44,11 +51,13 @@ If you're in an [IPv6 environment](https://github.com/orgs/supabase/discussions/
|
||||
|
||||
</Admonition>
|
||||
|
||||
```bash name=.env
|
||||
export DATABASE_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
|
||||
Set the connection string as an environment variable. Rails reads `DATABASE_URL` from the environment and connects with it, so you don't need to edit `config/database.yml`. The export applies to the current shell session, so run it in the same shell as the Rails commands in the following steps. `sslmode=require` stops the driver from falling back to sending your data in plaintext.
|
||||
|
||||
```bash
|
||||
export DATABASE_URL=postgres://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-[REGION].pooler.supabase.com:5432/postgres?sslmode=require
|
||||
```
|
||||
|
||||
## 5. Create and run a database migration
|
||||
## 6. Create and run a database migration
|
||||
|
||||
Rails includes Active Record as the ORM as well as database migration tooling which generates the SQL migration files for you.
|
||||
|
||||
@@ -59,7 +68,7 @@ bin/rails generate model Article title:string body:text
|
||||
bin/rails db:migrate
|
||||
```
|
||||
|
||||
## 6. Use the model to interact with the database
|
||||
## 7. Use the model to interact with the database
|
||||
|
||||
You can use the included Rails console to interact with the database. For example, you can create new entries or list all entries in a Model's table.
|
||||
|
||||
@@ -74,10 +83,16 @@ article.save # Saves the entry to the database
|
||||
Article.all
|
||||
```
|
||||
|
||||
## 7. Start the app
|
||||
## 8. Start the app
|
||||
|
||||
Run the development server. Go to http://127.0.0.1:3000 in a browser to see your application running.
|
||||
|
||||
```bash
|
||||
bin/rails server
|
||||
```
|
||||
|
||||
## Next steps
|
||||
|
||||
- Set up [Auth](/docs/guides/auth) for your app
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -16,10 +16,12 @@ Create a SolidJS app using the `degit` command.
|
||||
npx degit solidjs/templates/js my-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,7 +40,7 @@ cd my-app && npm install @supabase/supabase-js
|
||||
|
||||
## 6. Declare Supabase environment variables
|
||||
|
||||
Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=solidjs&tab=frameworks):
|
||||
Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=solidjs&connectTab=frameworks):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=solidjs">
|
||||
@@ -93,3 +95,9 @@ Start the app and go to http://localhost:3000 in a browser and you should see th
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Next steps
|
||||
|
||||
- Set up [Auth](/docs/guides/auth) for your app
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
@@ -13,7 +13,11 @@ Before you begin, make sure you have:
|
||||
- Java 17 or later, which you can check with `java -version`
|
||||
- `curl` and `unzip`, to download and extract the generated project
|
||||
|
||||
## 1. Create a Spring Boot project
|
||||
<$Partial path="quickstart_create_project.mdx" />
|
||||
|
||||
Save your database password securely. You need it for the connection string.
|
||||
|
||||
## 2. Create a Spring Boot project
|
||||
|
||||
Use [Spring Initializr](https://start.spring.io) to scaffold a new project with the Web, Spring Data JPA, and Postgres Driver dependencies. Run the following from the directory where you keep your projects.
|
||||
|
||||
@@ -29,7 +33,7 @@ curl https://start.spring.io/starter.zip \
|
||||
unzip instruments.zip -d instruments && cd instruments
|
||||
```
|
||||
|
||||
## 2. Install Supabase's Agent Skills (optional)
|
||||
## 3. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
@@ -41,11 +45,9 @@ To install, run the following command in the root of your project:
|
||||
npx skills add supabase/agent-skills
|
||||
```
|
||||
|
||||
## 3. Set up the Postgres connection details
|
||||
## 4. Set up the Postgres connection details
|
||||
|
||||
Go to [database.new](https://database.new) and create a new Supabase project. Save your database password securely.
|
||||
|
||||
When your project is up and running, navigate to its dashboard and click on [Connect](/dashboard/project/_?showConnect=true&method=session).
|
||||
Navigate to your project dashboard and click on [Connect](/dashboard/project/_?showConnect=true&connectTab=direct&method=session).
|
||||
|
||||
<Admonition type="caution">
|
||||
|
||||
@@ -64,7 +66,7 @@ You can reset your database password in your [Database Settings](/dashboard/proj
|
||||
The connection string contains your database password, and `application.properties` is committed with your project. Set the string as an environment variable instead, and set it the same way on whatever platform you deploy to.
|
||||
|
||||
```bash
|
||||
export SUPABASE_DB_URL='jdbc:postgresql://xxxx.pooler.supabase.com:5432/postgres?user=postgres.xxxx&password=[YOUR-PASSWORD]&sslmode=require'
|
||||
export SUPABASE_DB_URL='jdbc:postgresql://aws-[REGION].pooler.supabase.com:5432/postgres?user=postgres.[PROJECT-REF]&password=[YOUR-PASSWORD]&sslmode=require'
|
||||
```
|
||||
|
||||
The string you copied doesn't set `sslmode`, so add it. The driver defaults to `prefer`, which falls back to sending your data in plaintext if the encrypted attempt fails. You can also [enforce SSL](/docs/guides/platform/ssl-enforcement) on the database side.
|
||||
@@ -79,7 +81,7 @@ spring.jpa.hibernate.ddl-auto=update
|
||||
|
||||
If the app fails to start with `Unable to determine Dialect without JDBC metadata`, Hibernate couldn't open a connection at all. Look above that line in the logs for the real cause, most commonly `password authentication failed`.
|
||||
|
||||
## 4. Change the default schema
|
||||
## 5. Change the default schema
|
||||
|
||||
By default Hibernate creates tables in the `public` schema. We recommend changing this as Supabase exposes the `public` schema as a [data API](/docs/guides/api).
|
||||
|
||||
@@ -89,7 +91,7 @@ Create the schema from the [Table Editor](/dashboard/project/_/editor) as your a
|
||||
spring.jpa.properties.hibernate.default_schema=app
|
||||
```
|
||||
|
||||
## 5. Create an entity and repository
|
||||
## 6. Create an entity and repository
|
||||
|
||||
Spring Data JPA maps Java classes to database tables. Create an `Instrument` entity in `src/main/java/com/example/instruments/Instrument.java`. With `spring.jpa.hibernate.ddl-auto=update` set, Hibernate creates the `instruments` table for you when the app starts.
|
||||
|
||||
@@ -142,7 +144,7 @@ import org.springframework.data.jpa.repository.JpaRepository;
|
||||
public interface InstrumentRepository extends JpaRepository<Instrument, Long> {}
|
||||
```
|
||||
|
||||
## 6. Seed sample data
|
||||
## 7. Seed sample data
|
||||
|
||||
Add a `CommandLineRunner` bean to `InstrumentsApplication.java` that saves some sample instruments the first time the app starts.
|
||||
|
||||
@@ -174,7 +176,7 @@ public class InstrumentsApplication {
|
||||
}
|
||||
```
|
||||
|
||||
## 7. Query data from the app
|
||||
## 8. Query data from the app
|
||||
|
||||
Create an `InstrumentController` that fetches every row from the `instruments` table through the repository and returns it as JSON.
|
||||
|
||||
@@ -202,7 +204,7 @@ public class InstrumentController {
|
||||
}
|
||||
```
|
||||
|
||||
## 8. Start the app
|
||||
## 9. Start the app
|
||||
|
||||
Run the Spring Boot app, and go to http://localhost:8080/instruments in your browser. You should see the list of instruments.
|
||||
|
||||
|
||||
@@ -16,10 +16,12 @@ Create a SvelteKit app using the `npm create` command.
|
||||
npx sv create my-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,7 +40,7 @@ cd my-app && npm install @supabase/supabase-js
|
||||
|
||||
## 6. Declare Supabase environment variables
|
||||
|
||||
Create a `.env` file at the root of your project and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=sveltekit&tab=frameworks):
|
||||
Create a `.env` file at the root of your project and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=sveltekit&connectTab=frameworks):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=sveltekit">
|
||||
|
||||
@@ -16,10 +16,12 @@ Create a TanStack Start app using the official CLI.
|
||||
npx @tanstack/cli@latest create my-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
|
||||
@@ -16,10 +16,12 @@ Create a Vue app using the `npm init` command.
|
||||
npm init vue@latest my-app
|
||||
```
|
||||
|
||||
## 4. Install Agent Skills (optional)
|
||||
## 4. Install Supabase's Agent Skills (optional)
|
||||
|
||||
Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
|
||||
|
||||
Install them so your AI coding agent can produce more accurate, reliable code using current Supabase patterns, such as authentication, server-side rendering, and database migrations, rather than relying solely on training data.
|
||||
|
||||
To install, run the following command in the root of your project:
|
||||
|
||||
```bash
|
||||
@@ -38,10 +40,10 @@ cd my-app && npm install @supabase/supabase-js
|
||||
|
||||
## 6. Declare Supabase environment variables
|
||||
|
||||
Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=vue&tab=frameworks):
|
||||
Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=vuejs&connectTab=frameworks):
|
||||
|
||||
<Button variant="primary" asChild>
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=vue">
|
||||
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=vuejs">
|
||||
Open Connect panel
|
||||
</a>
|
||||
</Button>
|
||||
@@ -51,7 +53,7 @@ VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
|
||||
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>
|
||||
```
|
||||
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "vue", "tab": "frameworks" }} />
|
||||
<$Partial path="api_settings.mdx" variables={{ "framework": "vuejs", "tab": "frameworks" }} />
|
||||
|
||||
## 7. Create the Supabase client
|
||||
|
||||
@@ -102,3 +104,10 @@ Start the app and go to http://localhost:5173 in a browser and you should see th
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Next steps
|
||||
|
||||
- Explore [drop-in UI components](/ui) for your Supabase app
|
||||
- Set up [Auth](/docs/guides/auth) for your app
|
||||
- [Insert more data](/docs/guides/database/import-data) into your database
|
||||
- Upload and serve static files using [Storage](/docs/guides/storage)
|
||||
Reference in new issue
Block a user