Name: Deploy the Client-Side Apps in a Turborepo Monorepo to Vercel
Uploaded: 2022-08-31T14:53:42-05:00
Description: Now that we have Turborepo installed, configured, and we have some knowledge about it, let's deploy our two client-side applications, dashboard and blog, to Vercel. We'll link our Github to Vercel and point it towards our Monorepo. We'll then run through all of the configurations and commands needed to get our apps deployed.

What is Turborepo?

Install Turborepo in an Existing Monorepo

Migrate NPM Scripts to Turborepo Pipelines

Understand Turborepo Local Cache

Create Repository Specific Turborepo Pipelines

Generate a Dependency Graph for Monorepos Using Turborepo

Filter Pipeline Tasks Using Turborepo

Prevent Turborepo Exiting Early on Failing Tasks

Preview Turborepo Tasks at the Pipeline Level

Shorten Turborepo Logs using --output-logs

Enable Remote Caching in Vercel

Deploy the Client-Side Apps in a Turborepo Monorepo to Vercel

Enable Github Actions with Turbporepo Remote Caching

Migrate a VueJS Application to an Existing Turborepo Monorepo

Migrate a Monorepo from NPM Workspaces to Turborepo

Now that we have Turborepo installed, configured, and we have some knowledge about it, let's deploy our two client-side applications, dashboard and blog, to Vercel. We'll link our Github to Vercel and point it towards our Monorepo. We'll then run through all of the configurations and commands needed to get our apps deployed. 

https://app.egghead.io/api/v1/lessons/egghead-deploy-the-client-side-apps-in-a-turborepo-monorepo-to-vercel/subtitles

Instructor: [0:00] We're going to deploy the two client-side applications that we have in our monorepo. The first one is the Nex.js application and the second one is the Vue.js application. In your Vercel dashboard, click add new then project.
[0:18] Now, select the monorepo project. Let's rename this project to be Turborepo Egghead course Next.js. Let's select a framework and this is going to be Next.js. The root directory, we want to change that so let's click edit then let's open apps, then open block. As you can see, Vercel gives you this little hint that this is a Next.js application, just in case.

[0:46] You click continue here. Now, we're going to modify the build and output settings a little. Let's click that and let's modify the build command, click overwrite, and let's use this command.

[1:00] And so, let's see what is going on here. First, we're going up one level and then two levels, so we jump from block, and then two apps and then to the root of the project, then we run npx Turbo run build and then we filter.

[1:18] In the filter, we want to add monorepo/block. Now, the output directory should be the same and the install command, we want to modify it as well. This should be npm install, the prefix flag, and then dot-dot, dot-dot. We run npm install in the root of the monorepo and not in the root of the Next.js project.

[1:43] Now, we click deploy and wait a little bit. OK, here we are in the dashboard home page. Let's click on the project that we just created and we see that the deployment has completed successfully. Yay, let's click here and we see that, indeed, we have a Next.js up running.

[2:07] Now, let's do the same for Vue.js application. We add a new project. We select the Egghead course again. This is going to be called Vue.js in the framework preset, which use bit, the root directory should change. Here we choose apps, then dashboard, click continue and then we update the build and output settings again.

[2:36] Let's click overwrite here. We're going to use the same script that we used before, but in this time, we're going to use monorepo/dashboard.

[2:47] For the install command, we're going to do npm install, prefix dot-dot, dot-dot, and that should do it. Let's click deploy and let's wait for a bit. All right. If we go to the dashboard now, we'll see that we have this Vue.js application. Let's open that.

[3:10] Let's click here to visit the project. There you go. Here we have the Vue.js application from our monorepo. The last thing that we are going to do is that we're going to open the Vue.js project. We're going to click on the build blocks.

[3:25] In this page, let's find a deployment status section. Let's click on building and let's scroll all the way to the bottom. We'll see that we have two cached items out of two here. It says that it only took 800 milliseconds and we are running full turbo.

[3:47] Building the Vue.js application was way, way faster because we are using Turborepo. This could take seconds and now, it is taking 800 milliseconds because of remote caching.

[4:00] OK. To recap, in order to deploy a web application that is inside a monorepo that uses Turborepo, we have to add a new project in Vercel. Once we select the project, we have to specify what preset it is using. In this case, this is the Next.js application.

[4:18] We select Next from this dropdown, then we update the build command, and we update the install command. Also, please note that this is needed because we are using npm workspaces. If you were using Yarn or pnpm, you don't have to do that.

[4:38] One more thing, we can go to each one of our applications. Click the deployments tab, click the latest deployment, then we open the building section inside the deployment status. If we scroll all the way to the bottom, we should see that we are using the cached version that live in the remote cache.

[4:59] That is why it says full turbo and deploying a whole Next.js application only took around a second and a half.

Deploy the Client-Side Apps in a Turborepo Monorepo to Vercel

Share this video with your friends

Course

Migrate a Monorepo from NPM Workspaces to Turborepo