Using design system as NPM dependency from an online repo

[JustineVuillemot]

Hello ! I've got an application which uses a vue design system as a module and for now, the package is fetched from a local build as explained in the 'Getting Started' part of the documentation (https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module) and it works fine. However in the near future, I'd like to include the design system into 3/4 other applications and we'll be several developpers working on those 3/4 applications so we'd like the design system to be fetched from our repository online instead of having to download and build it first. I've tried to change the package.json link of the module from "file:/path/to/personal/workspace/company-design-system" to "git@bitbucket.org:company/company-design-system". The problem is, with these settings, I can't launch the application with npm run dev because a problem occurs with some of the scss design system file :

ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-322d8724","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/renderer/components/Panel.vue Module build failed: @import "~company-design-system/dist/system/system.utils.scss";

I've thought about building the design system and pushing the build online on a production branch but is there another (better) way ? Maybe some way to specify in the design system that when installed it needs to be build at the same time or something like that ? Thank you

[JustineVuillemot]

Hello again ! As mentioned above in my previous comment, I tried to build locally and push the build of our company design system on a production branch and to then install the design system in our application with the link to that production branch. It works but I've actually discovered another technique that could be useful : using the "prepack" npm script hook to prevent from keeping a build online. I'll try this solution since it's closer to the behaviour we were looking for in the first place ! I'll keep in touch about the result of the second testing. Thank you

[JustineVuillemot]

Hello ! Last comment here I promise ! Using the prepack hook works fine so my problem is solved ! Here are the steps : I first added a "prepack" hook in the package.json file of my company design system (be careful if your build needs dev dependencies you need to also install them in the hook) then I changed my package.json file in my application to download the design system from the mastr branch and not the production branch Be careful about your node version as the "prepack" hook only works with npm version 6 ! Thank you

[arielsalminen]

@JustineVuillemot Would you be able to share a code example on how you achieved this? (for anyone else struggling with this)

[JustineVuillemot]

Hi ! Sure I can, sorry I didn't think about that before ! Here is an example for the package.json file inside the design system project :

"scripts": {
  "prepack": "npm install npm-run-all && npm install theo && npm run build:system"
}

This script will automatically be launched when the package is installed (only works with npm version 6 or higher) meaning that when you install your design system, a build will be added inside the module folder so this way you can easily have access to it. The reason why the command also has npm install npm-run-all and npm install theo is beacuse those modules are used in the build command. So if they are not installed, the build can't work. Make sure to addapt this command with other modules you might require.

Here is an example of the package.json file of the intern project using the design system :

"dependencies": {
  "intern-design-system": "git@bitbucket.org:ownerName/inter-design-system-repo#develop",
}

This way you install the design system from an online repo. This is much faster to update than cloning and building the new version and every developper working with the intern app doesn't have to edit the package.json file each time they want to work on it. Hope it helps !