Setting Up the Now UI Framework on MacOS

By Daniel Henrichs

Setup

Note #1: 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…)

Note #2: If you currently have a less than successful install on your system you may want to clean it up by following the uninstall / cleanup steps in troubleshooting below.

Note #3: With the release of MacOS Monterey 12.3+, Python 2 is no longer bundled with MacOS by default. At time of writing, the snc ui-component extension requires Python 2 to install some older packages. If the npm install command fails with node-sass or node-gyp errors, use python --version to check that python is installed, and manually install it if it's missing.

1. Install Node & NPM

  1. To install Node & NPM, click here and download the 64-bit macOS Installer (.pkg)  -Run installation

  2. Install SN CLI from Servicenow Store here -Unzip file -CTRL+Click snc-1.1.-osx-installer, then click open -You will then get a pop-up verifying you would like to open, click open -The popup may not show the “Open” option on your first CTRL+Click…if it doesn’t try to  CTRL+Click again and it should show! -Install with all the defaults -Open terminal

  3. Install ui-component extension

   snc extension add --name ui-component

2. Upgrade yo version

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._

After running the above command, yo may throw a warning that it needs an update. The warning should note which command you should run to update yo, but if it doesn't try the following commands.

sudo npm install -g yo@version

or

sudo npm install -g yo@latest

3. Configure CLI

snc configure profile set
Host: <MYINSTANCE>.service-now.com
Login Method: Basic
Username: <MYUSERNAME>
Password: <MYPASSWORD>
Output method: JSON

4. Create new project folder & move to it

mkdir <FOLDERNAME>
cd <FOLDERNAME>

5. Create project

Note: The project name must contain at least one “-“ ex. my-reallygreatproject would work but myreallygreatproject will throw an error.

snc ui-component project --name <PROJECT NAME CONTAINING A HYPHEN> --description ''

-Install dependencies

npm install

-At this point, you will be able to begin creating your components. To do this, you will build within the index.js file found within the following path:

/src//

-Once you have made changes to the code and saved, you will be able to develop locally to see your work within a browser, or deploy directly to Servicenow.

6. Develop Locally

-Open a separate terminal

-CD to the folder you created in Step 4

<foldername>/src//

-Run the following commands

snc ui-component develop
  • Note: On first run the command may get hung up on the following “Proxy server connecting to https://.service-now.com” if this is the case, use the key combinations ‘CTRL+c’ to stop development, then run the command “snc ui-component develop” again.

-You should see this, with the port it's running on here. Noting “Project is running at http://localhost:8081/” in this example.

-In a browser, enter the local host address noted above to see your current work.

7. Deploy to Servicenow

snc ui-component deploy

-To redeploy after changes to code

snc ui-component deploy --force

Steps to Remove Node, NPM, & the ui-component Extension if You Encounter Issues:

** WARNING: If you currently have a node install you care about (ie. An already stood up/existing development environment separate to what you’re trying to configure for now-cli) you may not want to follow these steps as they uninstall the ui-component extension, node, and npm!!! **_

With that out of the way, here are the steps to uninstall/create a clean state if you encounter issues:

To uninstall ui-component extension

-You will need to remove the extension before removing node and NPM. To do so, enter the following command

snc extension remove --name ui-component

To remove node.js & NPM

-Go to MacOS Terminal

-Open the terminal and enter the given below command to know your current directory.

-Go to your root directory.

cd /

Then enter the following path to go to the include directory:

cd /

-If you enter the ls command you should see the node folder. You will need to remove this folder to completely uninstall node from MacOS.

sudo rm -R node

In next step you have to completely remove node_modules from our system.

-Enter the below command to go back to previous folder.

cd lib

-Use the below command to remove the node_modules (NPM) folder.

sudo rm -R node_modules

-Enter the below command to come out from the directory

cd . .

-Go to bin folder using below command

cd bin

-Here you also have to delete the node folder to uninstall the Node js completely.

-Enter the below command to remove the Node js from MacOS.

sudo rm -R node

Finally, you’ve successfully uninstalled the Node JS from MacOS, use the given below command to check whether the Node and NPM are completely removed from the system.

node -v

You have completed your task if you are getting the below output.

command not found: node