Remix Test Drive

A handle full of Remix resources and examples for cut-and-paste reference.

Build with

• TypeScript
• TailwindCSS
• Remix-Auth

Examples provided

• Action template with ErrorBoundary.
• Loader template fetching data server side.
• Session example with Remix-Auth.
  • Login template and protected route with isAuthenticated.
• Remix Form examples
  • Remix-friendly form components, most of which do not require useState.
• Global toast messages via session flash.
• Example API routes returning JSON.
• AppFrame component using:
  • Active navigation link with NavLink
  • Loading indicator when navigating with useNavigation
  • Close the mobile menu after navigation with useLocation.
  • Simple responsive layout

Development

To run your Remix app locally, make sure your project's local dependencies are installed:

pnpm install

Afterwards, start the Remix development server like so:

pnpm run dev

Open up http://localhost:3000, and you should be ready to go!

Upgrading Remix

A CLI utility to update/list all of your Remix dependencies together.

npx upgrade-remix