Smart UI with a sprinkle of CI / CD
Recently a new version of the Smart UI SDK (21.2) however there breaking issues:
Smart UI SDK 21.2 "broken" ??
IS there something amiss with the 21.2 Smart View SDK that anyone has come across? I've downloaded from Content Server…
How to check if the smartUI SDK is working - The Joy of Content Server
If you get new Content Server Versions, you also have to upgrade your existing smartUI projects to the new version. In…
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.
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
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 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
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.
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
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://firstname.lastname@example.org/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 😎😎😎🎉
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.
Click on the pipeline to start the pipeline wizard. Start by select Azure Repo Git
Once selected, we can select our newly created repo
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.
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.
Checking the logs turns up this error
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.
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.