Shorten URLs for yourself

TLDR: To continue exploring CloudFlare cloud platform, to my convenience my next project is a service which shortens url's to my need. The end project is here: https://shurl.pages.dev. To remember it effortlessly lets call it shurl which stands for short url. Minimal UI is provided by concrete style again. What we need for this project is a landing page where you are instantly offered to create a short url, a backend function to save it, and a backend function to visit the shortened url.

Considering you have wrangler set up (with npm install) we begin with wrangler init shurl command which will initiate a wizzard flow for us within the terminal to chose project definition. Initially we need a form to submit a short url. To keep it simple we do this within the landing page of the service. The form consists of two inputs, one of them is handle and the other url. To make it dead simple we let user chose their handle (shortened form phrase) for the full length url.

We used wrangler init projectname as a command to initiate a new project, however CloudFlare decided to move this process to another package, so the new equivalent command to it has become npm create cloudflare -- shurl.

For the backend visit functionality we will use CloudFlare platforms integrated dynamic routing feature. It is an implicit feature designed by CloudFlare for which you can learn more here. As the visiting route I chose the word go, which is short, so to visit a shortened url you have to type in browser's address bar a composition url like this: https://shurl.pages.dev/go/{handle}, {handle} is just a placeholder which needs to be replaced with the handler you define on URL shortening form. So when you would visit that url the backend function will try to evaluate redirecting URL to the lengthy one.

Finally deploy the project using wrangler deploy and experience the deployment. Where you would also notice your project being created under Workers & Pages, last thing to do would be binding the kv which acts as store to the url's shortened. To picture it I will leave you with screenshots to my CloudFlare account resources.