Building TADMA.Net with Remix and Ant Design

Whenever I start on a new personal tech project I always start with trying to figure out if there’s a better way to build than what I’d used previously. In my last few projects I used AWS Amplify, and I’ve found it to be pretty buggy. Like it has a lot of great pieces in place for data stores, authentication, etc, but it was never particuarly reliable when building it.

This time I decided to try Remix, and so far I think I like it better, but we’ll see how it works over the long run. Now that I have a basic site up and running I figured it was worth talking about the headaches I had along the way.

Remix Grunge Stack

First of all, I can’t just keep things simple and go with the most basic version of Remix. Instead I wanted to run the serverless version that uses a Lambda back end. This is the “Grunge” stack.

Much credit to Remix because this part worked extremely well. I was able to build a very simple RSS reader that would feed into my site. Nothing super fancy, and needs some optimization. But the basic capability was easy to put together.

I did run into some snags with getting the UI right which required a little futzing about, mostly because I’d chosen to use Ant Design instead of Tailwind. I suspect had I decided on Remix before I decided on Ant Design I’d have just used Tailwind. 🤷‍♂️

Worked Fine Locally But…

That’s when things got a bit weird. I feel like this is always the way with these kinds of tools. You build something locally that works pretty well, but then you try to put it into Production and things fall apart.

The first problem was that I kept seeing an Authorization Error that was clearly coming from S3. To illustrate the problem, this is what the routing looks like overall:

I was able to see the HTML and the data was coming back just fine. The CSS was completely broken though. When I went to look at what was wrong I was seeing 403 errors and then if I went there directly myself I saw the tell tale S3 bucket authorization error.

It is weird to me that, out of the box, Remix and Architect build me a broken production website. Worse, it was very hard to find good documentation because googling “architect authorization error” doesn’t exactly narrow it down very well.

Cloud Front to the Rescue

Eventually I was going to want to have it setup anyhow, so I tried using Cloud Front as a workaround. So rather than try to have the API gateway handle the S3 bucket’s static content, I just routed it directly from Cloud Front like this:

That actually works. I still kinda want to know why Architect’s way of deploying didn’t work out of the box, but for now I have a working site.

Is React 18 Just Broken?

The other issue I ran into appears to be something finnicky about React 18. Remix provides server-side rendeering, which is all great, but React 18 gets weird with this. It throws errors related to “Hydration”.

Apparently the problem is that the server side rendering and the client must be 100% aligned. If it isn’t, then you get an error and no site to look at. So once I got my Authorization problem fixed I was only getting errors, and it worked fine locally.

I did a little digging into it and for my purposes, the path of least resistence was to downgrade to React 17. It worked just as well and did not cause the same errors. Problem solved and the site now works: https://www.tadma.net.

Kinda Slow, eh?

I’ll note that the site is pretty slow at the moment. I’m doing this on the cheap, so the lambda function is starting cold and then going and querying the RSS feed from here. If I was doing this for better alacrity, I’d modify it to cache that RSS feed and keep the Lambda function warm. For now though, the basics are working.

Some Final Architect Thoughts

As an Architect I think there’s a lot to be said about having the right tools for the job and putting the right amount of effort into it. The purpose of this project was to get a basic site up and running and kick the tires on some different tools.

While nominally this is all “in production” in that you, the public, can go to that site, it is not an enterprise class sustainable application. Nor should it be. That said though, if you hammered that site it could take a beating since it’s all backed by Lambda and S3.