June 2023 Roundup

This email went out to jacobparis.com's Remix subscribers at the end of June 2023. Those archives and subscribers have been merged into Moulton, so if you were a Moulton subscriber you will not have received this.

Hey folks!

🔥 Remix Custom Routes

I took all the logic Remix uses internally for generating its routes and refactored it into a few useful functions that you can use for generating custom route conventions.

1. Take any list of route files
2. Get route IDs for them
3. Generate a route manifest.

So if you want routes to have a certain extension, you can replace step one with a glob that looks for it.

Or if you want a bunch of routes to have a certain layout, you can map over step 2 to prepend a pathless layout ID.

It comes with a prepackaged convention for .route extensions and a for simple flat file routing with support for + folders.

jacobparis.com/content/remix-custom-routes

🔥 Add Drizzle or Prisma to your Remix apps

Most Remix stacks come with Prisma built in, and because of that there aren't really any resources out there for how to set it up in a new project for yourself.

I also wanted to try out Drizzle, so I looked at that implementation and wrote up guides for both.

Drizzle is a lot of fun and feels super fast and light. It did make me feel like I needed to know how databases worked though, and Prisma has never made me feel like that. So I'm sticking to Prisma for now but I'll revisit Drizzle later.

jacobparis.com/content/remix-prisma jacobparis.com/content/remix-drizzle

🔥 Typesafe environment variables with Zod

I like the experience of just calling process.env from wherever and getting my environment variables, but it always sucks to have to check at runtime whether they're defined or not.

This script asserts that they're all defined to make typescript happy, and crashes the server on startup if they aren't, printing some nice error messages letting you know you did a bad thing and should fix the variables before redeploying.

jacobparis.com/content/type-safe-env

🔥 Form validation with Conform/Zod

I love Conform

The API is fantastic and this is exactly how I want to handle my form validations. It feels like a headless validation library, if that were a thing. It works great with Zod so you get shared types between client and server, and it's all made for progressive enhancement upon the native HTML form.

jacobparis.com/content/remix-conform

🔥 Remix snippets

VS Code has snippet tools built in for generating blocks of code via a typed command or a hotkey.

I wrote an opinionated snippet file for Remix's file conventions, so it's /loader to insert a loader, /action to insert an action, and so on.

You can set it at your IDE level to work on all your projects, or commit it to the codebase to work for everyone who uses it. Why not customize the loader to come with auth guards by default? There's lot of cool stuff you can do with snippets

jacobparis.com/content/remix-snippets

🔥 What else?

• I'm on Bluesky now (but no invites yet)
• The articles on my website are now chronologically sorted
• Cloudflare now supports 25MB bundles (up from 5MB) on their now unified Pages/Workers product, and my Where to Host Remix guide has been updated to reflect that
• My upcoming Egghead course is now being built on The Epic Stack. You'll be able to grab the latest epic stack template and follow along with the course to build your own Linear clone, but more on that as it progresses. This is my main project right now.