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.

Library project file structure

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.

Application

Now the hard stuff.

All the magic is done in angular.json file. Mostly. It means you need to modify also pipeline script (this project uses azure-pipelines.yml). And later in article I will show you how to use it (for example) in index.html file.

Here is angular.json file structure, stripped down to stuff that is needed. Let’s now focus just on assets option.

First two lines says to angular, during build, where to find favicon and second where the static assets file should be found (line 11 & 12).

One picture for thousand words

Next four options are basically two and two pair. Difference is only in file path.
Line 13 tells angular to copy files from locally built library project to current application project. If found, of course. But when you did not build it, and you just used npm install ui-lib ? See next.
Line 18 tells angular to copy files from installed package in node_modules.
Now after building project (locally) you can access them directly.

As example can be index.html that can access image and show it where it should be. Simple favicon code (yes, I know fav image can be just dropped in there in /src, this is just example):

<link rel="icon" type="image/x-icon" href="./favicon.ico" />

And here is something more complicated:

<link rel="dx-theme" data-theme="generic.app.light" href="./assets/css/generic-light.css" data-active="true">

Building

Basically for local build you need just run the build script from library (see prerequisites part). In sake of simplicity here it is:

"build-ui-lib-separatedInWorkspace": "ng build ui-lib && cp -R ../ui-workspace/dist ./dist"

All is setup in angular json.file, so after build you can start using your assets. Also you can directly access them via web explorer.

Assets placement in running project

Build & Deploy

I am not DevOps guy, but i need to be sometimes. You know, corporate. Everybody for himself. Whatever, I can handle it. Hold my beer.

DevOps pipeline on azure

In azure-pipelines.yml you need to put one step between commands install and build. To be exact, you need to copy all assets to its right place. I will just tell you how.

- task: CmdLine@2
  inputs:
    script: |
      cp -r ./node_modules/ui-lib/lib/assets/* ./src/assets/
      echo '-done'
      ls ./src/assets/
      ls ./src/assets/images/
      ls ./src/assets/images/
  displayName: 'Copy static assets'

Done. Enjoy. Buy me a beer or something as thanks.

Pro Tip

While working on CSS files, that need to be in library, copy them to project temporary. You now don’t have to build lib and rebuild app every time when change is introduced. This will make development even more painless.

Next

Creating npm package from your custom ui library using Azure and Artifactory in corporate environment