A simple (but powerful!) redirect tool built with Cloudflare Workers. Deploy and manage redirects at the edge without needing to config your origin application. See this blog post for more info on how it works, as well as a demo video.
This project requires the usage of Cloudflare Workers on your custom domain/zone. Check out my Egghead video on deploying to a custom domain if you need to set that up.
With a configured Workers project, using Wrangler:
- Install the package
$ npm install lilredirector- Create a
redirects.jsfile in your source code:
export default [
{
path: "/twitter",
redirect: "https://twitter.com/signalnerve",
},
{
path: "/yt",
redirect: "https://www.youtube.com/c/bytesizedxyz",
},
]import redirector from 'lilredirector'
import redirects from './redirects'
addEventListener('fetch', event => event.respondWith(handler(event)))
// Note the `event` function argument.
// Unlike many Workers scripts, which pass in `event.request`,
// lilredirector needs the full `event` object
async function handler(event) {
const { response, error } = await redirector(event, redirects)
if (response) return response
// Optionally, return an error response
if (error) return error
// Other workers code
}Lilredirector includes support for more complex redirect scenarios using path parameters. This allows you to capture parameters in the URL and use it to route to new URLs. In redirects.js:
export default [
{
path: "/post/:id",
redirect: "/posts/:id"
},
{
path: "/users/:id/posts/:post_id",
redirect: "/u/:id/p/:post_id"
},
]import redirector from 'lilredirector'
addEventListener('fetch', event => event.respondWith(handler(event)))
async function handler(event) {
const { response, error } = await redirector(event, redirects, {
// Configuration options can be passed as an optional object.
// See the below documentation for examples of each:
//
// baseUrl
// basicAuthentication
// removeTrailingSlashes
})
// ...
}By default, lilredirector serves a read-only UI from /_redirects. This can be customized by providing baseUrl in lilredirector's configuration:
async function handler(event) {
const { response, error } = await redirector(event, redirects,{
baseUrl: `/mylilredirector`,
})
if (response) return response
}By default, lilredirector will match and redirect URLs without trailing slashes. For instance, if you have a redirect set up for /about, visiting /about/ will match a redirect for /about, and redirect accordingly. This feature can be disabled by passing the removeTrailingSlashes boolean in the configuration object into the redirector function:
async function handler(event) {
const { response, error } = await redirector(event, redirects, {
removeTrailingSlashes: false,
})
if (response) return response
}Lilredirector embeds itself under the /_redirects path, unless specified otherwise by the baseUrl configuration param as defined in the previous section.
You can put the read-only UI behind authentication using a few methods.
Using the configuration object, you can enable basic auth for lilredirector and any subpaths (creating/deleting redirects):
async function handler(event) {
const { response, error } = await redirector(event, redirects, {
basicAuthentication: {
username: USERNAME,
password: PASSWORD,
},
})
if (response) return response
}It's strongly recommended that you use wrangler secret to define and store your basic auth credentials, as seen above:
$ wrangler secret put USERNAME
$ wrangler secret put PASSWORDYou can add complex role-based auth using cloudflare access. see the below screenshot for an example config:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent