supa-remix-stack's Introduction

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 :
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/

supa-remix-stack's People

Contributors

Stargazers

Watchers

supa-remix-stack's Issues

cannot install deps

Hi thanks for these remix stacks.

There's an error with npx create-remix@latest --template rphlmr/supa-remix-stack regarding dependencies.

npm install
npm WARN ERESOLVE overriding peer dependency
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @remix-run/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^5.1.0" from @remix-run/[email protected]
npm ERR!   node_modules/@remix-run/dev/node_modules/@remix-run/server-runtime
npm ERR!     @remix-run/server-runtime@"2.0.1" from @remix-run/[email protected]
npm ERR!     node_modules/@remix-run/dev
npm ERR!       dev @remix-run/dev@"^2.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^5.1.0" from @remix-run/[email protected]
npm ERR! node_modules/@remix-run/dev
npm ERR!   dev @remix-run/dev@"^2.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^5.1.0" from @remix-run/[email protected]
npm ERR!   node_modules/@remix-run/dev
npm ERR!     dev @remix-run/dev@"^2.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

rphlmr/supa-stripe-stack & rphlmr/supa-fly-stack seems to have similar issues.

I filed a similar bug with netlify/remix-template that they fixed, unsure it's the exact same thing though.

Recommend Projects