Magic of mono repositories & Lerna in front-end

(Note: This is one of the articles written in a series of vue plugin-based development. If you are new, please check out the whole story, or if you want to know only about Lerna and mono repo, please continue )

Why we have to use one

When we break a monolithic application and thought to build each module as an independent application, then we faced a problem of many repositories to manage. It’s hard to manage multiple repositories if an application of 100 modules, then breaking that into 100 individual repositories is not at all a good idea. So we did some R&D, and we came up with the approach of mono repositories

How it works

Let’s say our monolithic application has modules like users, notifications, settings, newsfeed. Now all the applications will sit inside a single repository(inside plugins folder)

Now we want to control each folder inside plugins separately and publish them individually means each folder we are monitoring as an individual (mono) repository. For that, we will use Lerna(it’s a tool for managing JavaScript projects with multiple packages). So we will install the Lerna and init it.

npm i lerna --save
lerna init

Lerna will create a lerna.config file which will have the following content

{    
    "packages": [
        "packages/*"
     ],
     "version": "0.0.0"
}

Since all our packages are inside plugins folder, we have to change the config accordingly

{    
    "packages": [
        "plugins/*"
     ],
     "version": "0.0.0"
}

“plugins/*” → basically, we are telling lerna to control each folder inside plugins as an individual package. If the lerna init command creates a package folder, we can delete that.

(Note: Lerna requires npm setup as it will host the packages in npm repository)

Now we have some folders inside plugins, lerna need a package.json file inside each folder with the following data,

{
   "name": "@myapp/newsfeed",
   "version": "0.0.0"
}

This is the minimum information required to run the package where the name is the name of the package we want to publish (should be unique) and the version to start. We can use a lerna command to create a package (recommended way)

lerna create newsfeed

This setup will help in creating required folders like a test, lib and also some required information in package.json

That’s it. We are all done with the setup. Now let’s test it out by adding some code in the newsfeed and after pushing all the changes run the following command

lerna publish

After hitting above command, lerna will automatically detect the packages that are changed and ask for the version to publish

(Note: if you face any problem make sure your npm setup is proper)

Conclusion

We found a way to control multiple packages inside one repository. In our next journey, let’s see how we build a vue application as a plugin that can be injected in any other vue application.