Supa Remix Stack

A quick start for Remix apps with Supabase.

Learn more about Remix Stacks. Learn more about Supabase Auth Helper.

npx create-remix@latest --template rphlmr/supa-remix-stack

What's in the stack

⚠️ Typescript only

• GitHub authentication
• Supabase Remix Auth Helper
• Supabase JS SDK
• Vercel deploy target
• Styling with Tailwind
• Raw unstyled components with HeadlessUI
• Icons with Heroicons
• Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts with Tailwind Merge
• Tailwind official plugins :
  • Typography
  • Forms
  • Aspect Ratio
  • Line Clamp
• Tailwind unofficial plugins :
  • Tailwind Scrollbar
• Tailwind Eslint
• Code formatting with Prettier
  • Tailwind Prettier
• Linting with ESLint
  • Tailwind Eslint
• Static Types with TypeScript

Not a fan of bits of the stack? Fork it, change it, and use npx create-remix --template your/repo! Make it your own.

Development

From your terminal:

npm run dev

This starts your app in development mode, rebuilding assets on file changes.

Deployment

First, build your app for production:

npm run build

Then run the app in production mode:

npm start

Now you'll need to pick a host to deploy it to.

Seed your DB

Run seed/script.sql in your Supabase project SQL editor.

Bonus: Generate types from your DB

You need to login to Supabase first with supabase login More info : https://supabase.com/docs/reference/cli

supabase gen types typescript --project-id your_project_id > app/supabase/db_types.ts

Configure GitHub Auth

Follow the Supabase guide

DIY

If you're familiar with deploying node applications, the built-in Remix app server is production-ready.

Make sure to deploy the output of remix build

• build/
• public/build/