React in ServiceNow applications (advanced)

4 min readJan 10, 2020

The basic setup for React applications in ServiceNow is simple and straightforward: UI page represents index.html, CSS/JS code stored as stylesheets and images stored in System UI/Images (db_image table).

Key benefit of this setup is simplicity. No specific actions required prior to deployment. You can take create-react-app boilerplate, build it and deploy into ServiceNow as is. However, the basic setup has multiple limitations — it may not be very efficient for complex apps and may create a significant overhead for post-deployment maintenance.

Fortunately, there is another option how to serve React (Vue, Angular etc.) applications in ServiceNow with literally no limitations and drag-n-drop deployment process.

React in ServiceNow — Advanced Approach

The key idea is to use Scripted REST API (instead of style sheets) for serving bundle and media files. This approach makes app deployment as simple as drag-n-drop, but it requires some preparation on both ServiceNow and React app sides.

1. ServiceNow Infrastructure

First, we still need a UI page, which serves as a container for index.html.

Then, we need a Scripted REST API where we store bundle and media files as attachments. This is how GET resource for serving JS and CSS files looks:

GET resource for serving Javascript and CSS files

The way it works is self-explanatory: when index.html (UI page) requests API_resource_url/{file_name} ServiceNow responds with the content of that file. E.g. the following reference in UI page loads the bundle script app-bundle-js (which attached to the resource record):

You may notice that there is no common .js or .css extension on the file, that is on purpose, because you cannot use ‘.’ dot in ServiceNow API path name.

Image files should be stored in a very similar manner with a slightly different code to accommodate content type:

GET resource for serving PNG, Jpeg and GIF files

In this git repo you can find XML update set react-container-servicenow.xml — it is a scoped application which contains a Scripted REST API with multiple GET resources to serve different types of files.

2. React Boilerplate

We created a React boilerplate, which is specifically configured to build ServiceNow-ready packages: https://github.com/elinsoftware/sn-react

The key feature is the ability to build the application in a way which makes deployment as simple as drag-n-drop.

Below you’ll find step-by-step instructions how to make it work all together.

Making it work all together

1. Install react app container (ServiceNow scoped application)

Download and install react-container-servicenow.xml XML update set from this repo. The update set contains a scoped application with UI page and Scripted REST API:

2. Install react boiler plate

Clone GitHub repo:

git clone https://github.com/elinsoftware/sn-react.git

Navigate to sn-react folder and install npm dependencies:

npm install

3. Update configuration settings (optional)

In order to run/build the boilerplate as-is you don’t need to update configurational settings, so you can just run the app locally by:

npm start

However, if (when) you will need to perform REST calls and use your own API resources to serve the files — you will need to update the configuration settings in ./webpack/servicenow.config.js

Configuration file provides a detailed overview of all of the settings:

4. Build deployment package

Build a ServiceNow-ready package by:

npm run build

This creates ./dist/ folder with index.html file and a number of subfolders, where you can find your bundle files.

“dist” folder structure mimics your ServiceNow API structure, so you can deploy the application files to ServiceNow by drag-n-drop.

5. Deploy to ServiceNow

This is the most exciting part. All you need to do is just:

Simply copy html code from ./dist/index.html into UI page. HTML code already includes all necessary ServiceNow-code injections for:

Attach (drag-n-drop) the files from ./dist/api/... folders to the corresponding GET resources. Your JS resource should look like this (see attached files on a form):