Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kazuph/remix-ginnan-stack
๐ Remix + Hono template for Cloudflare Pages with Shadcn UI, Drizzle ORM and Supabase
https://github.com/kazuph/remix-ginnan-stack
cloudflare-pages drizzle hono remix-stack supabase
Last synced: 16 days ago
JSON representation
๐ Remix + Hono template for Cloudflare Pages with Shadcn UI, Drizzle ORM and Supabase
- Host: GitHub
- URL: https://github.com/kazuph/remix-ginnan-stack
- Owner: kazuph
- Created: 2024-12-02T14:15:42.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-17T05:01:46.000Z (17 days ago)
- Last Synced: 2024-12-17T06:18:06.869Z (17 days ago)
- Topics: cloudflare-pages, drizzle, hono, remix-stack, supabase
- Language: TypeScript
- Homepage:
- Size: 626 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ๐ Remix Ginnan Stack
A web application template powered by Remix and Hono, designed to run on Cloudflare Pages.
## ๐ Getting Started
### Using this template
You can create a new project based on this template using the following command:
```bash
npx create-remix@latest --template kazuph/remix-ginnan-stack
```
After the project is created:
1. Copy `.dev.vars.example` to `.dev.vars`
2. Update environment variables in `.dev.vars`
3. Run `pnpm install` to install dependencies
4. Run `pnpm dev` to start the development server
## ๐ Tech Stack
### ๐ Framework & Runtime
- ๐ต Remix v2.15.0
- โ๏ธ Cloudflare Pages
- ๐ Hono Adapter v0.5.2
### ๐พ Database & ORM
- ๐ Supabase (PostgreSQL)
- ๐ Drizzle ORM
- ๐ Database Migrations
### ๐จ UI/UX Libraries
- โ๏ธ React v18.2.0
- ๐ญ Tailwind CSS
- ๐ฏ Shadcn UI - Beautiful and accessible components
- ๐ฏ Radix UI Components
- ๐ช Lucide React Icons
- โจ Tailwind CSS Animate
### ๐ง Development Tools
- ๐ TypeScript
- โก๏ธ Vite
- ๐ ESLint
- ๐ป Node.js v20+
## ๐ Prerequisites
### PostgreSQL Client (psql) Installation
#### macOS
```bash
# Homebrewใไฝฟ็จใใๅ ดๅ
brew install postgresql@14
# ใพใใฏใPostgreSQLใฏใฉใคใขใณใใฎใฟใใคใณในใใผใซใใๅ ดๅ
brew install libpq
echo 'export PATH="/opt/homebrew/opt/libpq/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
```
#### Linux (Ubuntu/Debian)
```bash
sudo apt-get update
sudo apt-get install postgresql-client
```
## ๐ง Environment Setup
1. Copy `.dev.vars.example` to `.dev.vars`:
```bash
cp .dev.vars.example .dev.vars
```
2. Update the `DATABASE_URL` in `.dev.vars` with your Supabase PostgreSQL connection string:
```
DATABASE_URL="postgresql://postgres:[email protected]:5432/postgres"
```
## ๐ Available Commands
```bash
# Development
pnpm run dev # ๐ฅ Start Vite development server
pnpm run preview # ๐ Preview build with Wrangler
# Build & Deploy
pnpm run build # ๐ฆ Build Remix application
pnpm run deploy:pages # ๐ Build and deploy to Cloudflare Pages
# Database Operations
pnpm run db:generate # ๐ Generate Drizzle migration files
pnpm run db:migrate # ๐ Run Drizzle migrations
pnpm run db:push # ๐ค Push schema changes to database
pnpm run db:seed # ๐ฑ Seed database with initial data
pnpm run db:studio # ๐ฎ Open Drizzle Studio
# Type Checking & Generation
pnpm run typecheck # โ
Run TypeScript type checking
pnpm run typegen # ๐ Generate Wrangler types
pnpm run cf-typegen # โ๏ธ Generate Cloudflare types
# Others
pnpm run start # ๐ Start Wrangler development server
pnpm run lint # ๐ Run ESLint code quality checks
pnpm run format # ๐จ Run Biome code formatting
```
## โจ Features
- ๐ฏ Remix v3 Features Enabled
- ๐ Single Fetch Optimization
- ๐พ Fetcher Persistence
- ๐ฃ Relative Splat Paths
- ๐ Lazy Route Discovery
- โ๏ธ Cloudflare Pages Optimization
- ๐ Hono Adapter Integration
- ๐ Database Features
- ๐ Automatic migrations with Drizzle
- ๐ Type-safe database operations
- ๐ฎ Database management via Drizzle Studio
## ๐ Requirements
- ๐ป Node.js v20 or higher
- ๐ฆ pnpm
- ๐ Supabase Project (for PostgreSQL database)
- ๐ PostgreSQL Client (psql)
## ๐ Database Management
### Migrations
1. Make changes to your schema in `app/schema.ts`
2. Generate migration files:
```bash
pnpm run db:generate
```
3. Apply migrations:
```bash
pnpm run db:migrate
```
### Push Schema Changes
To directly push schema changes without generating migration files:
```bash
pnpm run db:push
```
### Database Studio
To manage your database through a GUI:
```bash
pnpm run db:studio
```
### Seeding Data
To populate your database with initial data:
```bash
pnpm run db:seed
```
Note: Seeding requires the PostgreSQL client (psql) to be installed on your system. See the Prerequisites section for installation instructions.