diff --git a/apps/docs/components/FrameworkQuickstarts.tsx b/apps/docs/components/FrameworkQuickstarts.tsx index 06ca4142d5c..d4939b72455 100644 --- a/apps/docs/components/FrameworkQuickstarts.tsx +++ b/apps/docs/components/FrameworkQuickstarts.tsx @@ -42,6 +42,16 @@ const frameworks = [ icon: '/docs/img/icons/nuxt-icon', href: '/guides/getting-started/quickstarts/nuxtjs', }, + { + name: 'SvelteKit', + icon: '/docs/img/icons/svelte-icon', + href: '/guides/getting-started/quickstarts/sveltekit', + }, + { + name: 'Hono', + icon: '/docs/img/icons/hono-icon', + href: '/guides/getting-started/quickstarts/hono', + }, { name: 'iOS Swift', icon: '/docs/img/icons/swift-icon-orange', diff --git a/apps/docs/content/_partials/quickstart_create_project.mdx b/apps/docs/content/_partials/quickstart_create_project.mdx new file mode 100644 index 00000000000..6c69ed6260f --- /dev/null +++ b/apps/docs/content/_partials/quickstart_create_project.mdx @@ -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. + + + +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. + + diff --git a/apps/docs/content/_partials/quickstart_db_setup.mdx b/apps/docs/content/_partials/quickstart_db_setup.mdx index 4c42ce98745..6f507e53ff1 100644 --- a/apps/docs/content/_partials/quickstart_db_setup.mdx +++ b/apps/docs/content/_partials/quickstart_db_setup.mdx @@ -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. - - - -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. - - +<$Partial path="quickstart_create_project.mdx" /> ## 2. Set up your database diff --git a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx index 34167ca1d6e..9608dee6f51 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx @@ -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): 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= EXPO_PUBLIC_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 diff --git a/apps/docs/content/guides/getting-started/quickstarts/flask.mdx b/apps/docs/content/guides/getting-started/quickstarts/flask.mdx index 72b6594f860..ebd2d3d54e1 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/flask.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/flask.mdx @@ -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): ```text name=.env @@ -51,7 +55,7 @@ SUPABASE_URL= 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 diff --git a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx index ec829974b57..aea4acd5281 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx @@ -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): + +<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} /> ## 7. Start the app diff --git a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx index 6d0c15d2f74..99ed3f1d351 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx @@ -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): +```text name=.env +VITE_SUPABASE_URL= +VITE_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 = '' -const SUPABASE_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) diff --git a/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx b/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx index b513a76961a..dc79d96a58e 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx @@ -6,7 +6,11 @@ breadcrumb: 'Framework Quickstarts' -## 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. @@ -44,11 +51,13 @@ If you're in an [IPv6 environment](https://github.com/orgs/supabase/discussions/ -```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) diff --git a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx index bbab847700b..5b6b9662471 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx @@ -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): @@ -51,7 +53,7 @@ VITE_SUPABASE_URL= VITE_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) diff --git a/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/new-project.png b/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/new-project.png deleted file mode 100644 index 85d58b26c0d..00000000000 Binary files a/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/new-project.png and /dev/null differ diff --git a/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png b/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png deleted file mode 100644 index ef60a412a6b..00000000000 Binary files a/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png and /dev/null differ diff --git a/apps/docs/public/img/redwoodjs-qs-splash.png b/apps/docs/public/img/redwoodjs-qs-splash.png deleted file mode 100644 index 750e5ad68f3..00000000000 Binary files a/apps/docs/public/img/redwoodjs-qs-splash.png and /dev/null differ diff --git a/apps/docs/public/img/refine-qs-welcome-page.png b/apps/docs/public/img/refine-qs-welcome-page.png deleted file mode 100644 index 4ae06c3ad37..00000000000 Binary files a/apps/docs/public/img/refine-qs-welcome-page.png and /dev/null differ