Migrate a VueJS Application to an Existing Turborepo Monorepo

Instructor: [0:00] I already have a Vue.js application that is just JavaScript. It is not using TypeScript and it doesn't live inside the monorepo. What we want to do is we want to migrate that application inside the monorepo, inside the apps folder, and it should be a sibling of block and dashboard. [0:20] The reason for that application to live inside apps is because it is an application and not a library. What I'm going to do is that I'm going to copy the Admin UI project inside Turborepo, inside apps.

[0:34] OK. Now that the application has been copied into the monorepo, let's open package.json. Now, we're going to update its name. It is going to be called monorepo/adminUI. This is to make sure that we are consistent between all the applications in the monorepo. Let's update the port for the DevScript, and this is going to be 3,002.

[1:00] Let's update the out div to be build. Now let's open the turbo.json file. Now we're going to add the build directory here because that is the output that the Vue.js application generates. We need to make sure that we are ignoring that build in the gitignore file. Here we can see that we're ignoring the folder, so this is fine. Now let's cd into the turborepo.

[1:31] Let's run npm install. Now let's run npm run dev to see the view server running. Here it is. View is working. If we go to 3001, we'll see that we have the Next.js application working. If we go to port 3000, we'll see that we have the Vite and React application working as well.

[1:55] Now let's run the build script. We are going to output the short version of the logs. As you can see, we're running utils, admin, dashboard, and block. Now let's run the type check pipeline and see what happens. Here we see that we are running type check in block, utils, and dashboard. We are not running type check in admin UI because admin UI doesn't have a type check script.

[2:26] To recap, we migrated our JavaScript application into our monorepo just by copying the whole application inside the apps folder. Then we updated its name. We made a few tweaks to the dev script so it doesn't run on the same port as the other application that is running Vite. We updated its output dir when we ran the build script.

[2:51] Then, we updated the outputs inside the build pipeline because now, we have this built folder that will be the output for the Vue.js application. With that, we have a fully functioning Vue.js application inside our monorepo.