Smart UI … adding more sprinkles

Photo by David Calavera on Unsplash

In this article, we run through some basic steps that could be done to shake out some basic errors in the Smart UI generator.

Smart UI with a sprinkle of CI / CD

Today we want to expand on that work to also automate some builds of the widget. In the end, we will then have a system in place that will allow us to:

• Automatically build the yeoman generator
• Test the resulting yeoman build
• Automate the widget build
• And build out the final project

Some prep work

In this, we will be making changes to the repo and the pipeline which is going to trigger the existing pipeline. In some instances and environments, you have a limited amount of runs for your pipelines. So it is a good idea to disable these before you start making changes.

In Azure DevOps, we go to the pipeline we want to disable, select the context menu, and select edit

Let's edit this pipeline so it doesn’t run

Within the edit screen in the top right, you will find another context menu. Select that and then select Settings

Select Settings

From here you can select disable the pipeline.

Select disable and click save

We will reenable this pipeline at the end once we have made our changes.

Let's fix some stuff

In the last post, we had this error that we worked around.

ReferenceError: primordials is not defined

In that article, I wanted to deploy are more permanent fix to resolve this issue. Given that the error is being generated in the yeoman generator and not in the actual package being deployed I think it is time we give the generator a make-over with a long-needed upgrade.

Makeover time!!

Makeover (let's upgrade the generator)

A look at the csui-extension project and you will see that the version of yeoman being used it 0.18.9. The latest version of the same project 5.2.0. Performing a drastic upgrade like this is is going to cause us some problems because there are at least 5 rounds of some hefty version breaks to work through. In short, that is going to mean a full re-write of:

• The Smart UI app generator
• The Widget generator
• and the test scripts

It is important to note that this will not change the resulting Smart UI module code. If there are errors there, we will find them later. But it will mean that we can build our csui-extension project on a new version of Node without error which should mean we just get to the good stuff (which is making a Smart UI module of course).

These changes will be made on your local machine, once completed we can then add them to the repo. It is a good idea to test them locally before re-enabling the pipeline to make sure you have some confidence.

Package.json

We will start first with package.json. In the original version, we had something like this

"engines": {
  "node": ">=4"
},
"dependencies": {
  "chalk": "~2.3.0",
  "escodegen": "^1.9.0",
  "esprima": "^4.0.0",
  "lodash": "~4.17.4",
  "superb": "~2.0.0",
  "underscore.string": "~3.3.4",
  "yeoman-generator": "0.18.9",
  "yosay": "~2.0.1"
 },
"devDependencies": {
  "jshint": "~2.9.5",
  "mocha": "~4.0.1"
}

And we are going to replace that section with this:

"engines": {
  "node": ">=12"
},
"dependencies": {
  "chalk": "~4.1.1",
  "escodegen": "^2.0.0",
  "esprima": "^4.0.1",
  "lodash": "~4.17.21",
  "superb": "~4.0.0",
  "underscore.string": "~3.3.5",
  "yeoman-generator": "5.2.0",
  "yosay": "~2.0.2"
 },
"devDependencies": {
  "jshint": "~2.12.0",
  "mocha": "~8.4.0",
  "yeoman-assert": "^3.1.1",
  "yeoman-environment": "^3.4.0",
  "yeoman-test": "^6.0.0"
}

The modules highlighted in bold have been updated. Make sure that they are installed using the following command:

npm install

And given that we will be using npm link to test this locally, use that command again

npm link

app/index.js

In re-writing this there was some adjustment to the new version of yeoman, but for the most part the documentation and the issue log on the yeoman GitHub page got me through.

It wasn't a straight translation, there were some code design choices that I made that did veer away from the original. The first was the technique of combining variable calls into one line. This was a trick that was used when making browser-based applications. The idea being that the variables would be registered in one command instead of several. Given that this is running in a Node based environment it less important and makes the code more readable IMO.

var chalk = require('chalk'),
superb = require('superb'),
yeoman = require('yeoman-generator'),
yosay = require('yosay'),
_ = require('../shared/lodash-complete');

Becomes…

const chalk = require('chalk');
const superb = require('superb');
const yosay = require('yosay');
const _ = require('../shared/lodash-complete');
const Generator = require('yeoman-generator');
-_.extend(Generator.prototype, require('yeoman-generator/lib/actions/install'));

The other notable change in style was to use templated strings instead of concatenated strings — again this is done to improve readability

this.log(yosay(
'Welcome to the ' + superb() + ' ' + chalk.red('CS UI Extension') + ' generator!'
));

Becomes…

this.log(yosay(`Welcome to the ${superb.random()} ${chalk.red('CS UI Extension')} generator!`));

And here is the end result…

You will also notice that I put in a ‘secret sauce’ option. This is just a generic set of defaults that I am going to use with my pipeline to do an end-to-end build of the project.

widget/index.js

For the widget, most of the same logic remains, especially in the extionsJson and the bundleindex sections.

test/test-app.js

And finally with the test- again there was a re-write of the test scripts to ensure that the same tests were covered

Now we need to commit these changes; re-enable the pipeline and run it again and make sure it all works.

So now we have removed our npm-shrinkwrap.json and the build tool is no longer a source of errors 👍👍👍

Extending the pipeline with some secret sauce

We have now removed the errors from the generator. I want to turn my attention to running the yo generator and building the project (this should also shake any missing modules/dependencies).

For the eagle-eyed, I added an option to the yo generators called ‘secret-sauce’. With this option, the yo generator will be prefilled so there will be no need to enter values into the prompt.

To enable this we have created a second script block into our pipeline. This will:

• Create a new folder
• Build the project Smart UI
• Build a widget into the sample project (we will need to use the — force flag to overwrite the files

Updated pipeline to install and build yeoman project

Commit the pipeline and it will re-run and hopefully sucessfully

And finally, the build step the pipeline

and….

failzo

Wrapping up

And that is where I will end it I think — it is confirmed that this package is broken.

SDK Tools Installation

The point of this wasn't to fix a broken release — but instead, play with the idea of using CI / CD to perform basic build and install checks before the software is shipped out the door.

Like the last article, this isn't a dig — and even if we do successfully build here there are just as likely going to be bugs elsewhere — that is just the nature of things.

Hopefully, this starts some interesting discussions.

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