How to deploy a monorepo to different subdomains on Vercel 📔🚀

#vercel #turborepo #astro #startup

I recently built Shiftly completely inside Sveltekit. I loved using Sveltekit for the app, but it seemed tricky when it came to SSG and making the marketing site as pretty, fast and performant as I needed it to be for SEO and user engagement.

So I decided to wrap it in a monorepo, using Turborepo. But then I wanted to be able to host my apps on different subdomains within Vercel! I got there, but a little guide would've been nice.

If you're just tuning in and don't know what a monorepo, Vercel, Sveltekit or Turborepo or Astro is here's a quick rundown. Feel free to skip if you just want to get to the money!

Monorepo - Stuffing all your projects and apps, reusable components and business logic inside one repo so everything is easier to see.
Turborepo - A monorepo framework.
Vercel - A pretty badass web host. Specializing in zero-config (or low-config) deployments. Also ride-or-die with
Sveltekit - A SSR framework for the Svelte JS framework.
Astro - A modern af framework for building static sites using reusable components with a hint of magic.

Choose your monorepo

Chances are if you're reading this, you have one ready to roll. But I thought I'd throw a shoutout to Turborepo.

I had used Nx before, but only with Angular apps. Trying to get it working for a Sveltekit app was complicated and flaky. Nevermind trying to get Astro running inside Nx.

So I wanted something leaner and easier to learn and maintain. So I tried Turborepo, which I instantly fell in love with.

Turborepo is a monorepo framework built on top of npm, pnpm or yarn workspaces, so it's backed by your package manager. It doesn't rely on confusing and brittle tsconfig paths to reference your packages inside your apps. You install your packages as you would any other dependency!

And finally, it lets you use any framework you want, with it's own install command! With Nx you have to use a generator, which means one has to exist (and work!) for the framework you want to use. I guess you could make your own... 👀

So in no time I had Shiftly running inside Turborepo. So quick in fact that my local dev folder is still called "turbo-test" because I didn't think it would be so easy to get working with it.

So I have my apps in my monorepo ready to deploy, now what?

So this next bit will be exclusive to Vercel. You can do this with any host... Probably. And you can do it with AWS Route53, if you want to have a headache for days as you figure that out. So I'll just be covering Vercel.

Vercel allows you to connect multiple projects to the same Github repo (oh yeah also this probably works with other git hosts... But I'm using Github, so who knows 🤷‍♀️), up to three projects in the free tier. Paid plans allow you to connect more, you can check here.

Create a Vercel project for each app you want to deploy from your Monorepo

Create a new project, and import your repo.

On the next page, you should have the Vercel, Turborepo seal of approval in the top-right corner which says that Vercel knows this is a Turborepo monorepo.

Then choose the framework of your app, Shiftly is using Sveltekit, so I'll choose that.

Next you'll want to hit "Edit" on the root directory, and change it to be your app. Like so:

After that, double check all your deploy commands are correct and make any changes you need to get your app running. I'm using Sveltekit which is best buds with Vercel, so I don't need to change anything.

Then finally, on your Domains page in Settings. You can add your subdomain to point at whichever branch you want live. This branch still maps to your same repo, so double check which branch you want to deploy from.

For example, I added app.getshiftly.com, and pointed it at my master branch.

And now, you can go to https://app.getshiftly.com and it all works!

Congrats, you've routed a subdomain 👏 nicely done.

That's all from me, thank you so much for reading!

Thank you,

Jacob @ Shiftly
getshiftly.com

BONUS EASTER EGG

For anyone who sees it before I remove it - if you didn't believe how fast I actually got this up and running (it took about 4 hours). But I even did it in such a hurry I left the default index page that comes with Sveltekit 😂 on the root of my app https://app.getshiftly.com

what am I like