Static Assets in Node.js Library

Photo by Zan on Unsplash

While world was burning in 2020, I was working on bigger project with strong focus on branding, with multiple customer facing applications. I decided to implement good practice approach and create common UI library to share common stuff between apps. Therefore applications can share components, functions and default options from one up-to-date npm package.

TL;DR: How to create and setup static assets from library using Node.js and Angular

There was one (of many) thing that I spent little bit more time with. Solve challenge of sharing static assets as CSS files and images and accessing them from your application.

The challenge

The challenge was to setup project so it can build in prod successfully, and also setup local build so I can just develop things fast from my machine (some DELL or what).

Prerequisites

I wrote an article how to setup project and library — here is link.

Time for coffee…

…okay, I’m back.

Library

Put your static assets as CSS files, images and other stuff you need to access from your application as pictured below.

That’s it? Hold on. Scripts, don’t forget building scripts. Basically just add ui-lib-dev-local script which:
- builds,
- create assets folder in dist folder,
- copy stuff from project to freshly build local library.

"scripts": {
   "ng": "ng",
   "build-lib": "ng build ui-lib",
   "ui-lib-dev-local": "ng build ui-lib && mkdir dist/ui-lib/lib/assets && cp -R projects/ui-lib/src/lib/assets/ dist/ui-lib/lib/assets/"

Note: You can call this script from other project, just check prerequisites to see how.