{"id":3677,"date":"2021-05-14T16:27:07","date_gmt":"2021-05-14T16:27:07","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3677"},"modified":"2021-05-14T16:27:07","modified_gmt":"2021-05-14T16:27:07","slug":"monorepos-with-ionic-vue-and-npm","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/monorepos-with-ionic-vue-and-npm","title":{"rendered":"Monorepos with Ionic, Vue, and npm"},"content":{"rendered":"

\n This is part three of a new series on monorepos<\/a>. By the end of the series, you’ll have the tools you need to adopt monorepo setups in your organization.\n<\/p><\/blockquote>\n

Rounding out our series on monorepos, we take a look at an old friend, but a newcomer to the monorepo game, npm. Npm has long been the de-facto solution for managing dependencies, and it only makes sense that, with the release of npm 7.0, we finally have a built-in solution for creating a monorepo without relying on external tools. Compared to other solutions, however, npm workspaces lack a few features and still have some rough edges. While it is possible to build something with it, for simplicity, I\u2019d suggest looking at Lerna as an alternative. With that being said, let’s look at how we can configure an npm workspace to work with Ionic and Vue.<\/p>\n

<\/p>\n

Scaffolding<\/h2>\n

To set the scene, what we\u2019re going to build is an Ionic Vue app and a second project that contains a Vue hook. The hook is borrowed from the vue-composable<\/a> project.<\/p>\n

Let’s get started by first creating our base directory and initializing both a package.json<\/code> and an ionic.config.json<\/code>. For the package.json<\/code>, run:<\/p>\n

mkdir vue-monorepo\ncd vue-monorepo\nnpm init -y\n<\/code><\/pre>\n
From here, we can also create a base Ionic project with the ionic init<\/code> command.<\/p>\n
ionic init --multi-app\n<\/code><\/pre>\n
We can also create a directory that will hold all the packages. For this, a directory called packages<\/code> will do, but the name can be whatever you\u2019d like. packages<\/code> is just a common convention that people have settled around.<\/p>\n
mkdir packages\ncd packages\n<\/code><\/pre>\n
With this done, we’re going to create a single Ionic Vue project and a minimal utility package.<\/p>\n
mkdir utils\nionic start client-app tabs --type vue --no-deps --no-git\n<\/code><\/pre>\n
\n  Currently, even if you pass the --no-deps<\/code> flag, dependencies will be installed when Capacitor is set up. Just cd client-app<\/code> and delete the node_modules folder from the project.\n<\/p><\/blockquote>\n
Setting up the Utils<\/h3>\n
For our utils<\/code> package, we’re going to do a bit more manual work to set up a minimal package of hooks for our Vue project.<\/p>\n
cd packages\/utils\nnpm init -y\nmkdir src\ntouch tsconfig.json\n<\/code><\/pre>\n
Open your package.json<\/code> and paste the following:<\/p>\n
{\n  "name": "@client\/hooks",\n  "version": "0.1.0",\n  "private": true,\n  "main": "dist\/index.js",\n  "module": "dist\/index.js",\n  "scripts": {\n    "build": "tsc -p tsconfig.json",\n    "watch": "tsc -p tsconfig.json --watch"\n  },\n  "dependencies": {\n    "vue": "^3.0.0"\n  },\n  "files": ["dist\/"],\n  "devDependencies": {\n    "typescript": "~4.1.5"\n  }\n}\n<\/code><\/pre>\n
Then, open your tsconfig.json<\/code> and paste the following:<\/p>\n
{\n  "compilerOptions": {\n    "target": "ES5",\n    "outDir": "dist",\n    "module": "CommonJS",\n    "strict": true,\n    "importHelpers": true,\n    "moduleResolution": "node",\n    "skipLibCheck": true,\n    "esModuleInterop": false,\n    "declaration": true,\n    "allowSyntheticDefaultImports": true,\n    "sourceMap": true,\n    "lib": ["esnext", "dom", "dom.iterable"]\n  },\n  "include": ["src\/**\/*.ts"],\n  "exclude": ["node_modules"]\n}\n<\/code><\/pre>\n
From here, we can make a file, src\/index.ts<\/code>, and paste the following code.<\/p>\n
\/* eslint-disable *\/\nimport { ref, Ref } from 'vue';\n\n\/\/ useOnline composable hook.\n\/\/ Adapted from https:\/\/github.com\/pikax\/vue-composable\n\nconst PASSIVE_EV: AddEventListenerOptions = { passive: true };\nlet online: Ref<boolean> | undefined = undefined;\nexport function useOnline() {\n  const supported = 'onLine' in navigator;\n  if (!supported) {\n    online = ref(false);\n  }\n\n  if (!online) {\n    online = ref(navigator.onLine);\n    window.addEventListener(\n      'offline',\n      () => (online!.value = false),\n      PASSIVE_EV\n    );\n    window.addEventListener('online', () => (online!.value = true), PASSIVE_EV);\n  }\n\n  return { supported, online };\n}\n<\/code><\/pre>\n
Now we can leave the utils<\/code> directory and get back to the root project.<\/p>\n
Setting up the Workspace<\/h2>\n
With the initial code created, we can now set up the workspace. For npm, workspaces are just an entry in the root package.json<\/code>. Since all of our packages are in the packages<\/code> directory, we can add the following to the root package.json<\/code>.<\/p>\n
{\n  "name": "ionic-vue-npm-workspaces",\n  "version": "1.0.0",\n  "description": "",\n  "scripts": {...},\n  "license": "MIT",\n\n  "workspaces": [\n    "packages\/*"\n  ]\n\n}\n<\/code><\/pre>\n
The workspaces<\/code> entry allows us to declare what packages are available from this top level. Since we want to expose all packages in the packages<\/code> directory, we can use the packages\/*<\/code> to get all of them.<\/p>\n
With this completed, run npm install<\/code> from the top level. With our workspace set up to include all the sub-packages, our install will actually install all<\/em> dependencies used in both projects in one top-level node_modules<\/code> directory. This means we can have better control over what dependencies we are using in which project and unifies all duplicated dependencies to one version.<\/p>\n
With the dependencies installed, how do we go about actually building our sub-packages? This can be done by calling the script we want to run, followed by the --workspace=<package-name><\/code>. If we want to build the utils<\/code> directory, we use the name entry from the package.json (@client\/hooks<\/code>) as the value for the workspace. So our final command looks like this:<\/p>\n
npm run build --workspace=@client\/hooks\n<\/code><\/pre>\n
The same logic would be applied if we want to build\/serve our app: we pick the script we want to run and pass the name to the workspace.<\/p>\n
Including a Package<\/h2>\n
So far, we have our packages set up and building, but we’re not making use of them, which kind of defeats the point of having a monorepo. So how can we consume our utils packages in our main app? To do this, we\u2019ll reference the package in our app.<\/p>\n
In the client-app<\/code> project, let’s open our package.json<\/code> and add a line to our dependencies for @client\/hooks<\/code>:<\/p>\n
{\n  "dependencies": {\n    "@capacitor\/core": "3.0.0-rc.1",\n    "@client\/hooks": "0.1.0",\n    "@ionic\/vue": "^5.4.0",\n    "@ionic\/vue-router": "^5.4.0",\n    "core-js": "^3.6.5",\n    "vue": "^3.0.0-0",\n    "vue-router": "^4.0.0-0"\n  }\n}\n<\/code><\/pre>\n
Then we can add a reference to @client\/hooks<\/code> in our project in the client-app\/src\/views\/Tab1.vue<\/code> component.<\/p>\n
<template>\n  <ion-page>\n    <ion-header>\n      <ion-toolbar>\n        <ion-title>Tab 1<\/ion-title>\n      <\/ion-toolbar>\n    <\/ion-header>\n    <ion-content :fullscreen="true">\n      <ion-header collapse="condense">\n        <ion-toolbar>\n          <ion-title size="large">Tab 1<\/ion-title>\n        <\/ion-toolbar>\n      <\/ion-header>\n        <h1>Is the App online?<\/h1>\n        <p>{{ online }}<\/p>\n      <ExploreContainer name="Tab 1 page" \/>\n    <\/ion-content>\n  <\/ion-page>\n<\/template>\n\n<script lang="ts">\nimport { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic\/vue';\nimport ExploreContainer from '@\/components\/ExploreContainer.vue';\n\nimport { useOnline } from '@client\/hooks';\n\nexport default  {\n  name: 'Tab1',\n  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage },\n    setup() {\n    const { online } = useOnline();\n    return { online };\n  },\n\n}\n<\/script>\n<\/code><\/pre>\n
We can save and go back to the terminal, and from the root, run:<\/p>\n
npm install\nnpm run serve --workspace=client-app\n<\/code><\/pre>\n
When we open the browser to localhost:8080<\/code>, our app should include the code from our second package.<\/p>\n
Parting Thoughts<\/h2>\n
Of all of the options available, npm workspaces include the fewest features when compared to yarn\/Lerna or nx. But that could be beneficial to you and your team if you want to have more control over how your monorepos work. This could be perfect for a team that likes to tinker with things, or wants to assemble their own monorepo infrastructure. Either way, it\u2019s great to see npm enter the monorepo game, and we can\u2019t wait to see how workspaces evolve over time.<\/p>\n