├── .env-example ├── .gitignore ├── .vscode └── launch.json ├── LICENSE ├── README.md ├── USAGE.md ├── astro-supabase-starter-preview.png ├── astro.config.ts ├── netlify.toml ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── images │ ├── astro.svg │ ├── eleventy.svg │ ├── gatsby.svg │ ├── guides │ ├── deploy-button.png │ ├── supabase-netlify-connect-oauth.png │ ├── supabase-netlify-extension-configuration.png │ ├── supabase-netlify-import-csv.png │ ├── supabase-netlify-sql-editor.png │ └── web-frameworks.png │ ├── next.svg │ ├── nuxt.svg │ ├── remix.svg │ └── svelte.svg ├── renovate.json ├── src ├── components │ ├── Alert.astro │ ├── Footer.astro │ ├── Guide.astro │ ├── Header.astro │ ├── Layout.astro │ └── TableRow.astro ├── content.config.ts ├── content │ └── guides │ │ ├── guide-connect-supabase.md │ │ └── guide-fetch-data.md ├── pages │ ├── api │ │ └── frameworks │ │ │ └── [id] │ │ │ └── like.ts │ ├── frameworks │ │ └── [id].astro │ └── index.astro ├── styles │ └── globals.css └── utils │ └── database.ts ├── supabase ├── migrations │ └── 20240928104250_init-pets.sql ├── seed.csv └── types.ts └── tsconfig.json /.env-example: -------------------------------------------------------------------------------- 1 | SUPABASE_DATABASE_URL= 2 | SUPABASE_ANON_KEY= -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | 26 | # Local Netlify folder 27 | .netlify 28 | 29 | # Supabase 30 | supabase/.temp 31 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 netlify-templates 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Astro Supabase Starter 2 | 3 | ![Astro Supabase Starter Preview](astro-supabase-starter-preview.png) 4 | 5 | **View demo:** [https://astro-supabase-starter.netlify.app/](https://astro-supabase-starter.netlify.app/) 6 | 7 | The Astro Supabase starter demonstrates how to integrate **Supabase** into an Astro project deployed on Netlify. 8 | 9 | ## Deploying to Netlify 10 | 11 | If you click "Deploy to Netlify" button, it will create a new repo for you that looks exactly like this one, and sets that repo up immediately for deployment on Netlify. 12 | 13 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/astro-supabase-starter&fullConfiguration=true) 14 | 15 | ## Astro Commands 16 | 17 | All commands are run from the root of the project, from a terminal: 18 | 19 | | Command | Action | 20 | | :------------------------ | :----------------------------------------------- | 21 | | `npm install` | Installs dependencies | 22 | | `npm run dev` | Starts local dev server at `localhost:4321` | 23 | | `npm run build` | Build your production site to `./dist/` | 24 | | `npm run preview` | Preview your build locally, before deploying | 25 | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | 26 | | `npm run astro -- --help` | Get help using the Astro CLI | 27 | 28 | ## Developing Locally 29 | 30 | | Prerequisites | 31 | | :--------------------------------------------------------------------------- | 32 | | [Node.js](https://nodejs.org/) v18.14+ | 33 | | (optional) [nvm](https://github.com/nvm-sh/nvm) for Node version management | 34 | | [Netlify account](https://netlify.com/) | 35 | | [Netlify CLI](https://docs.netlify.com/cli/get-started/). | 36 | | [Supabase account](https://supabase.com/) | 37 | 38 | ### Set up the database 39 | 40 | To use this template, you’ll need to set up and seed a new Supabase database. 41 | 42 | 1. Create a new Supabase project. 43 | 2. Run the SQL commands found in the `supabase/migrations` directory in the Supabase UI. 44 | 3. To seed the database with data, you can import the contents of the `supabase/seed.csv` file in the Supabase UI. 45 | 46 | ℹ️ _Note: This template was created to be used with the Supabase extension for Netlify. If you don’t wish to use the Netlify Supabase extension, you will need to set the `SUPABASE_DATABASE_URL` and `SUPABASE_ANON_KEY` environment variables in the `.env` file._ 47 | 48 | ### Install and run locally 49 | 50 | 1. Clone this repository, then run `npm install` in its root directory. 51 | 52 | 2. For the starter to have full functionality locally, please ensure you have an up-to-date version of Netlify CLI. Run: 53 | 54 | ``` 55 | npm install netlify-cli@latest -g 56 | ``` 57 | 58 | 3. Link your local repository to the deployed Netlify site. This will ensure you're using the same runtime version for both local development and your deployed site. 59 | 60 | ``` 61 | netlify link 62 | ``` 63 | 64 | 4. Then, run the Astro.js development server via Netlify CLI: 65 | 66 | ``` 67 | netlify dev --target-port 4321 68 | ``` 69 | 70 | If your browser doesn't navigate to the site automatically, visit [localhost:8888](http://localhost:8888). 71 | 72 | ## Support 73 | 74 | If you get stuck along the way, get help in our [support forums](https://answers.netlify.com/). 75 | -------------------------------------------------------------------------------- /USAGE.md: -------------------------------------------------------------------------------- 1 | # Set up Supabase with Netlify Astro template 2 | 3 | In this guide we’re going to install and configure the Supabase Netlify extension, create Supabase project and fill the database with data. 4 | 5 | ## Set up Supabase database 6 | 7 | 1. Create Supabase account at [Supabase.com](https://supabase.com). 8 | 2. After signing up to your Supabase account, click New project from your dashboard. Select your organization, give the project a name, generate a new password for the database, and select the us-east-1 region. 9 | 10 | ## Create the frameworks table 11 | 12 | Once the database is provisioned, we can create the **frameworks** table. From your project dashboard, open the SQL editor. 13 | 14 | ![Create the frameworks table](/public/images/guides/supabase-netlify-sql-editor.png) 15 | 16 | Run the following commands in the SQL editor to create the **frameworks** table. 17 | 18 | ```sql 19 | CREATE TABLE frameworks ( 20 | id UUID PRIMARY KEY DEFAULT uuid_generate_v4(), 21 | name TEXT NOT NULL, 22 | url TEXT NOT NULL, 23 | description TEXT NOT NULL, 24 | logo TEXT NOT NULL, 25 | likes INTEGER NOT NULL DEFAULT 0, 26 | created_at TIMESTAMPTZ NOT NULL DEFAULT NOW() 27 | ); 28 | ``` 29 | 30 | ## Add data 31 | 32 | Next, let’s add some starter data to the **frameworks** table. From the Table Editor in Supabase (1), choose the **frameworks** table from the list (2) and then select **Insert > Import** data from CSV (3). 33 | 34 | ![Create the frameworks table](/public/images/guides/supabase-netlify-import-csv.png) 35 | 36 | Paste the following data: 37 | 38 | ```sql 39 | name,url,logo,likes,description 40 | Astro,https://astro.build/,astro.svg,0,"Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era." 41 | Eleventy,https://svelte.dev/,eleventy.svg,0,"Eleventy (11ty) is a flexible, minimalist static site generator that builds fast, content-driven websites using multiple templating languages and a zero-client-JavaScript philosophy." 42 | Gatsby,https://www.gatsbyjs.com/,gatsby.svg,0,"Gatsby.js is a React-based framework for building fast, SEO-friendly websites and applications with powerful data integration and static site generation capabilities." 43 | Next,https://nextjs.org/,next.svg,0,"Next.js enables you to create high-quality web applications with the power of React components." 44 | Nuxt,https://nuxt.com/,nuxt.svg,0,"Nuxt is an open source framework that makes web development intuitive and powerful. Create performant and production-grade full-stack web apps and websites with confidence." 45 | Remix,https://remix.run/,remix.svg,0,"Remix is a React framework designed for server-side rendering (SSR). Is a full-stack web framework, allowing developers to build both backend and frontend within a single app." 46 | Svelte,https://svelte.dev/,svelte.svg,0,"Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript." 47 | ``` 48 | 49 | This will give you a preview of the data that will be inserted into the database. Click **Import data** to add the data to the database. 50 | 51 | ## Install the Supabase Netlify extension 52 | 53 | Now we can install the [Supabase extension](https://app.netlify.com/extensions/supabase). In the Netlify UI, go to your team’s dashboard, navigate to **Extensions** and click on the Supabase extension. Click the install button to install the extension. 54 | 55 | ### Configure the Supabase extension 56 | 57 | After the extension is installed, navigate to the Supabase template site that you deployed, and go to **Site configuration**. In the **General** settings, you will see a new **Supabase** section. Click **Connect** to connect your Netlify site to your Supabase account using OAuth. 58 | 59 | ![Configure the Supabase extension](/public/images/guides/supabase-netlify-connect-oauth.png) 60 | 61 | Once you’ve completed this process, return to the Supabase section of your site configuration, and choose the project you just created in Supabase. And make sure to choose Astro for the framework since the template is built with Astro. 62 | 63 | ![Supabase Netlify extension configuration](/public/images/guides/supabase-netlify-extension-configuration.png) 64 | 65 | ## Deploy the site again 66 | 67 | Now that the extension is configured, we can deploy the site again. Got to **Deploys** (1) and click the **Deploy site** (2) button to deploy the site. 68 | 69 | ![Supabase Netlify extension configuration](/public/images/guides/deploy-button.png) 70 | 71 | Once the build is complete, navigate to your production URL and you should see the **frameworks** that we just added to the database. 72 | 73 | ![Template with data](/public/images/guides/web-frameworks.png) -------------------------------------------------------------------------------- /astro-supabase-starter-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/astro-supabase-starter-preview.png -------------------------------------------------------------------------------- /astro.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import netlify from '@astrojs/netlify'; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | export default defineConfig({ 6 | markdown: { 7 | shikiConfig: { 8 | theme: 'github-light-high-contrast', 9 | }, 10 | }, 11 | vite: { 12 | plugins: [tailwindcss()], 13 | server: { 14 | allowedHosts: ['.netlify.app'] 15 | } 16 | }, 17 | adapter: netlify() 18 | }); 19 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist" 3 | command = "npm run build" 4 | 5 | [template] 6 | required-extensions = ["supabase"] -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astro-supabase-starter", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro check && astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/check": "^0.9.4", 14 | "@astrojs/netlify": "^6.1.0", 15 | "@supabase/supabase-js": "^2.48.1", 16 | "@tailwindcss/vite": "^4.0.1", 17 | "astro": "^5.1.10", 18 | "typescript": "^5.6.3" 19 | }, 20 | "devDependencies": { 21 | "@tailwindcss/typography": "^0.5.16", 22 | "tailwindcss": "^4.0.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/favicon.ico -------------------------------------------------------------------------------- /public/images/astro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /public/images/eleventy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/images/gatsby.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/images/guides/deploy-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/images/guides/deploy-button.png -------------------------------------------------------------------------------- /public/images/guides/supabase-netlify-connect-oauth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/images/guides/supabase-netlify-connect-oauth.png -------------------------------------------------------------------------------- /public/images/guides/supabase-netlify-extension-configuration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/images/guides/supabase-netlify-extension-configuration.png -------------------------------------------------------------------------------- /public/images/guides/supabase-netlify-import-csv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/images/guides/supabase-netlify-import-csv.png -------------------------------------------------------------------------------- /public/images/guides/supabase-netlify-sql-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/images/guides/supabase-netlify-sql-editor.png -------------------------------------------------------------------------------- /public/images/guides/web-frameworks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/netlify-templates/astro-supabase-starter/a8436bddb93a7135854d3541c9451d3bab22c35d/public/images/guides/web-frameworks.png -------------------------------------------------------------------------------- /public/images/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/images/nuxt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /public/images/remix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /public/images/svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "local>netlify-templates/renovate-config" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Alert.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | title?: string; 4 | text?: string; 5 | variant?: "error" | "note"; 6 | } 7 | 8 | const { title, text, variant } = Astro.props; 9 | --- 10 | 11 |
19 | {title &&

{title}

} 20 | {text &&

{text}

} 21 | 22 | 27 | 32 | 33 |
34 | -------------------------------------------------------------------------------- /src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/components/Guide.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { type CollectionEntry, render } from "astro:content"; 3 | 4 | interface Props { 5 | guide: CollectionEntry<"guides">; 6 | } 7 | 8 | const { guide } = Astro.props; 9 | const { title } = guide.data; 10 | const { Content } = await render(guide); 11 | --- 12 | 13 |
14 |

15 | {title} 16 |

17 |
18 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /src/components/Header.astro: -------------------------------------------------------------------------------- 1 |
2 | 9 |
10 | -------------------------------------------------------------------------------- /src/components/Layout.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import "../../src/styles/globals.css"; 3 | import Footer from "./Footer.astro"; 4 | import Header from "./Header.astro"; 5 | 6 | interface Props { 7 | title: string; 8 | } 9 | 10 | const { title } = Astro.props; 11 | --- 12 | 13 | 14 | 15 | 16 | 17 | 18 | {title} 19 | 20 | 21 |
22 |
23 | 24 |
25 |