Building an HTML5/JavaScript/CSS App With SASjs

HTML5/CSS/JavaScript Apps with SASjs

In our previous articles, we have learnt about the SASjs ecosystem and seen how we can build a SAS app with Angular.

In this article, we will look at how to spin up a minimal app that uses plain HTML5 and JavaScript along with the SASjs adapter.

We will describe two ways to build and deploy the @sasjs/minimal-seed-app— a basic approach without using the @sasjs/cli tool, and a faster / more flexible approach that requires the CLI.

Prerequisites

You must have Node.js and NPM installed on your computer to be able to use SASjs.

Basic Approach

Step 1: Clone the repo 📦

The minimal seed app for SASjs is available at https://github.com/sasjs/minimal-seed-app.

The app contains a src folder with three files:

• An index.html with markup for a login form and an area to display data. This file references the @sasjs/adapter library via a script tag.
• A styles.css file with basic styling for UI elements.
• A scripts.js file containing functions that interface with the adapter and put the received data on screen.

The root folder of the app contains a package.json file that manages dependencies and provides a deploy script.

There is also a sasjs folder which contains service definitions to be deployed to your SAS server. This is also the place to save any macros (sasjs/macros), services (sasjs/services) and DDL files (sasjs/db/{LIBREF}).

Step 2: Create the backend SAS services ⚙️

For convenience we will generate the demo services using SAS Studio. Copy and paste the SAS code from the README into the SAS program editor. Modify the value for appLoc– this is the SAS Folder location where the services (Stored Processes or Job Execution Services) will be created. Now execute the program by clicking Run.

Create services in SAS Studio

Step 3: Add your code and configuration 👩‍💻

The reference implementation is quite barebones, and provides basic examples for how to make requests to the SAS server, and display the returned data on the screen. It also does not include any JavaScript dependencies apart from @sasjs/adapter and @sasjs/core.

Depending on your use case, you can add any required HTML files, JavaScript code or styling, or include any third-party dependencies to implement your desired features.

There is a <script> tag in the index.html file that defines the server configuration for the SASjs adapter. You can edit this to match your SAS server’s configuration. The key attributes are:

• serverType — either SAS9 or SASVIYA.
• appLoc — the location to which you deployed your backend services in step 2 above.

You can also add any backend services, macros and DDL files to the sasjs folder as described above.

Step 4: Go! 🚀

You are now ready to deploy your app! 💥

You can deploy it using the NPM deploy script provided in package.json. This script requires two environment variables to be set:

SSH_ACCOUNT — your SSH account, this is of the form username@domain.com

DEPLOY_PATH — the path on the server where the app will be deployed to, typically /var/www/html/<some-subfolder> in SAS Viya. More information on finding your static content folder is available here.

You can run the script like so:

SSH_ACCOUNT=me@my-sas-server.com DEPLOY_PATH=/var/www/html/my-folder/myapp npm run deploy

And that’s it! You now have a working app deployed to your SAS server, e.g. <your-sas-server>/<some-subfolder>/<app-name>.

Using the SASjs CLI

To make it even easier to scaffold up SASjs apps, we’ve created a CLI that provides a create command (We’ll have a full article about all the commands and features of the CLI later in the series 🎁).

Step 1: Install the CLI 🛠

You can install the CLI using this command.

npm install -g @sasjs/cli

The sasjs command will now be available on your command line!

Step 2: Create a minimal web app 🏗

You can use this command to scaffold a minimal web app.

sasjs create <your-app-name> --template minimal

or

sasjs create <your-app-name> -t minimal

This will create the exact same folder structure that we’ve seen above, as well as install the @sasjs/core macro library in the node_modules folder.

Step 3: Add your code and configuration 👨‍💻

This step is the same as above. You can add any HTML, JavaScript or CSS into the src folder in the app.

Any new SAS services should be placed in a subfolder under sasjs/services. Any new subfolders should be defined in the cmnServices array in the sasjsconfig.json file.

If those services have macro dependencies, place them in the header under a <h4> dependencies </h4> tag, as shown here. The macro itself should be saved in the sasjs/macros folder. There is no need store any @sasjs/core macros here — they will be compiled automatically.

You can run sasjs add to add a new build target — this will prompt for several items including the appLoc, server details, and client ID/ secret if SAS Viya is chosen. You can get a client ID and secret from your SAS administrator. If you are an administrator, you can use the SASjs Viya Token Generator to generate new client registrations.

Your configuration will be saved to the sasjsconfig.json file.

Take note of the target name you provide, as you will require this in subsequent steps.

Step 4: Build and deploy your SAS services 👷‍♀️

Build & Compile

From the root of the project, run sasjs build <target-name-from-step-3>. This will create one file per service, in a temporary sasjsbuild folder.

You can now run sasjs compile <target-name>. This will concatenate all the services into a single SAS deployment program inside the sasjsbuild folder.

To run both of these steps at once, you can run sasjs cb.

Deploy

You now have a couple of options for deployment:

1) Run sasjs deploy <target-name>to automatically deploy the services using the REST APIs (if running on Viya).

2) Execute the .sas file in the sasjsbuild folder in SAS Studio (useful for SAS 9, or if you have not provided a client / secret for SAS Viya).

Step 5: Deploy your app 🚀

You can use the NPM deploy described earlier in this article to deploy the frontend to your SAS server.

By wrapping your frontend build / deployment command in a shell script, and adding to the tgtDeployScripts array, you can now compile / build / deploy both frontend AND backend in a single command!

sasjs cbd <target-name>

The deployed app will now be accessible at <your-sas-server>/<some-subfolder>/<app-name>.

The CLI also provides another deployment option — the ability to create a streamable web app using the sasjs web command. We will dive deeper into this in a future article.

Wrap up 🎁

In this article, we have learnt two ways to scaffold a minimal HTML5 and JavaScript-based SAS web app — by cloning the GitHub repo and via the SASjs CLI.

To learn more you can go to https://sasjs.io.

Feel free to raise a GitHub issue if you encounter any problems.

If you found this useful, please support us by slapping a star on the @sasjs/adapter and @sasjs/cli GitHub repos.

Happy coding! 🤓