Jump start your SAS Viya Application
This article details a starter app, as described in the viyaapp GitHub repository, to setup your SAS Viya Web Application with minimal effort. Note: viyaapp is a branch of the restaf-uidemos repository. Upgrading from the sample application to your own application is as simple as replacing the index.html file and setting some configuration values. Additionally, creating a docker container for your application is a snap, as you'll see documented in this posting.
SAS Viya Server Setup
You need to do this for all applications that will access SAS Viya. Typically these are set up by a SAS Viya Administrator.
- Create a clientid and clientsecret. This document uses these values:
- flow: authorization_code
- clientid: viyaapp
- clientsecret: secret
- redirect: <https://localhost:5002/viyaapp>
- Also set the following using SAS Environment configurations:
- sas.commons.web.security.cors: set AllowedUrl to https://localhost:5002
- sas.commons.web.security.csrf: set to .*
- sas.commons.web.security.cookies: set sameSite to None
Technical Details
The starter application uses @sassoftware/viya-appserverjs as its app server. The primary purpose of the app server is to handle authentication and serve up the application to the browser.
As you will notice, the application has quite a few configurations. All these configurations are read by the application server to setup the application. Visit this wiki pages for details.
Install
Clone the repository and install the dependencies
git clone https://github.com/sassoftware/restaf-uidemos -b viyaapp viyaapp
npm install
cd viyaapp
Configuration
Edit the .env file in the cloned repository and set the value of VIYA_SERVER to your SAS Viya server url.
VIYA_SERVER=https://Your-viya-server-url
CLIENTID=clientapp
CLIENTSECRET=secret
APPNAME=viyaapp
APPHOST=localhost
APPPORT=5002
# If APPENTRY is not specified, it defaults to index.html
APPENTRY=index.html
Run the application
npm start
Go to your browser and enter this to access the application
https://localhost:5002/viyaapp
You should get the SAS Logon dialog. Logon on with you SAS Viya userid and password. This will open the application.
Default Application
The application is simple on functionality. It lists the available files on the SAS server. Press the button to display the file list.
The default application is in public/index.html. The full html is shown below with embedded notes.
<html>
<head>
<meta charset="UTF-8" >
<! the script below returns useful information from server in a javascript object name LOGONPAYLOAD -->
<!-- The most useful element is LOGONPAYLOAD.host , the url of the Viya server -->
<!-- This helps avoid hard codung the Viya host url in the html -->
<script src="/viyaapp/appenv" > </script>
<-- http package to make calls to Viya -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js">></script>
<script>
function setup() {
console.log(LOGONPAYLOAD); /* for learning purposes */
}
function runit() {
document.getElementById('output').innerHTML = '...running';
let config = {
url : `${LOGONPAYLOAD.host}/files/files`,
method: 'GET',
withCredentials: true /* This is required. This allows the browser communicate the credentials to the server */
}
axios(config)
.then (r => {
console.log(r.data.items);
let items = r.data.items.map( item => { return item.id;})
document.getElementById('output').innerHTML = JSON.stringify(items, null, 4);
})
.catch(err => {
document.getElementById('output').innerHTML = JSON.stringify(err, null, 4);
})
}
</script>
<body onload="setup()">
<h1 id="head">Hi</h1>
<h2> Custom call to Viya Server</h2>
<div>
<button onclick="runit()">
Press to make a call to file service
</button>
<br />
<br />
</div>
<div>
<pre id="output"></pre>
</div>
</body>
</html>
Points of interest
- Replace index.html to point to your application's main entry point. If it is not index.html, then edit .env file and set the APPENTRY value to your entry point.
- Note that there is no code in the application for logging. This is handled for you by the app server included in this starter app.
- There are no references to authorization token. In your http call payload, set the withCredentials to true as shown in the example above. This lets the browser do the necessary bookkeeping to authorize the calls to SAS Viya.
- The /viyaapp/appenv end point is optional. It sets a JS variable LOGONPAYLOAD with the following structure. The host field is the most useful one. This is used in the application listed above.
"authType": "server", "redirect": null, /* advanced feature */ "host" : "your viya server url", "clientID": "your client id", "appName" : "The value of the APPNAME field in the .env file", "keepAlive": null, /* advanced feature to keep the session alive for longer periods */ "ns" : null /* for future use
Bonus Points
Change the value of APPENTRY in the .env file to the value below. Restart the application and visit the same site for a more interesting starter app.
APPENTRY=indexrestaf
Running in Docker
To run your application in docker, edit the docker-compose file. Set the value of VIYA_SERVER to the appropriate value.
version: "3.8"
services:
viyaapp:
build: .
restart: always
ports:
- 5002:8080
environment:
- VIYA_SERVER=https://<your viya url>
- CLIENTID=clientapp
- CLIENTSECRET=secret
- APPNAME=viyaapp
Note: The docker-compose command uses the Dockerfile in the same directory to create the container. The application is running on port 8080 in the container and the port is mapped to 5002 in the docker-compose file.
To run the application in docker run the following command.
docker compose up
and access the application as before.
https://localhost:5002/viyaapp
Conclusion
You just built a simple web application for SAS Viya with minimal effort. To make it your own, replace the contents of the public directory with your assets and modify the values in the configuration files.
