So far in these tutorials, we have set up our personal access tokens on GitHub, set up a KOS studio image, and installed and configured NVM and Node.

In this video, we install KOS tools to set up the development environment. We start by using KOS UI CLI, a command line tool that will create a project and have it pre-configured for KOS application development. We then use npm to install the KOS UI CLI.

After KOS UI SDK has been installed, we should be able to create a project named "dispenser-ui" with modelProjectName as "dispenser-model":

The following will ask what you would like to install: choose workspace.

Then, using the VSCode Nx extension, select generate and then choose kos-theme-project.

Refer : KOS UI SDK Documenatation

So now that we’ve got VS code set up, we’ve set up our personal access tokens for GitHub and we’ve got npm configured, it’s now time to start installing the KOS tools to allow us to get our development environment going.

So first thing we’re going to do is install the KOS UI CLI.

This is a command line tool that will allow us to scaffold out our project and have it all pre-configured, ready to go for developing KOS applications.

So to do that we’re going to use npm and we’re going to install it globally, the dash G. We’re going to install a KOS UI CLI module with the scope of the KOS dev code.

Recall that when we set up our personal access token, that was the scope that we configured so that we were able to pull it off of our registry.

For now, for the time being, we’re going to use the snapshot tag, which is going to give us the latest nightly build of the KOS UI CLI.

So hit install, it’s now going to pull all these things down and when it’s ready there should be a new command line tool available for us to use.

So to do that there is a KOS UI command that is available now on your path.

In this case we’re going to run KOS UI, we’re going to give it the project directive, and it takes two parameters.

One is the project name, we’re going to call it dispenser UI for our purposes, and then there’s the model project name, which is really the sub package within this project that is going to hold all of the models that we’re creating for this particular work.

We’ll get a little bit more into that when we actually take a look at the structure and you’ll better understand why we have this separation.

But for now, just understand that there’s two main parameters that we need to use.

There’s the project name and the model project name.

When you run that, what it does is it puts a number of files to the file system and we can take a look at those momentarily.

So from here, if we wanted to actually take a look at these things, we can CD into the dispense UI and then rather than using the terminal from this point, let’s go forward and just open it up in VS Code.

So from here I can say code and using dot for the current location, it’ll open up a new instance of code at that location with all of the files that are visible.

Up next, we’ll look at installing all of the dependencies and having a bit of a look around the environment to see what’s there.

Bye.