Files
supabase/apps/docs/content/guides/getting-started/quickstarts/hono.mdx
T
2025-04-08 13:25:46 -04:00

92 lines
2.4 KiB
Plaintext

---
title: 'Use Supabase with Hono'
subtitle: 'Learn how to create a Supabase project, add some sample data to your database, secure it with auth, and query the data from a Hono app.'
breadcrumb: 'Framework Quickstarts'
hideToc: true
---
<StepHikeCompact>
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Create a Hono app">
Bootstrap the Hono example app from the Supabase Samples using the CLI.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
npx supabase@latest bootstrap hono
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={2}>
<StepHikeCompact.Details title="Install the Supabase client library">
The `package.json` file in the project includes the necessary dependencies, including `@supabase/supabase-js` and `@supabase/ssr` to help with server-side auth.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
npm install
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={3}>
<StepHikeCompact.Details title="Set up the required environment variables">
Copy the `.env.example` file to `.env` and update the values with your Supabase project URL and anon key.
Lastly, [enable anonymous sign-ins](https://supabase.com/dashboard/project/_/settings/auth) in the Auth settings.
<ProjectConfigVariables variable="url" />
<ProjectConfigVariables variable="anonKey" />
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
cp .env.example .env
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Start the app">
Start the app, go to http://localhost:5173.
Learn how [server side auth](/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=hono) works with Hono.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash name=Terminal
npm run dev
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
</StepHikeCompact>
## Next steps
- Learn how [server side auth](/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=hono) works with Hono.
- [Insert more data](/docs/guides/database/import-data) into your database
- Upload and serve static files using [Storage](/docs/guides/storage)