Leveraging UI Library as a Dependency for Web Application in Netlify Monorepo with Yarn Workspace/Lerna Integration

I am currently working on two applications, glowystuff-web and glowy-ui. Glow-UI is a shared UI library that I intend to use in future projects as my own version of React Bootstrap.

However, I am facing a challenge with defining glowy-ui as a dependency in packages/glowystuff-web/package.json:

{
  "dependencies": {
    "glowy-ui": "*"
  },
  "scripts": {
    "build": "gatsby build"
  }
}

Every time I try to build without running yarn build first, I encounter errors like the following:

3:47:15 PM: failed Building production JavaScript and CSS bundles - 24.131s
3:47:15 PM: error Generating JavaScript bundles failed
3:47:15 PM: Can't resolve 'glowy-ui' in '/opt/build/repo/packages/glowystuff-web/src/components'
3:47:15 PM: If you're trying to use a package make sure that 'glowy-ui' is installed. If you're trying to use a local file make sure that the path is correct.

I have consulted various resources for setting up Monorepos with Yarn Workspaces on Netlify but I am still unclear on how to ensure that building occurs when necessary. Adding the following script to packages/glowystuff-web/package.json seems excessive:

"scripts": {
  "build": "yarn workspace glowy-ui build && gatsby build"
}

It appears that this script would trigger a build of the UI library every time the main web app (glowystuff-web) is built, even if there are no changes to the UI library code.

While creating a private NPM package for glowy-ui is a viable solution, my preference is to keep everything within a single GitHub repository using Yarn Workspaces. Why publish when all files are readily accessible?

Therefore, I am seeking advice on the best approach to facilitate builds on Netlify/Yarn Workspaces while also optimizing caching where applicable.

Additional information on current builds - netlify.tomls:

We have adopted the code-as-config methodology for Netlify builds. The current setup in packages/glowystuff-web/netlify.toml is as follows:

[build]
  publish = "public/"
  command = "yarn build"

Furthermore, glowy-ui serves as both the UI library and the accompanying Storybook application. Below is the configuration in packages/glowy-ui/netlify.toml:

[build]
  publish = "storybook-static"
  command = "yarn build-storybook"
typescriptyarnpkgnetlifylernayarn-workspaces

Answer №1

If you want to build the glowy-ui library, consider utilizing the post install stage. This will trigger a build every time yarn install is executed.

scripts: {
   "build": "gatsby build",
   "postinstall": "yarn workspace glowy-ui build"
}

Update: Please note that the postinstall script only runs after npm/yarn install, not on every build cycle. For Netlify deployments, it also checks for updates in package.json before running yarn install to avoid invalidating the package cache. More information can be found here: No node_modules from netlify deploy

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

An issue arises in VueJS when employing brackets and the replace function in Typescript

My journey with the Typescript language has just begun, and I am excited to dive deeper into it. Currently, I am working on a SPA-Wordpress project as a hobby using Vite (VueJS). However, I am facing some challenges with the syntax when transitioning from ...

typescriptvue.jsbracketsdot-notation

Interface for dynamic objects in Typescript

I am currently using JavaScript to create an object and would like to include an interface for the data: JavaScript: const childGroups: Children = {}; childGroups.children = []; // Adding some data childGroups.children.push(children); Interface: ...

javascripttypescript

Tips for enhancing the FastifyRequest interface with a new property without erasing existing information in a declaration file

What is the method to integrate a property into an interface via declarations, while avoiding full object overwriting? declare module 'fastify' { interface FastifyRequest { user: User; } } //auth.ts ... const user = jwt.verify( ...

typescriptdeclaration

Utilizing Angular's ngx-bootstrap date range picker for a customized date range filtering system

Currently, I am incorporating ngx-bootstrap's datepicker functionality and utilizing the date range picker. This feature allows users to choose a start and end date. After selecting these dates, my goal is to filter the array(content) based on whethe ...

angulartypescriptsortingngx-bootstrap

How can the ChangeDetectorRef be leveraged to identify and respond to changes in component state for seamless integration with the material stepper component

While working with the Angular 8 Material Stepper, I am validating form states and setting stepCompleted to true when the conditions pass. You can view a demo of this functionality on Stackblitz: https://stackblitz.com/edit/angular-mat-stepper-demo-with-f ...

javascriptangulartypescriptangular-material

The NextJS image URL remains constant across various endpoints

Currently experiencing an issue with my Channel Tab where the icon and name of the channel are displayed. The problem is that every time I switch channels, the icon remains the same as the first channel I clicked on. PREVIEW This is the code I am current ...

