Remix Vite on Netlify, and Why I'm Self-Hosting for Now

Rian Schmidt

March 24, 2024

Table of Contents:

Quick Backstory on Remix
Quicker Backstory on Netlify
Final Backstory on Remix Classic and Remix Vite
Great news! Netlify support Remix and Vite!
Bad news. They actually don't, completely.
It Might Be MUI
So, Self-hosting it is. For now.

Quick Backstory on Remix

My website is a Remix app. Now, if you're not familiar with Remix, I recommend it, mostly. I, like most everyone, cut my React teeth on create-react-app, and spent the last few years developing client-side single-page-apps (SPAs). The bummer, there, is that you're on the hook for a lot of stuff to do that-- authentication without giving your secrets away, data loading from clients with unknown connectivity (also without giving your secrets away), state management, caching, etc.

Enter frameworks like Next.js and Remix. I actually started toying around with Gatsby, and eventually went to Next.js for client work-- particularly in cases where the SEO benefits of server-side generation were significant.

Annnyway, eventually I discovered Remix, and it hit a lot of my hot buttons. It's a little bit like Rails turned on its head in that you're sort of starting with the UI and working backwards to the server, but the main point is that a lot of the action happens on the server, so you don't need to worry so much about all the things I mentioned above. Remix is also, I'd argue, simpler than Next.js.

Quicker Backstory on Netlify

I've always cooked up my own hosting. At my coolest, I had Jenkins CI servers doing the builds, etc. But, at some point, you gotta pick your battles. There are lots of available options to manage CI and basic hosting these days that don't require so much... fiddling. CircleCI, AWS CodePipeline, GitHub Actions and Pages, Vercel, and... among many others, Netlify.

So why Netlify? No special reason, really. Mostly that I knew people using it, they seemed pretty happy, there was a decent free tier, and I got it on first read. I do a push to my GitHub repo, Netlify picks it up, builds (a preview on PRs, for instance), handles my environment variables, deploys to serverless... They cook up certs, collect logs, easy peasy. Much easier, particularly, for dealing with clients who want to collaborate on their code so I don't have figure out how to give access to my bespoke environment.

Final Backstory on Remix Classic and Remix Vite

Finally, when Remix came out, a fully baked Vite was not really a thing, so the Remix folks went with esbuild. All of this is largely esoterica, except for the fact that switching to Vite results in a variety of metrics being 10X faster. That's the kinda thing you notice. The dev environment is particularly more betterer.

But, it's never that simple. In the background of all that is this ongoing evolution of the whole JS ecosystem from CommonJS to ESM-- which I'm not about to go into, other than to say ESM is "better". It is how things are going to go, but there's a whole world of CommonJS out there, and they don't play well together for the most part. It's more than just import vs. require though you'd be forgiven for thinking so based on the errors. But I digress.

Great news! Netlify support Remix and Vite!

Then I saw this from Remix and this from Netlify and boy was I happy! Not only is Remix stable on Vite, Netlify supports it!

So, hot diggity, I jumped in to migrating my site! After, oh, hours and hours trying to debug the appropriate settings for ssr, cjsInterop, and other optimization voodoo via my patented Monte Carlo "keep guessing until it works" method, I had a working, faster site running locally. And it built, too!

Bad news. They actually don't, completely.

Alas, long story short... when I deployed to production, things went badly awry. Essentially, the lambda would hold the connection open for the full 26 second timeout, preventing hydration (and, therefore, Javascript interactivity), and ultimately closing and stomping the styles. A mess. I know, make your site so it works without Javascript. Well, guess what, you're not my real mom. Besides, it still didn't work right and looked dumb.

So, I got in touch with Netlify and asked them to poke around. There's nothing in my logs to indicate what the problem is. A week or so later, I heard back. "Yeah, that's a bug. We're working on it."

I should say that I'm not really digging at Netlify. Bugs happen. If anything, I think Remix and Netlify might be throwing the words "support" and "stable" around a little fast and loose, but this could just be a particularly weird case due to how my site is built.

It Might Be MUI

I suspect, when all is said and done, it'll have been caused by my use of Material-UI, which the cool kids are not into anymore. They're using TailwindCSS now. <barf emoji> Sorry. Not a fan. It's like we all agreed to go back to just tagging long strings of made-up css codes to every element in our app. "You know what I miss? Bootstrap!" OK, that's maybe the stuff of another post.

Anyway, irrespective of that, I've spent years developing stuff with MUI. Then, recently, I spent hours and hours porting it all over to v5. I'm not about to just go back and toss all that and start taking classnames to everything, hoping I remember what the secret shortcode is. We already have CSS. And CSS-in-JS. Enough already. Oh, sorry. There I go again.

Anyway, it bugs me when big, popular projects just decide that other big, popular projects are just "bad" and not to be used. The aggregate amount of time wasted porting stuff from one thing to another for, what is ultimately, feature parity is obscene. Part of the price for free as in beer, though, I guess.

Side note: MUI 6 is coming out, and I have high hopes that they'll address some of the known short-comings, which among other things, really ding your Web Core Vitals.

So, Self-hosting it is. For now.

This is getting long. The good news is that Remix/Vite/MUI all work together. I can see that locally. So, all I need to do is find a way to host it where it works. Luckily, I do that all the time with my own stuff. I have an EC2 instance with plenty of dockerized stuff running via a reverse proxy.

Through the miracle of modern technology, just deploying my existing code to my EC2 instance, setting up a Docker container that runs node, and pointing my site's DNS to my server, I had the whole thing moved in about 20 minutes. Works like a champ.

Now, will I go back to Netlify when they get their bug figured out? Probably. I do like having someone else worry about managing servers and all of that. But it's nice to know that I have options when things go sideways, and the benefits of someone else doing the work are outweighed by the helplessness of not being able to fix anything.

Circinaut is a Fractional CTO services provider, based in Portland, Oregon, working with clients all across the country. I focus on application development, technology advising, and ongoing support for small and medium-sized businesses.
If your business is in need of a part-time CTO, a fractional CTO, or a contract technical consultant, drop me a line. I'm happy to have a quick chat to discuss your situation with no sales pressure at all (really!).