Welcome to React Router v7 with Supabase!

A modern, production-ready template for building full-stack React applications using React Router and Supabase.

Features

• 🚀 Server-side rendering
• ⚡️ Hot Module Replacement (HMR)
• 📦 Asset bundling and optimization
• 🔄 Data loading and mutations
• 🔒 TypeScript by default
• 🎉 TailwindCSS for styling
• 📖 React Router docs
• 🗄️ Supabase for database and authentication

Getting Started

Installation

Install the dependencies:

npm install

Development

Start the development server with HMR:

npm run dev

Your application will be available at http://localhost:5173.

Building for Production

Create a production build:

npm run build

Deployment

Docker Deployment

This template includes three Dockerfiles optimized for different package managers:

• Dockerfile - for npm
• Dockerfile.pnpm - for pnpm
• Dockerfile.bun - for bun

To build and run using Docker:

# For npm
docker build -t my-app .

# For pnpm
docker build -f Dockerfile.pnpm -t my-app .

# For bun
docker build -f Dockerfile.bun -t my-app .

# Run the container
docker run -p 3000:3000 my-app

The containerized application can be deployed to any platform that supports Docker, including:

• AWS ECS
• Google Cloud Run
• Azure Container Apps
• Digital Ocean App Platform
• Fly.io
• Railway

DIY Deployment

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

Make sure to deploy the output of npm run build

├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

Authentication with Supabase

This application uses Supabase for user authentication. Users can register and log in to access protected routes.

Supabase SSR Library

The application utilizes the Supabase SSR (Server-Side Rendering) library to manage authentication and data fetching seamlessly. This library allows you to create a Supabase client that works both on the server and client sides, ensuring that your application can handle user sessions and data access efficiently.

Registration

• The registration route is available at /register.
• Users can create an account by providing a username, email, and password.
• Upon successful registration, users will be redirected to the home page.

Login

• The login route is available at /login.
• Users can log in using their email and password.
• If the login is successful, users will be redirected to the home page.

CRUD Functionality

The application includes a simple CRUD (Create, Read, Update, Delete) interface for managing items.

CRUD Operations

Table Script

create table
  public.items (
    id bigint generated by default as identity not null,
    created_at timestamp with time zone not null default now(),
    name text null,
    description text null,
    constraint items_pkey primary key (id)
  ) tablespace pg_default;

RLS Policies

-- Allow any authenticated user to insert items
create policy "Authenticated users can insert items."
on "public"."items"
for insert
with check (auth.uid() is not null);

-- Allow any authenticated user to view items
create policy "Authenticated users can view items."
on "public"."items"
for select
using (auth.uid() is not null);

-- Allow any authenticated user to update items
create policy "Authenticated users can update items."
on "public"."items"
for update
using (auth.uid() is not null);

-- Allow any authenticated user to delete items
create policy "Authenticated users can delete items."
on "public"."items"
for delete
using (auth.uid() is not null);

• The CRUD interface is available at /crud.
• Users can add new items by filling out a form with a name and description.
• Users can view a list of existing items.
• Each item can be deleted by clicking the "Delete" button next to it.

Environment Variables

To configure your Supabase project, you need to set up environment variables. Create a .env file in the root of your project and include the following variables:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

Accessing Environment Variables in the Frontend

To access environment variables in the frontend, you can expose them through the loader function. For example, in your loader function, you can return the environment variables as part of the loader data:

return {
  env: {
    SUPABASE_URL: process.env.SUPABASE_URL!,
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
  },
};

This way, you can access these variables in your components via the loaderData prop, ensuring that sensitive information is not directly exposed in the client-side code.

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

---

Built with ❤️ using React Router and Supabase.