Building a Simple URL Shortener with Cloudflare Workers
Are you tired of long, unwieldy URLs? Do you want to create a simple URL shortener service without breaking the bank? Look no further! In this article, we’ll show you how to build a basic URL shortener using Cloudflare Workers.
What are Cloudflare Workers?
Cloudflare Workers is a serverless platform that allows you to run JavaScript code at the edge of the internet. This means that your code is executed closer to your users, resulting in faster response times and improved performance.
Project Overview
Our URL shortener service will consist of two main components:
- A Cloudflare Worker that handles incoming requests and redirects users to the original URL.
- A Key-Value (KV) store that stores the mapping between shortened URLs and original URLs.
Setting Up the Environment
To follow along with this tutorial, you’ll need to install the following tools:
- Node.js and npm
- Wrangler (Cloudflare’s official CLI tool)
- curl (or a browser of your choice) to test the URL shortener
Generating the Project
Run the following command to generate a new Cloudflare Worker project:
wrangler generate short-it
This will create a new directory called short-it with a basic Worker script and configuration files.
Understanding the Worker Script
The Worker script is written in JavaScript and uses the fetch API to handle incoming requests. The script exports a single function that takes a Request object as an argument and returns a Response object.
Adding a First Redirect
Let’s modify the Worker script to redirect users to a different website. We’ll add a simple if statement to check if the request URL matches a certain pattern, and if so, redirect the user to a different URL.
Shortening the URL
Next, we’ll add a small data structure to store our shortened URLs. We’ll use a simple object to map shortened URLs to original URLs.
Adding Storage
To persist our shortened URLs, we’ll use Cloudflare’s KV store. We’ll create a new KV namespace and add a few entries to it.
Logging into Cloudflare
Before we can create a KV namespace, we need to log into Cloudflare using Wrangler. Run the following command:
wrangler login
This will open a browser window where you can enter your Cloudflare credentials.
Creating a KV Namespace
Once you’re logged in, you can create a new KV namespace using the following command:
wrangler kv namespace create short-it
This will create a new KV namespace called short-it.
Adding Data to the KV
We’ll add a few entries to the KV namespace using the following commands:
wrangler kv put short-it /blog https://example.com/blog
wrangler kv put short-it /twitter https://example.com/twitter
This will add two entries to the KV namespace: one for the /blog URL and one for the /twitter URL.
Reading from the KV
We’ll modify the Worker script to read from the KV namespace and redirect users to the original URL.
Deploying the Worker
Finally, we’ll deploy the Worker script to Cloudflare using the following command:
wrangler publish
This will deploy the Worker script to Cloudflare’s edge network, where it will be executed for every incoming request.
Testing the URL Shortener
You can test the URL shortener by visiting the shortened URL in a browser. For example, if you shortened the URL https://example.com/blog to https://short-it.example.com/blog, you can visit the shortened URL in a browser to see the redirect in action.
That’s it! You’ve successfully built a simple URL shortener using Cloudflare Workers.