Remix Todo App

Simple todo app built with Remix and Drizzle ORM, hosted on Cloudflare Pages and D1

Stacks

• Cloudflare Pages + D1
• Remix
• Drizzle ORM
• remix-auth, remix-auth-discord
• CONFORM
• shadcn/ui, Tailwind CSS

Development

Setup Discord OAuth

First go to the Discord Developer Portal to create a new application and get a client ID and secret. The client ID and secret are located in the OAuth2 Tab of your Application. Once you are there you can already add your first redirect URI. Add a redirect URI http://localhost:8788/auth/discord/callback for local development.

You can find the detailed Discord OAuth Documentation here.

Add enviroment variables, bindings

Copy .dev.vars.example to .dev.vars.

cp .dev.vars.example .dev.vars

Edit the value of SESSION_SECRET and fill in the values for your Discord OAuth application.

SESSION_SECRET="YOUR_SESSION_SECRET"
DISCORD_AUTH_CLIENT_ID="YOUR_DISCORD_CLIENT_ID"
DISCORD_AUTH_CLIENT_SECRET="YOUR_DISCORD_CLIENT_SECRET"

Copy wrangler.toml.example to wrangler.toml.

cp wrangler.toml.example wrangler.toml

Edit the value of database_id if you going to deploy to Cloudflare Pages.

database_id = "YOUR_CLOUDFLARE_D1_DATABASE_ID"

Install dependencies and migrate database

npm install
npm run local:d1:migrations:apply

Start devlopment server

You will be utilizing Wrangler for local development to emulate the Cloudflare runtime. This is already wired up in your package.json as the dev script:

# start the remix dev server and wrangler
npm run dev

Open up http://127.0.0.1:8788 and you should be ready to go!

Deployment

Cloudflare Pages are currently only deployable through their Git provider integrations.

If you don't already have an account, then create a Cloudflare account here and after verifying your email address with Cloudflare, go to your dashboard and follow the Cloudflare Pages deployment guide.

Configure the "Build command" should be set to npm run build, and the "Build output directory" should be set to public.

Inspiration

• remix-d1-bullets