Different ways to organize and implement javascript libraries without relying on npm

We have been collaborating on various projects within a unified lerna repository structure, including:

lerna
  |----- app1 - application 1
  |----- app2 - application 2
  |----- appN - application N
  |----- commondb (shared database libraries for app1, app2 to appN)
  |----- commonux (common user experience libraries for app1, app2 to appN)
  |----- commonauth (common authentication libraries for app1, app2 to appN)

As our codebase expanded, the lerna setup became cluttered with over 40 packages and excessive code.

We are now exploring ways to break down lerna into smaller components while still enabling applications to access shared libraries as before.

One potential solution is leveraging NPM (creating standalone common packages and publishing them on NPM), but we prefer to maintain our code within our own environment rather than relying on third-party services or cloud platforms (we operate our own git server).

What options exist for managing JavaScript libraries in this context? Which approach would be most suitable for addressing our specific needs?

javascriptnpmlerna

Answer №1

When determining your course of action, consider this: do you prefer all your applications to run on the same version of shared libraries, or would you rather have the freedom to independently manage various versions of the libraries and allow the consumer app to choose which one it utilizes?

If sticking with a unified approach is your preference, I recommend adopting a Mono-repo strategy, perhaps utilizing tools like NX that streamline tasks such as linting, testing, building, and deploying only the affected modules while sharing a common package.json for consistent libraries across multiple apps and libs.

On the other hand, if you opt for autonomy over your libraries, be prepared to handle multiple repositories, various library versions, numerous pipelines, and diverse workspace configurations.

Answer №2

If you're looking to create a monorepo structure without the need to publish, consider using pnpm's workspaces: protocol. By adding 

"foo": "workspace:*"
to your configuration, you can benefit from local packages and avoid unnecessary downloads. I applied this technique in a demo showcasing a Vue project with pnpm workspaces, which offers flexibility in managing dependencies without committing to publishing right away. You have the option to utilize Lerna for publishing (check out Lerna-Lite, my preferred tool), as both Lerna and pnpm/yarn now support the workspace: protocol. This setup allows for an easy transition to publishing on npm or a private registry in the future, with minimal code changes needed. In other words, you won't have to refactor your code significantly if you decide to introduce Lerna later on when working within a pnpm workspace structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The 'split' property is not present on the 'string | number | {}' type

Just starting out with Typescript and I've encountered an error stating that the split method does not exist on type number. I've tried narrowing down the type by checking the value's type, but so far it hasn't been successful. Below is ...

javascripttypescript

Error message in Vuex4: Unable to access 'state' property because it is undefined

Having trouble with Vue3 and Vuex4, I keep encountering this error: Uncaught TypeError: Cannot read properties of undefined (reading 'state') at ReactiveEffect.eval [as fn] (App.vue?3dfd:36) at ReactiveEffect.run (reactivity.esm-bundler.j ...

javascriptvue.jsvuexvuejs3

Issue with MEAN stack: NPM is unable to locate the module 'webpack/lib/optimize/CommonsChunkPlugin' causing an error

I seem to be encountering an issue while trying to upgrade to the latest version of webpack. Upon investigating various threads, it appears that the error is caused by a deprecated class. Webpack migration 3 -> 4: Error: Cannot find module 'webpack ...

node.jsnpmwebpack

Issue arises while utilizing the echoed ++$value in javascript within a webpage containing an HTML5 audio player

I've been developing a customized 'soundboard' that generates a unique HTML5 audio player for each mp3 file found in a directory. While the player setup is functioning as expected, I encountered challenges when incorporating a customized tim ...

javascriptphparrayshtml5-audio

What causes bubbling among a parent's siblings?

When I create a simple slideToggle effect on click event, the '.close' event seems to be generating bubbles. Both unbind() and stopImmediatePropagation() have worked for me in the past, but for some reason e.stopPropagation() doesn't seem to ...

javascriptjqueryevent-bubbling

Mixing without Collections

After initially posting this question yesterday, I realized that I needed to clean up my code before proceeding. However, for my assignment, I am required to create a JavaScript quiz where the questions and answer choices are shuffled every time a user ret ...

javascripthtml

Creating a WordPress post popup using Ajax with SimpleModal and jQuery

I tried to follow the instructions provided in this tutorial but unfortunately, I couldn't get it to work. This is the process I followed: 1 / Including in the header <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ...

javascriptphpjqueryajaxwordpress

Utilizing a JavaScript variable to fetch a rails URL: A comprehensive guide

One interesting feature I have is an image link that has a unique appearance: <a href="#user-image-modal" data-toggle="modal" data-id="<%= image.id %>"><img class="user-photo" src="<%= image.picture.medium.url %>" alt="" /></a&g ...

javascriptjqueryruby-on-railsajax

Creating animated effects through Javascript and CSS triggered by user events

As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...

javascriptjqueryhtmlcssanimation

When implementing a Vue component, you may encounter a 'parentNode' TypeError

I'm experiencing an issue with a page that is only partially rendering. Specifically, the page renders Listings but not Bookings. After some investigation, I discovered that removing the divs associated with isReviewed() resolves the rendering issue. ...

javascriptvue.jsdomvue-component

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

javascripthtmlangularjs

The webpage is failing to render the properties of the JSON object

I'm encountering an issue where my code is successfully displaying the object, but I am unable to access its properties in the console. What might be preventing me from retrieving the information stored in this object? Below is the snippet of code ca ...

javascriptjqueryjson

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

javascripthtmlcss

Looking for matching index in rotated array

Currently, I am working on a design with a reference rectangle (colored in red). Within a rotated container div (#map), I am trying to create a duplicate rectangle (in yellow) that matches the size and position of the original "base" rectangle, regardless ...

javascriptjquery

Component not displaying API data despite being visible in the console

Currently dealing with an issue where I am trying to make a simple API call to and then display the fetched data in my component. Strangely, the data is not showing up on the page, although it is being correctly displayed when I console log it. const Di ...

javascriptreactjs

Is it possible to change %20 in a URL to a hyphen?

Is there a way for my search form to display %20 in the URL when I fill the input field with spaces? For example: Basketball coach Current output: basketball%20coach Desired output: basketball-coach <form action="/tag/" id="form-hockey_v1" name=" ...

javascripthtmlurl

Tips for ensuring the drop down button remains selected

My goal is to keep the sorting drop-down button selected after clicking on it, instead of resetting back to "All". Below are my HTML, CSS, and jQuery code. You can view the functionality on my website here: jQuery/Javascript: $(document).ready(function($ ...

javascriptjquery

What is the counterpart in NPM for the command "yarn install --frozen-lockfile"?

During the production docker image building process, I rely on npm. My priority is to keep the package-lock.json unchanged and in sync. ...

npmnpm-installyarnpkgpackage-lock.json

Is it possible to create dynamic animations with SVG files?

I am currently in the process of coding my website, and I came up with an exciting idea to animate my navigation bar within an SVG container. With its naturally wavy design, I aim to achieve a sweeping wave effect similar to the intro animation on Discord. ...

javascriptjqueryhtmlcsssvg

Utilize a single script to control various buttons

At work, I have a soundboard that I like to use to prank my coworkers. The soundboard has multiple buttons, each playing a different sound when clicked. Currently, I have to write a separate script for each button, which has led to 47 scripts on the page. ...

javascript