Setting Up the Now UI Framework on Windows
By Jon Lucktenberg
Setup
Note: Anything in <> brackets will be replaced with details by the person reading this article (ie. The user’s credentials for basic auth, foldername, project name, etc…)
Install Node & NPM
Install nvm (node version manager) here .
- Download the setup zip file
- Shown in figure 1 below
Unzip and right click to run as administrator and accept defaults
Open command prompt as administrator
Run “nvm install 12.6.0” to install node 12.6.0
Enter “nvm use 12.6.0” in to the command prompt to set the correct version of node
Download and ServiceNow CLI here .
- Unzip and run as administrator snc-1.1.0-windows-x64-installer using default selections
Application file not run file
Security warning may appear, if so, choose “Yes” to prompt
Open the command prompt as an administrator
Next install the ui-component extension
snc extension add --name ui-component
- Install the latest version of yo
npm install -g yo@latest
Note: yo ( https://yeoman.io/ ) is installed with the ui-component extension. It is a scaffolding tool that's leveraged by now-cli, but is out of date in the ui-component build.
Configure your CLI
- Enter the following into your command prompt
snc configure profile set
- Host:
.service-now.com
- Your instance cannot be inactive/sleeping when you try to connect
Login Method: Basic
Username:
Password:
Output method: JSON
Ignore warning of instance “not supporting”
Create a project folder on your computer
- Make a new folder in the directory you want to develop in
- This folder must be empty in order to create a new NowUI project in it
- In the command prompt use cd to navigate to your project folder.
cd C:\Users\User\Desktop\NowUI\VM Test 2
- Create a project. Name MUST have a – in it.
snc ui-component project --name < PROJECT NAME > --description '< DESCRIPTION >'
- Install dependencies
- This always needs to be run after creating a new project
npm install
Open Visual Studio Code
In Visual Studio, go to file -> open folder. Navigate to your project folder
You should be developing in the index.js in the x-123456-name folder
Developing locally
Open a command prompt and navigate to your project directory
Run the following command
snc ui-component develop
- If successful, it should say “Compiled successfully”
- The command prompt should also present this when you save the changes in your index.js file
To see your component, enter the displayed port into your browser. Enter this into your browser to see your current work.
If you want to stop developing enter ctrl+c to stop development. May have to hit it a few times.
Deploying a component (stop developing before you try to deploy)
- Enter the following in to the command prompt
snc ui-component deploy
If successful, you should see the following:
To redeploy after you make changes
snc ui-component deploy --force
To find and see your component go to UI builder in the ServiceNow app navigator
Open an existing experience and add your component to it.
- Unless you changed the name of the component it will be called my component
Setup F.A.Q.
Issues with developer instance authentication and 401 errors while trying to create new projects
We encountered an error where the CLI would still reference an old PDI even after using snc configure profile set (This did update the config file in the CLI install folder). Using the below command seemed to fix it.
Another error we encountered was a 401 failure when trying to create a project even though we successfully connected to the instance using snc configure profile set. Using this command seemed to address that error as well.
We are currently unable to connect our CLIs to San Diego version instances.
You can find old credentials stored for each instance you have connected to by navigating to Control Panel\User Accounts\Credential Manager in the control panel.
snc ui-component login {instance_url} basic {username} {password}