After migrating my blog to Cloudflare Pages, I wanted to run an application exclusively using Cloudflare products. Inspiration struck on a journey where I was low on fuel in the car.
Introducing Station Finder
Station Finder is a single-page application. The goal was to provide a means to locate a fuel station.
Initially, you select a postcode and choose from a dynamically populated list of station results.
A station selection updates the objects on the page to reflect the station choice.
TL; DR
I recently decided to evaluate Cloudflare as a static site hosting provider. This post covers my findings and migration from AWS Amplify.
Amplify Overview
The Amplify configuration is unchanged from the previous migration post. The website is statically generated content built with Hugo (noted as Hugo assets in the diagram). Cloudflare provides a proxy to save on bandwidth and provide a CDN function.
Besides providing hosting for ja.mesmontgomery.co.uk, Amplify provides several redirects.
TL; DR
Recently reinvigorated with my new UI work, I set myself to task with simplifying the front end player code. No matter how I looked at it, I’d needed to rewrite the back end API to support a front end rewrite. But what if I didn’t precisely need to do that? Enter stage left, Cloudflare Workers.
Below I explain how I arrived at this. If you would like to view the Worker code, you can do so here. If you would like to view the sites (and compare), you may do so here:
TL; DR
My previous user interface (UI) could be, at best described as functional. Whilst it technically worked on any platform I tested, a desktop browser received the best experience. Recently @suivethefirst recommended Bootstrap to me. So I tried to make a better experience with this.
Putting the minimum into MVP
Putting together the UI as it stood was the last functional step in my project. Delivering an audio player with a combination of CSS and JavaScript felt beyond what I had in the tank at the time.
TL; DR
Some time ago, I decided to multi-cloud my site. I’ve recently decided to revert to a single cloud hosting provider. I’m taking the opportunity to experience Amplify static hosting for this site.
Challenges with the previous configuration
Multiple hosting locations meant multiple build processes.
In effect, the site was built, deployed (to Firebase) then rebuilt and redeployed (to AWS). Admittedly, the latter was rarely an overhead as the AWS Amplify CI/CD workflow was triggered upon commit to the master branch on CodeCommit.
TL; DR
In this post, I revisit my serverless “jokes and quotes” player. The purpose was to remove the tight coupling between the client request and audio playback API source. To explore the issue, I have introduced DynamoDB to store pre-generated results.
Challenge overview
Logically, all the components of my existing solution depend on each other to succeed to deliver audio to the client. You can visualise it as follows:
The challenge was to accomplish a solution which operated in the following fashion:
