How to do Subdomain URL Redirects with Vercel Hosting
Tags: vercel, serverless, hosting, beginners
Published: 2022-01-25 22:35:25



I remember the first time my friend Ash showed me [Vercel](https://vercel.com/) (at the time it named Now / Zeit). I was blown away. Since then, I’ve been using it to host my personal blog and personal website - both [ali.dev](http://ali.dev) domains. 

One of the things I’ve been meaning to do over the past year is create subdomains for quick branded forwarding to different websites. There isn’t a straightforward tutorial on how to do this, so here we go!

<img width="50%" style="width:50%" src="https://media.giphy.com/media/IzjhI7ggjDlEnMxZMu/source.gif"></center>

<br/>

## What you’ll need

- Vercel Account
- Github Account
- Custom Domain


This tutorial assumes you’ve already purchased your custom domain, and are managing it via Vercel. If this is not the case, please check out this document on [custom domains on Vercel.](https://vercel.com/docs/concepts/projects/custom-domains) 

In this project, I will show you how I created a redirect for the subdomain, [live.ali.dev](live.ali.dev), to my Twitch channel - [twitch.tv/endingwithali](twitch.tv/endingwithali). I actually wrote this blogpost live on my stream, using an Oculus Rift! I've included a clip of it below.

{% youtube https://youtu.be/Bz0PJ-n4Gy4 %}


To write this blog post, I refered to [this Github issue](https://github.com/vercel/vercel/discussions/5622) that was opened on Vercel's repo by [SeinopSys](https://github.com/SeinopSys). 


1. Create a basic GitHub repo for the domain 
    ![It's the basic page for creating a new repo on github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg4tb4acbtclmo7tdzqe.png)
    
    ![it's the basic github page after a new repo has been created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad9qwtp9x5bfwq0k4i7x.png)
    
2. Initialize the project locally - it won’t need much in it. 

3. Create a document in the local folder called `vercel.json` - this is the only file you will need for redirects. 
    
    ![terminal command line touch vercel.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fv17eewo3g0sxao0ham.png)
    
4. In `vercel.json`, add the following code: 
    
    ```json
    {
        "redirects": [
            { "source": "/", "destination": "[https://twitch.tv/endingwithali](https://twitch.tv/endingwithali)" }
        ]
    }
    ```
    
    This JSON object says that every-time the ‘/’ domain is visited, Vercel will redirect the visitor to the destination URL. I wanted all visitors of the page to be immediately redirected to my twitch channel hence, `"destination":"https://twitch.tv/endingwithali"`.
    

5. Commit code to the Github
    ![terminal with code being commited to a github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4yhtdgw7oump6trbpup.png)
    
6. Run the `vercel` command in your terminal to create a new vercel project. Make sure it’s a new project, not linked to any pre-existing project


7. Run `vercel --prod` to push your website live.
    
    ![terminal showing project being deployed to vercel and to prod](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wooppxraw1qcuz0gmllv.png)
    

    At this point, your redirect will be live, but not have the proper domain. In the next steps, we will set up the domain. 

8. Go to your Vercel Dashboard ui (online, click into the project)
    ![dashboard of the live ali dev project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ada1lb0711p5ul5j8l3b.png)

9. Connect your Github repo to your project by clicking:  
    ![dashboard of vercel project showing the git integrations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzs8ybcaka6zn9c6e1u1.png)

    We are connecting the project to the Github repo, because Vercel has it such that every time a commit is made to your repo, it’ll update the website. This makes it easier to update the URL as needed. 

10. Next, click into `settings` > `domains`

    ![dashboard showing the vercel project domains that are available](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vh1vqpb0lkch2x9x8kf.png)

11. Add the domain you want to redirect - for the subdomain, you can just type in the subdomain. The main domain should be maintained / controlled by the Vercel name servers. [Click here to learn how to set that up.](https://vercel.com/guides/transferring-domains-to-vercel)
    ![dashboard showing the successful successful setting of the domain for the vercel project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5xsejxxdm6bihvmun4z.png)
    
12. Congrats you now have a domain redirect!

Go forth and redirect all the pages! 

<center><img width="50%" style="width:50%" src="https://media.giphy.com/media/9T1LrOu1A2ipq/source.gif"></center>
<br/>


## Bonus Video

This was originally posted on my personal blog, [blog.ali.dev](blog.ali.dev). If you want to watch the bonus YouTube video, [you'll need to check it out over there ;)](https://blog.ali.dev/engineering/2022/01/25/vercel-redirects/)