Deploy your own short URL to Vercel Edge Middleware
Tags: opensource, serverless, vercel, showdev
Published: 2023-04-13 17:35:26

A year ago, I created a vercel shorturl project that used Vercel serverless.
{% embed https://dev.to/thewdhanat/deploy-your-own-short-url-to-vercel-40j4 %}

This year, I updated it to use [Vercel Edge Middleware](https://vercel.com/docs/concepts/functions/edge-middleware)! Deploying the redirect function globally to the edge will result in a reduction of latency.

To get started, just clone the [template repository](https://github.com/ThewApp/vercel-shorturl-starter), edit `redirects.yml` and deploy to Vercel. You **don't** need to edit middleware.js, install dependencies, or run `build` command.🎉

Or click the below button to deploy to Vercel immediately!😊
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2FThewApp%2Fvercel-shorturl-starter&demo-title=vercel-shorturl&demo-description=Create%20your%20own%20shorturl%20on%20Vercel&demo-url=https%3A%2F%2Fvercel-shorturl-starter.vercel.app%2F)

For the record, the version of the underlying [vercel-shorturl](https://github.com/ThewApp/vercel-shorturl) library is `v0.3.x`.

## Features

The main features remain the same. Here is an example `redirects.yml` showing all of the features.

```yaml
- from: /me
  to: https://github.com/ThewBear
  status: 308 # Change status code ex. 301, 302, 307 (Default), 308
- from: /google/:q # Match exactly one ex. /google/recursion
  to: https://google.com/search?q=:q
- from: /vercel/:slug* # Match zero or more ex. /vercel /vercel/docs /vercel/solutions/nextjs
  to: https://vercel.com/:slug
- from: /twitter/:slug? # Match Zero or one ex. /twitter /twitter/thewdhanat
  to: https://twitter.com/:slug
- from: /github/:slug+ # One or more ex. /github/ThewApp github/ThewApp/vercel-shorturl
  to: https://github.com/:slug
- from: /dev/:slug1/:slug2 # Multiple match ex. /dev/p/information
  to: https://dev.to/:slug1/:slug2
- from: /google
  to: https://google.com/search?q=:q
  query:
    action: search # Must have this exact query
    q: :q # And this match in query ex. /google?action=search&q=recursion
- from: /dev
  to: https://dev.to/:user
  query:
    u: :user? # Optional match ex. /dev /dev?u=thewbear
```

### Custom page

You can override home page and 404 page by placing `index.html` and `404.html` in project root.

### Analytics

vercel-shorturl can automatically send an event to [Amplitude](https://amplitude.com/), just set `Amplitude` [environment variable](https://vercel.com/docs/environment-variables) to your HTTP API key.

## Demo

[Demo](https://vercel-shorturl-starter.vercel.app) is deployed with the example [redirects.yml](https://github.com/ThewApp/vercel-shorturl/blob/Main/assets/redirects.example.yml).

Here is some route you can try:

- [/me](https://vercel-shorturl-starter.vercel.app/me)
- [/google/path-parameters](https://vercel-shorturl-starter.vercel.app/google/path-parameters)
- [/google?action=search&q=some-query](https://vercel-shorturl-starter.vercel.app/google?action=search&q=some-query)
- [/dev?u=thewdhanat](https://vercel-shorturl-starter.vercel.app/dev?u=thewdhanat)

See more supported routing features in the example [redirects.yml](https://github.com/ThewApp/vercel-shorturl/blob/Main/assets/redirects.example.yml).

## Migration guides

For `v0.1.x` user, just clone the latest [template repository](https://github.com/ThewApp/vercel-shorturl-starter), and paste your old `redirects.yml`. It should just work.🎊

<a href="https://www.buymeacoffee.com/thew" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>