mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 01:40:13 -04:00
b9a09d8612
This is part two of a [PR breakdown](https://github.com/supabase/supabase/pull/42276) that introduces our connect schema and how content is retrieved. This focuses on the Framework tab to start. Fields are generated and content is rendered using a connect.schema file. This schema file defines modes, fields and steps. Each mode has a set of fields. Each field can be dependent on another field. The steps generated are then based off the values of the modes and fields. Each step can also render varying content dynamically using a template {{framework}}/{{frameworkVariant}}/{{library}} which just replaces those values with what's in state (fields selected). [Part one needs to be merged first.](https://github.com/supabase/supabase/pull/42367) The next stage will add back all other tabs and content. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * New Connect Sheet UI to guide app-to-project connections with dynamic configuration and copyable connection parameters. * Multi-framework & mobile support with ready-to-use code examples, install commands, and step-by-step setup for 20+ frameworks. * Multiple PostgreSQL connection methods (direct, transaction, session) with safe/masked connection previews. * Copy-prompt that aggregates step content and code for easy sharing. * **UI** * Multi-file code viewer with tabbed code blocks and added syntax support (Swift, TOML, HTML). * **Tests** * Comprehensive unit tests for resolver and state logic. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
154 lines
3.5 KiB
TypeScript
154 lines
3.5 KiB
TypeScript
export type Example = {
|
|
installCommands?: string[]
|
|
postInstallCommands?: string[]
|
|
files?: {
|
|
name: string
|
|
content: string
|
|
}[]
|
|
}
|
|
|
|
const examples = {
|
|
nodejs: {
|
|
installCommands: ['npm install postgres'],
|
|
files: [
|
|
{
|
|
name: 'db.js',
|
|
content: `import postgres from 'postgres'
|
|
|
|
const connectionString = process.env.DATABASE_URL
|
|
const sql = postgres(connectionString)
|
|
|
|
export default sql`,
|
|
},
|
|
],
|
|
},
|
|
golang: {
|
|
installCommands: ['go get github.com/jackc/pgx/v5'],
|
|
files: [
|
|
{
|
|
name: 'main.go',
|
|
content: `package main
|
|
|
|
import (
|
|
"context"
|
|
"log"
|
|
"os"
|
|
"github.com/jackc/pgx/v5"
|
|
)
|
|
|
|
func main() {
|
|
conn, err := pgx.Connect(context.Background(), os.Getenv("DATABASE_URL"))
|
|
if err != nil {
|
|
log.Fatalf("Failed to connect to the database: %v", err)
|
|
}
|
|
defer conn.Close(context.Background())
|
|
|
|
// Example query to test connection
|
|
var version string
|
|
if err := conn.QueryRow(context.Background(), "SELECT version()").Scan(&version); err != nil {
|
|
log.Fatalf("Query failed: %v", err)
|
|
}
|
|
|
|
log.Println("Connected to:", version)
|
|
}`,
|
|
},
|
|
],
|
|
},
|
|
dotnet: {
|
|
installCommands: [
|
|
'dotnet add package Microsoft.Extensions.Configuration.Json --version YOUR_DOTNET_VERSION',
|
|
],
|
|
postInstallCommands: [
|
|
'dotnet add package Microsoft.Extensions.Configuration.Json --version YOUR_DOTNET_VERSION',
|
|
],
|
|
},
|
|
python: {
|
|
installCommands: ['pip install python-dotenv psycopg2'],
|
|
files: [
|
|
{
|
|
name: 'main.py',
|
|
content: `import psycopg2
|
|
from dotenv import load_dotenv
|
|
import os
|
|
|
|
# Load environment variables from .env
|
|
load_dotenv()
|
|
|
|
# Fetch variables
|
|
USER = os.getenv("user")
|
|
PASSWORD = os.getenv("password")
|
|
HOST = os.getenv("host")
|
|
PORT = os.getenv("port")
|
|
DBNAME = os.getenv("dbname")
|
|
|
|
# Connect to the database
|
|
try:
|
|
connection = psycopg2.connect(
|
|
user=USER,
|
|
password=PASSWORD,
|
|
host=HOST,
|
|
port=PORT,
|
|
dbname=DBNAME
|
|
)
|
|
print("Connection successful!")
|
|
|
|
# Create a cursor to execute SQL queries
|
|
cursor = connection.cursor()
|
|
|
|
# Example query
|
|
cursor.execute("SELECT NOW();")
|
|
result = cursor.fetchone()
|
|
print("Current Time:", result)
|
|
|
|
# Close the cursor and connection
|
|
cursor.close()
|
|
connection.close()
|
|
print("Connection closed.")
|
|
|
|
except Exception as e:
|
|
print(f"Failed to connect: {e}")`,
|
|
},
|
|
],
|
|
},
|
|
sqlalchemy: {
|
|
installCommands: ['pip install python-dotenv sqlalchemy psycopg2'],
|
|
files: [
|
|
{
|
|
name: 'main.py',
|
|
content: `from sqlalchemy import create_engine
|
|
# from sqlalchemy.pool import NullPool
|
|
from dotenv import load_dotenv
|
|
import os
|
|
|
|
# Load environment variables from .env
|
|
load_dotenv()
|
|
|
|
# Fetch variables
|
|
USER = os.getenv("user")
|
|
PASSWORD = os.getenv("password")
|
|
HOST = os.getenv("host")
|
|
PORT = os.getenv("port")
|
|
DBNAME = os.getenv("dbname")
|
|
|
|
# Construct the SQLAlchemy connection string
|
|
DATABASE_URL = f"postgresql+psycopg2://{USER}:{PASSWORD}@{HOST}:{PORT}/{DBNAME}?sslmode=require"
|
|
|
|
# Create the SQLAlchemy engine
|
|
engine = create_engine(DATABASE_URL)
|
|
# If using Transaction Pooler or Session Pooler, we want to ensure we disable SQLAlchemy client side pooling -
|
|
# https://docs.sqlalchemy.org/en/20/core/pooling.html#switching-pool-implementations
|
|
# engine = create_engine(DATABASE_URL, poolclass=NullPool)
|
|
|
|
# Test the connection
|
|
try:
|
|
with engine.connect() as connection:
|
|
print("Connection successful!")
|
|
except Exception as e:
|
|
print(f"Failed to connect: {e}")`,
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
export default examples
|