The Remix team has been hard at work stabilizing almost everything we’ve teased since Newsletter #14. If you’ve got an old Create React App or React Router site you’ve been eager to migrate to Remix, the team has paved a smooth path for you. Let’s dive in!
Remix v2.7 & v2.8
We released 2 minor versions of Remix since the last newsletter. Here are some of the highlights:
- Stabilized the Vite Plugin: Remix Vite is now stable! The move to Vite from our old, esbuild-based compiler drastically improves Remix DX with faster HMR/HDR and access to an entire plugin ecosystem. We also added several new config options:
basename, presets, serverBundles, and more!
- Stabilized SPA Mode: SPA mode is a way for you leverage many of the nice features Remix gives you out of the box without needing a server. That means you can leverage Remix’s route configuration, automatic code-splitting, link prefetching, and
<head> management while still deploying a static site.
- Layout export: The
Layout export is a new component you can optionally render in your root route. This Layout will automatically be used across your root components, HydrateFallback, and ErrorBoundary to avoid remounting the entire React app shell when your app switches between these components.
- Various Fixes and Updates: We also squashed a number of bugs and added several other nice features which primarily supported the release of Remix Vite and SPA mode.
Checkout the full Release Notes ↗
Stabilized Vite Plugin
The team has spent the past 3.5 months finding as many bugs, missing features, and performance issues with the unstable version of Remix Vite as we could. This was a huge undertaking, and we wanted to make sure we got it right. To ensure that Remix Vite was as battle-tested as possible before marking it as stable, we:
- Closed 75 issues and merged 136 pull requests related to Vite.
- Migrated remix.run to Vite and assisted in the migration of kentcdodds.com and shop.app — with the latter resulting in a 50x HMR speed boost.
- Shipped several new features and major improvements on top of Vite.
Read our blog post on stabilizing Remix Vite ↗
Stabilizing SPA Mode
SPA (Single Page App) mode is a huge step and investment in bringing the React community forward as the React team paves the way to build better websites with features like React Server Components and React Forget.
While Remix has a long history in helping new and seasoned developers alike enjoy the fruits of building server-side rendered React apps, we also realize that there are plenty of projects that can’t easily switch to SSR without investing some serious time and resources. Additionally, there are some applications that are well (or even better) served as pure SPAs.
No matter the reason, we built SPA mode so you can easily leverage all of the goodies Remix has to offer without forcing you to use SSR or to do a huge migration. Remix SPA mode is pretty much just React Router v6 with some nice, built-in conventions. Plus, with SPA mode, if you ever decide you want to try SSR its just a boolean-flip in the config away.
Learn more about SPA Mode ↗
Remix Dev Tools
This month our featured Remix Resource is Remix Dev Tools, an open-source package created and maintained by Alem Tuzlak. This package is designed to enhance your development workflow when working with Remix, providing a user-friendly interface that helps you monitor and manage various aspects of your Remix projects.
Remix Dev Tools offers a comprehensive set of features, including:
- Active Page: The Active Page tab allows you to gain insights into the current page you are working on. It provides valuable information and data that can assist you in debugging and understanding the behavior of your application.
- Routes: The Routes tab enables you to manage and explore the routes within your Remix project, visualizing your routes as an interactive tree.
- Errors: The Errors tab allows you to track down hydration issues in your application. It shows you the HTML nesting errors that you might have on your page and allows you to open the files directly in VS code.
- Terminal: The terminal tab allows you to run terminal commands directly from the Remix Dev Tools.
Plus a whole lot more!
This tool is a fantastic addition to your Remix development workflow, helping you build better websites more efficiently.
Check out Remix Dev Tools ↗
New Remix + Vite + shadcn/ui template
This month, we’re excited to feature a new Remix starter template created by Jacob Ebey. This template combines Remix Vite and shadcn/ui to provide a robust starting point for your next project.
The template starts you out with several great features:
- Server Options: Choose between a Node server and a Cloudflare server, depending on your needs.
- SQLite + Drizzle ORM: Leverage a simple, yet powerful database and ORM combination to quickly get started building data-driven applications.
- Theme Switcher: Easily switch between themes with the built-in theme switcher.
This template is a great resource for developers looking to kickstart their Remix app, providing a great set of defaults for your next project
Check out the Remix + Vite + shadcn/ui starter template ↗
Fresh code
Now that we have finished stabilizing Remix Vite and SPA mode, the team is freed up to set its sights on the next set of new Remix features. Here are few PRs worth watching. If you want to know more, you can tune into our Roadmap Planning live streams.
Join our Roadmap Planning Tue, Mar 12th ↗
Connect at a Remix Meetup
Remix Meetups are run voluntarily by members of the community all around the globe with in-person and online options. These meetups feature local speakers, hackathons, workshops, and more! Get involved at:
Reach out to Brooks (our Developer Relations Manager) if you are interested in starting your own meetup.
That’s it for this issue. We’re looking forward to updating you on everything Remix related next time!
- The Remix Team