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

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.