Running Remix on the edge with Azure.
This post is about running Remix on Microsoft Azure. The focus of this article is on using Azure Frontdoor, Functions, DNS, Blob Storage and App Insights. CI/CD is done using GitHub actions.
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.
I come from building single page applications (SPA) with serverless backends. The developer experience (DX) is usually a bit tricky; you run a backend either locally or in the cloud and and a separate frontend. Another option is to use something like ASP.NET Core MVC, Ruby on Rails. Progressively enhancing these sites to build fancy user experiences can be tough, too.
Remix hits a sweet spot between the two. While delivering an excellent user experience (UX) you also get an excellent DX (developer experience).
To avoid long waiting times for our customers we want to serve content from as close to the their location as possible. To route requests to the closest geolocation possible we setup Azure Frontdoor. Static content will be served from a content delivery network (CDN) and Azure Frontdoor will select the closest location of our Function App.
Frontdoor offers SSL certificate management. This takes away the work of getting and renewing certificates. Configuring your server for https is not a trivial task. To validate your configuration Qualys SSL Labs offers the SSL Test. The default setup for a custom domain gives excellent results.
Frontdoor has a CDN build in. The CDN helps us to distribute content all over the world to be as close to users as possible.
Delivering content fast is very important to keep visitors happy. To measure performance of your site there are a few tools:
With lighthouse you can check your website for common issues. The default mode will test your application on a simulated mobile device. Mobile devices usually have a less power than high end notebooks. A lot of traffic now a days comes from mobile devices. Unless you have a different user base it is critical not forget about mobile users.
Next accessibility, best practices and SEO are tested. Do serve your images in modern formats? Did you add alt tags to your images? Did you ensure the contrast of font color to background color? Did you add metatags that show up on search result pages?
To make sure we can answer all questions with "Hell yes, I did!" you can use lighthouse during development and local testing. Ideally you integrate lighthouse or a similar tool into your CI/CD pipelines.
To get a better understanding what your page feels like for your users we need to check it from close to their geo location. Other circumstances to consider are internet speeds, what kind of hardware is accessible. A tool that can support us here is WebPageTest by Catchpoint.
You can run tests from a lot of different regions in the world. The resulting reports gives you very detailed information what the browser is doing. In the screenshot below you can see the so called filmstrip. You can scroll through the loading process of your page, see what the user is seeing and what the browser is doing at that point in time.
WebPageTest offers an official GitHub action to integrate into your CI/CD workflow.
To deploy the application when we push changes to our main branch we can use GitHub actions.
