This site shows how you can use Supabase in an Astro project to store and display assets uploaded by users. It displays various pets and lets you look at their pages.
Deploy your own version of this example site, by clicking the button below. This will automatically:
- Clone a copy of this example from the examples repo to your own GitHub account
- Create a new project in your Netlify account, linked to your new repo
- Create an automated deployment pipeline to watch for changes on your repo
- Build and deploy your new site
Let's get the project up and running locally.
Begin by cloning the examples repository to your local development environment.
git clone [email protected]:netlify/examples
Move into the project directory for this example to continue.
cd examples/supabase-astro
Next, install the project dependencies by running the following command from the project directory.
npm install
Install the Netlify CLI to let you locally serve your site using Netlify's features. We'll do more with this shortly.
npm i -g netlify-cli
To use this with your own Supabase project, you'll need to set up and seed a new database.
- Create a new Supabase project.
- Run the SQL commands found in the
supabase/migrationsdirectory in the Supabase UI. - To seed the database with data, you can import the contents of the
supabase/seed.csvfile in the Supabase UI.
ℹ️ Note: This example was designed to be used with the Supabase extension for Netlify. If you aren't linked to a Netlify site using the extension, you will need to set the SUPABASE_DATABASE_URL and SUPABASE_ANON_KEY environment variables in the .env file.
Now you're ready to start the development server. Run the following command from the project directory.
netlify dev --target-port 4321
This will open the browser to http://localhost:8888 with your local development server running.
Explore other examples of using the Netlify platform and primitives (with or without a framework) in this examples repo.