Remix + Supabase + Cloudflare starter

A highly opinionated full-stack starter monorepo.

• Package management: pnpm
• Build system: Turborepo
• CI/CD: GitHub Actions
• Language: Typescript
• Web: Remix
• UI: Mantine (using v7 alpha since the switch to static CSS works better with SSR)
• DB: Supabase
• Hosting: Cloudflare Pages
• Server runtime: Cloudflare Workers

Getting started

You'll likely want to duplicate this repo, rather than forking it:

# First, create a blank NEW_REPO on GitHub.

# Make a bare clone
git clone --bare https://github.com/plotday/resupaflare.git
cd resupaflare.git
git push --mirror https://github.com/USERNAME/NEW_REPO.git
cd ..
rm -rf resupaflare

# Clone the new repo
git clone https://github.com/USERNAME/NEW_REPO.git
cd NEW_REPO
git remote add resupaflare https://github.com/plotday/resupaflare.git
git grep -l '@resupaflare' | xargs sed -i '' -e 's/@resupaflare/@NEW_SCOPE/g'
git commit -am "Set package scope"
git push origin master

Updating

To pull the latest changes from this repo into your new repo:

git pull resupaflare main
git push origin main

Local setup

1. Install pnpm
2. Install pgFormatter (on MacOS: brew install pgformatter)
3. pnpm install
4. Create .env.development.local and add the required variables from .env.development
5. pnpm dlx supabase link --project-ref PROJECT_ID

Local dev

pnpm dev

Updating DB types

After making local changes to the DB, run pnpm gen-types. This generates libs/db/src/types.ts, which should be checked in with the changes.

Generating a migration

Migrations are applied by GitHub Actions. Generate a migration using pnpm gen-migration MIGRATION_NAME and include it with the relevant change.

Updating Remix

Remix is patched to fix the sourcemap path escaping for Cloudflare functions.

To update the patch for a new Remix version:

1. pnpm patch @remix-run/dev@[VERSION]
2. Edit [TMP_PATH]/dist/compiler/server/write.js (see the previous diff for the change).
3. pnpm patch-commit [TMP_PATH]

Hosting setup

Cloudflare

1. Create a new Pages application with the following settings:
   1. Build command: pnpm run build:web
   2. Build output directory: /apps/web/public
   3. Root directory: /

Supabase

Create two projects, one for production and the other for staging.

GitHub Actions

1. Add these organization or repo secrets
   1. SUPABASE_ACCESS_TOKEN (generate)
   2. CLOUDFLARE_API_TOKEN (generate)
   3. SENTRY_AUTH_TOKEN (generate)
2. Create staging and production environments
3. Add environment secrets
   1. SUPABASE_DB_PASSWORD
4. Add environment variables
   1. DEPLOY_ENV
   2. SUPABASE_PROJECT_ID