In this article, you will learn how to create, build, and most importantly: deploy a VueJS application on a ServiceNow instance.
Credit goes to Andrew Pishchulin for his React application in ServiceNow, which provided the clues I needed to write a similar article about VueJS
1. Create VueJS application
Open your favorite command line, and follow the official Vue CLI instructions here to create your sample app. Shortcut: if you're like me, and you don't want to read a long article, here's the important command line:
vue create hello-worldThe vue CLI will ask you some questions; just press return to accept the default choices
Now let's confirm the simple app you just created is working:
cd hello-world
npm run serveOpen a browser and navigate to http://localhost:8080. Your boilerplate VueJS app should appear. It's currently hosted on your local computer, but we want to serve it from your ServiceNow instance, so that's what we'll do next.
2. Build the VueJS application for distribution, generating as few files as possible
A sophisticated VueJS application can contain hundreds of Javascript and CSS files once it's built for distribution. Our goal is to reduce the number of files we need to copy to your ServiceNow instance, in order to make it as easy as possible to deploy updates. By default, Vue splits apps into separate files, in order to improve loading times. The following configuration (specifically, splitChunks: false) instructs the vue compiler not to break apart your app into as many files as it normally would.
Create a file named vue.config.js in your hello-world folder, and paste the following into it:
const path = require('path')
module.exports = {
css: {
extract: true,
},
configureWebpack: {
optimization: {
splitChunks: false
},
resolve: {
alias: {
'vue$': path.resolve('./node_modules/vue/dist/vue.common.js'),
},
},
},
}
Now go back to the command line (if npm run serve is still running, press ctrl-C to kill it) and build the VueJS app for distribution
npm run buildNotice a new folder named "dist" has been created inside your hello-world folder. We'll need a couple files from there in the next section.
3. Copy CSS and Javascript assets to your ServiceNow instance
- In ServiceNow, navigate to Content Management > Style Sheets
- Create two style sheet records (the names don't really matter, but for simplicity I will name them):
-
- Name the first one "vuejs_tutorial_main"
- In your local hello-world folder, open the file dist/js/app.SOME_RANDOM_TEXT.js and copy its contents into the ServiceNow Style field
- Name the second style sheet "vuejs_tutorial_css"
- In your local hello-world folder, open the file dist/css/app.SOME_RANDOM_TEXT.css and copy its contents into the ServiceNow Style field
- Important: copy the sys_id of both style sheet records you just created. For example, on my instance, the sys_ids were
-
- b4b944bcdb7dbb00bbdbff971d9619bb -> sys_id of vuejs_tutorial_main
- 2a49ccbcdb7dbb00bbdbff971d9619cc -> sys_id of vuejs_tutorial_css
You will need these two sys_ids for the next step. Don't worry, you'll only need to do this once!
4. One-time prepare your instance for deployment
Every VueJS app needs a core HTML file, which is basically the equivalent of index.html starting point. For this one-time setup, we will create a UI page, and link its Javascript and CSS to the sys_ids you created in the previous step.
- Create a UI Page, name it "vueindex" and set Direct = true
- Replace the entire contents of the UI Page's HTML field with the following HTML
- Edit the HTML you just pasted:
- Replace SYS_ID_OF_YOUR_CSS_STYLESHEET with the sys_id of your vuejs_tutorial_css style sheet record
- Replace SYS_ID_OF_YOUR_MAIN_JS with the sys_id of your vuejs_tutorial_main record
- Important: each file is referenced twice, so make sure you replace both occurrences
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>hello-world</title>
<link href="SYS_ID_OF_YOUR_CSS_STYLESHEET.cssdbx" rel="preload" as="style"/>
<link href="SYS_ID_OF_YOUR_MAIN_JS.cssdbx" rel="preload" as="script"/>
<link href="SYS_ID_OF_YOUR_CSS_STYLESHEET.cssdbx" rel="stylesheet"/>
</head>
<body>
<noscript>
<strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<s cript src="SYS_ID_OF_YOUR_MAIN_JS.cssdbx"></script>
</body>
</html>
5. Test your VueJS app
Click the [Try It] button on your UI Page record. Note that the Vue logo image link is broken; let's rectify that in the next step.
6. Upload static images
We do have one image (VueJS logo) in our application. The most appropriate way to host static images is to store them as Image records in ServiceNow instance:
- Navigate to System UI/Images
- Create a new record, upload the image
- Provide the appropriate name for your image. This is very important: the image name should be the entire path to your image in the hello-world dist/img folder. Your image name should end up something like img/logo.82b9c7a5.png
7. Iterate your VueJS development
Now that you have everything set up on your instance, it's much quicker to iterate new builds of your VueJS app each time you want to deploy it to your instance. After running npm run build from the command line, you only need to copy/paste the contents of the generated js and css files into each of your style sheet records. No need to update anything else, because the sys_ids will remain the same.
Congratulations! You've built and deployed your first VueJS app onto ServiceNow -- enjoy!
8. <<<Under construction>>> Extra credit: make REST calls to ServiceNow using axios
Because you're a sophisticated VueJS coder, you probably already know how to do this...but just in case you're looking for a quick tip to get you started, here's how to make REST calls to your instance, and display the returned data in VueJS.
You'll need to add the excellent axios library to your VueJS project, and while you're at it, add a Material Design library called Vuetify. Use npm to do that:
Go back to the command line (if npm run serve is still running, press ctrl-C to kill it), and from the hello-world directory, execute the following to add the library and restart the development environment:
npm install --save axios
npm install vuetify --save
npm run serveUpdate main.js to include the Vuetify framework
import Vuetify from 'vuetify'
Vue.use(Vuetify)
import 'vuetify/dist/vuetify.min.css'
index.html:
