Troubleshooting the creation of a SKYUX Addin on Windows

I just came back from BBCon in Nashville all fired up ready to create a SKY UX Addin. For those of you new to this, this can be a tile in a SKY based application i.e. Raiser’s Edge NXT (and other components are to come in the future).

I have tried this in the past without much luck. There were issues with the sky ux cli not working on my Windows machine (I am told the dev team use mainly Macs). Fast forward a few years and I thought that I would give it a go.

Before I start, I just wanted to say that the documentation that Blackbaud have produced for all aspects of the SKY developer platform is really very good. It is so much better than anything that they have ever produced in the past. I wanted to document this in case anybody should ever run into the same difficulty. It may be that you will never have this problem (especially if you, unlike me, actually read the prerequisites before starting!)

Configuration

I am primarily following the instructions here

However, before I can even start with that I needed to install the SKY UX sdk. This is done with the following:

npm install -g @blackbaud/skyux-cli

npm install -g @skyux-sdk/cli (thanks Ben Lambert for setting me straight!)

I then followed the instructions in the main article. I fired up Visual Studio Code, started a terminal window and went into my project directory.

skyux new -t addin

This was where the process failed for the first time. I got the error:

 addin template successfully cloned.
Setting @blackbaud/skyux version 2.54.1
Setting @blackbaud/skyux-builder version 1.36.0
× Running npm install (can take several minutes)
npm install failed.

Following this I ran a verbose version of this

skyux new -t addin --logLevel verbose

This gave me much more information. It told me that python was not installed on my system so it could not work.

I ran the following to install python. However this was not all plain sailing either… I ran this from an command prompt run as Administrator

npm install --global --production windows-build-tools

This first time this ran it told me that Python was installed successfully but then it just sat there for a while. Task manager told me that the command prompt was doing something but nothing happened on the screen. I waited for at least half an hour. The command prompt no longer appear to be working hard (according to task manager) so I broke out of the process (CTRL+C). I ran the same process again and it worked very quickly returning me back to the command prompt.

I then ran the skyux new command again and everything appeared to install.

Serving up the application

The next step according to the instructions was to “serve” the application. There is one, probably obvious step, that is missing from the instructions. In Visual Studio Code you need to open the folder where your project has been install. When you first open VSC assuming that no previous workspace or folder has been opened (I had closed mine) all you have is the welcome page. Click on the open folder button to show your app in the folder structure.

You can then use serve the app:

skyux serve -l local

5 thoughts on “Troubleshooting the creation of a SKYUX Addin on Windows

  1. Hi David,

    When you installed the SKYUX CLI, you should have used:
    npm install -g @skyux-sdk/skyux-cli

    …which is documented on the SKYUX getting-started prereqs page:
    https://developer.blackbaud.com/skyux/learn/get-started/prereqs/initial-setup#sky-ux-cli

    Do you have an old link somewhere that still refers to @blackbaud/skyux-cli? If so, let me know and we’ll correct that. Our documentation looks correct to me, but let me know where you saw that old command.

    We’ll update the add-in tutorials to explicitly mention opening the working folder before trying to serve the SPA locally (the CLI does explicitly state “Change into that directory and ‘run skyux’ serve to begin” but we’ll make this more obvious in the tutorials).

    Thanks for the feedback here – looking forward to seeing more on your progress with add-ins, and please don’t hesitate to reach out if you have any questions or see opportunities for improvement in our docs!

  2. Thanks David, we apologize for the fault in that image. Those responsible have been sacked.

Comments are closed.