Migrate a VueJS Application to an Existing Turborepo Monorepo

Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

Now you might have a project that currently isn't in your Monorepo that you want to add to it. We can copy that project over into our apps folder and then update the package.json to update the name to make it consistent across our apps. We'll update the dev port to make sure it's not going to run on the same port as one of our other applications. Lastly, we'll update the build pipeline to include our new application.

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.

egghead
egghead
~ 41 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today