UI Framework: basic NPM workflows

[Foster Hardie]

ServiceNow has embraced the NPM (Node Package Manager) ecosystem with its new UI Framework. For those of us who do not come from a REACT or similar node.js development background, however, it is not immediately clear how to do some basic things as we transition from other types of development. I hope this list will be helpful for folks as they explore the new framework capabilities.

ServiceNow documentation provides the minimal NPM commands for building a new component. This documentation is excellent for getting started, and the following does not repeat what's there, but rather builds on it. I am also skipping steps to check code into Git. This Stack Overflow discussion provides clear up-to-date instructions as of this draft.

Component-of-Components: e.g., how to add a component you've already built to another component

1. Check the component you wish to reuse into GitHub
2. Install the component into your new component.
3. 1. Copy the URL from the GitHub website (e.g., https://github.com/{your-repository}/{your-component})
   2. As with other (e.g., @servicenow) components, start in the project's root folder, then run:
   3. npm install https://github.com/{your-repository}/{your-component}
   4. Check the packages.json file to see the dependency it added, copy the new dependency name (e.g., @{your-scope}/{your-component}
4. Add the following to the file containing your view definition
5. include "@{your-scope}/{your-component}";

Rapid Develop Dependencies: e.g., link local component code bases to frequently rebuilding dependencies

1. Only after creating the GitHub dependency, create a link to the local copy of the referenced code. First, change your path to the root folder of the dependency you've referenced, then run
2. npm link
3. Then change your path to the component you've added the dependency to and run
4. npm link @{your-scope}/{your-component}
5. If it worked (I've found you have to be precise in the sequence above) when you run npm develop in this path, changes to the dependency component will automatically be reflected in the consuming component

Deploy dependent components to ServiceNow

1. Add dependencies to the now-ui.json file's "innerComponents" property
2. 1. it is an array of the element names (e.g., what you put inside the createCustomElement function)
3. You must still deploy the dependency component independently of the consuming component. I use a batch file to deploy all components in order from dependencies to dependents 

//alternatively, get the sys_id's of dependencies from sys_ux_lib_component and add to the sys_ux_lib_source_script record
var consumer = new GlideRecord('sys_ux_lib_source_script');
if(consumer.get('{sys_id}')) {
    consumer.inner_components = '{sys_id or comma-separated list of sys_ids}';
    consumer.update();
}