BookmarkSubscribeRSS Feed

Jump start your SAS Viya Application

Started ‎05-02-2022 by
Modified ‎05-02-2022 by
Views 1,698

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:
  • 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.

fileblog.png

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.

 

 

Version history
Last update:
‎05-02-2022 08:24 AM
Updated by:
Contributors

sas-innovate-2024.png

Don't miss out on SAS Innovate - Register now for the FREE Livestream!

Can't make it to Vegas? No problem! Watch our general sessions LIVE or on-demand starting April 17th. Hear from SAS execs, best-selling author Adam Grant, Hot Ones host Sean Evans, top tech journalist Kara Swisher, AI expert Cassie Kozyrkov, and the mind-blowing dance crew iLuminate! Plus, get access to over 20 breakout sessions.

 

Register now!

Free course: Data Literacy Essentials

Data Literacy is for all, even absolute beginners. Jump on board with this free e-learning  and boost your career prospects.

Get Started

Article Tags