Smart UI with a sprinkle of CI / CD

Photo by Sharon McCutcheon on Unsplash

Recently a new version of the Smart UI SDK (21.2) however there breaking issues:

Smart UI SDK 21.2 "broken" ??

How to check if the smartUI SDK is working - The Joy of Content Server

Now both articles detail some workarounds what I wanted to run through was how some basic steps could be taken to ensure that software doesn't get shipped to your customers in the first place.

Sprinkle some CI / CD

In this article, we will not be deep-diving too much into the world of continuous integration / continuous delivery. But hopefully, give you enough information to perform the bare minimum that would have picked up some of the errors experienced in this release.

For this we will be using the Microsoft Devop platforms, There is a bunch of CI / CD out there like GitHub Actions (https://docs.github.com/en/actions) and BitBucket Pipelines (https://bitbucket.org/product/features/pipelines).

For us, what will use the CI / CD for to automate the following installation tasks:

• Build the Yeoman generator
• Run the Yeoman generator to create a basic CSUI widget project
• Build the project

The difference is that we will script the entire exercise to confirm that this will build correctly without errors. This forms the basis for CI / CD — we can build on this to perform automated testing and package publishing meaning that you get more confidence in what you are publishing to your customers.

Project Setup

As always we will need a few things, and below is our shopping list:

• Node JS —I am using a Node Version switcher (NVS or NVM) will do. The Smart UI is build using the LTS version of node which is version 14 (at the time of writing)
• The Smart UI Zip files from the knowledge center
• GIT installed
• a JavaScript editor- I am using VS Code 😍

Download the Project

The first thing you will need to download the zip file from the Knowledge Centre.

Once downloaded you can select a location and unzip this file

Project Unzipped

Project Tidy Up

To get this all working nicely together we will be using GIT and using the Azure DevOps as a repository for our code.

Firstly we browse to the folder and we initiate GIT

git init

We then need to ignore — now the SDK does ship with node_modules, but if you using versions correctly then an npm install should install the correct versions of the software.

Ignore node_modules

Now with .gitignore in place we can add out files to the repo:

git add -A

Then you can commit those files to the repo

git commit -m 'Initial Commit'

Create your Repo

Next in Azure DevOps you will need to create a repository for your code

Create a repo in Azure DevOps

Once created it will give you instructions for how to add the repo as a remote for your repository commands they will look something like this:

git remote add origin https://xxx@dev.azure.com/xxx/generator-cs-ui/_git/generator-cs-ui

And then we commit the changes:

git push -u origin --all

Now we have everything in the repo 😎😎😎🎉

The initial commit of the Yeoman generator

Extra points can be made for either using branching or tags to manage the changes to the repo over time (it does add some management overhead).

Make a Pipeline

Now that we have our repo established — let's go ahead and set up a pipeline that will build what comes with the base version of the Smart UI.

Create a new pipeline

Click on the pipeline to start the pipeline wizard. Start by select Azure Repo Git

Select Azure Repos Git

Once selected, we can select our newly created repo

Select the repository

Next, we can select a boilerplate

From here we make some changes to the yml file it creates

We add npm install grunt-cli yo -g to make sure that we have the grunt and the yo npm packages installed globally. Additionally, we run the npm run test this makes what we run the included yeoman test.

The inital pipline.yml file

Save the changes and commit this change to the repo (this will create a azure-pipelines.yml file).

This file will automatically run each time a commit is made and send you a notification to let you know it has either run successfully or failed. So let's see if it ran successfully.

Initial Build run failed

Checking the logs turns up this error

ReferenceError: primordials is not defined

ReferenceError: primordials is not defined

Now, this was one of the errors that were picked up (Article is here). To correct this in your original project we will need to add an npm-shrinkwrap.json file to the root of our project

Commit this file and the pipeline will automatically run again.

Yay build successful

Wrapping up

Let's be clear — CI / CD is not a panacea. You will still have bugs in your code — that is just the law of averages — if you have 100 bugs in 10,000 lines people are only going to focus on the 100 bugs and not the fact that you were right 99% of the time.

But using some of the basic toolings that exist within modern code repositories that assist your workflows — allowing you to automate at least initial checks to make sure what is being shipped out the door is of a quality that people can start using.

This is not a dig at anyone who is not using these tools, after all, I am one guy and not someone working for a company with a market cap of ~15 billion dollars. But if these issues are creeping into your workflow as your workforce expands and becomes more distributed — then it might be worth taking a beat and see what can be done in your processes to make things better. And that may take the form of automating the basic stuff so that you can better spend your time improving the main product.

In my next article, we will extend this pipeline to build the yeoman generator properly (and automatically) — this will help shake out further issues with the generator.

Connect with Driver Lane on Twitter, and LinkedIn, or directly on our website.