reactjstypescriptnext.jstsx

A custom Typescript type for immutable values within an object

I am struggling with finding the right data type for my function, where I need to work with static types. I have experimented with Type, interface, class, Record, and others, but none seem to fit perfectly. GEOLOCATIONS is a constant record that maps cou ...

typescripttypes

Intro.js is not compatible with React and Remix.run

I am currently working on implementing onboarding modals for header links using intro.js within a React environment. Below is the code snippet: import { useState, type FC } from 'react' import type { Links } from '../types' import &apo ...

reactjstypescriptserver-side-renderingremix.runintro.js

Is it possible to utilize a const as both an object and a type within TypeScript?

In our code, we encountered a scenario where we had a class that needed to serve as both an object and an interface. The class had a cumbersome long name, so we decided to assign it to a constant. However, when we attempted to use this constant, we faced s ...

typescript

The automatic filtering feature does not kick in when the sorting is changed

I've been working on an app that features a video database, allowing users to filter videos by category and sort them by rating. https://i.sstatic.net/cESZT.png Currently, the filtering system works fine once the options are changed. However, there ...

reactjstypescriptsortingreact-hooksfiltering

What is the most efficient way to trigger an API call using Angular HttpClient in response to multiple events without repetitively subscribing to the API call method throughout my code?

In my Angular Cli app, I have a data table with dynamic filters and a search bar. Whenever the search value changes, pagination changes, or a filter is applied or removed, I need to update the table items and filter information by making an API call. My s ...

angularhttptypescriptrxjsdry

Is there a way to divide the array based on a specific letter in the alphabet using Angular?

I am trying to create something similar to this: "ABCDEF", "GHIJK", "LMNO", "PRSTU", "VYZXWQ", "0123456789" I have a list in alphabetical order; I want names starting with "ABCDEF" to be in one a ...

javascriptangulartypescriptangular14

How to select a DOM element in Angular 2.x

Although it may seem simple, there are not many examples of using Angular 2.0 yet. In one of my components, I have a situation where I need to add a class to the body tag. However, my application is bootstrapped deeper than the body element, so I am looki ...

javascriptangulartypescript

Currency symbol display option "narrowSymbol" is not compatible with Next.Js 9.4.4 when using Intl.NumberFormat

I am currently utilizing Next.JS version 9.4.4 When attempting to implement the following code: new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency, useGrouping: true, currencyDisplay: 'narrowSymbol'}); I ...

javascriptreactjstypescriptnext.js

Changing Enum Value to Text

In my enum file, I have defined an object for PaymentTypes: export enum PaymentTypes { Invoice = 1, CreditCard = 2, PrePayment = 3, } When I fetch data as an array from the database, it also includes PaymentType represented as numbers: order: ...

javascripttypescriptenums

What are the best practices for securely storing SSL certificates and public/private keys?

I possess keys that appear like this. MIID0DCCArigAwIBAgIBATANBgkqhkiG9w0BAQUFADB/MQswCQYDVQQGEwJGUjET MBEGA1UECAwKU29tZS1TdGF0ZTEOMAwGA1UEBwwFUGFyaXMxDTALBgNVBAoMBERp bWkxDTALBgNVBAsMBE5TQlUxEDAOBgNVBAMMB0RpbWkgQ0ExGzAZBgkqhkiG9w0B CQEWDGRpbWlAZGltaS5mcjA ...

javascriptnode.jstypescriptsecurity

Maintaining checkbox selection while switching pages in Angular

When I try to edit the settings for accepting payments in all currencies under the "Pricing" component, the checkbox is unchecked every time I return to the "General" section. How can I prevent this from happening and keep the checkbox checked? Refer to ...

angulartypescriptcheckbox

Incorporating HTTP status codes into error handling

I have developed an API where I've organized the services separately from the controllers. In my service functions, I've included basic checks to trigger errors when certain conditions are met. Currently, my controller function just returns a 500 ...

node.jstypescriptexpresserror-handling

Using a specific type of keys, attempting to set two instances of those keys simultaneously will result in an error of that type

Consider this scenario: type Example = { x: string, y: number } const a: Example = { x: "x", y: 1 } const b: Example = { x: "y", y: 2 } const issue = (keys: (keyof Example)[]) => { keys.forEach(key => { a[key] ...

typescript

The Material UI Datagrid is failing to display any data

I'm currently facing a challenge that has left me scratching my head. I've implemented Material UI Datagrids, but for some reason, I can't get it to populate with data, and the reason eludes me. Even though the Component profiler shows that ...

reactjstypescriptmaterial-uimobx-react