Setting Up the Now UI Framework on MacOS

By Daniel Henrichs

Setup 

Note #1: Anything in <> brackets with 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   

ServiceNow Developer FAQ

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:

< foldername >/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://<instance>.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 its 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

Disclaimer

#servicenow #macOS #nowexperience