Deploying a Single Page Application using the Domino REST API
The Domino REST API not only provides secure access to "jsonified" Domino data,
but also comes with capabilities to ease integration. This enables one to quickly cater to the long tail of applications, giving them a home instead of loosing them to the shadow IT.
Once you know the steps, you can deploy new Single Purpose Applications (I modified the meaning of SPA a little) in no time.
No CORS, no headache
DRAPI allows to host static applications in the keepweb.d
directory. "Static" might be a little misnomer (it only relates to the source files, not the interaction) since a JS file can make your experience quite interactive. Since you run on the same Domain and port as the API, you don't need to worry about CORS
Preparation
Your SPA will live in a sub directory of keepweb.d
, so think about a name, we shall use demo42
here. Add a suitable icon (e.g. 72x72 px png), name it demo42.png
and you are ready to roll. Let's assume our Domino API is running on https://api.demo.io
Work faster with vitejs
viteJS is one of the fronteand tools you want to learn. It features "hot module reload" to speed up development and, when done, packages your application nice and tidy.
It is easy to get started. You need a current version (22.x at time of writing) of nodeJS installed as development tooling.
npm create vite@latest demo42 -- --template vanilla
cd demo42
npm install
This will create the demo42 directory and scaffold the project for you. Before we get started with athe development, let's adjust the environment. In the root of the project create a file vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
base: '/keepweb/demo42/',
server: {
proxy: {
'/api': {
target: 'https://api.demo.io',
changeOrigin: true
}
}
}
});
This allows you to develop in the comfort of your local machine's hot module reload which refreshes your app on svae automagically. It also fixes the path matching to its final destination. Next create in public
the file manifest.json
. This file defines the tile layout for the landing page.
{
"short_name": "Demo 42",
"name": "The final answer to all Demos",
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#aacccc",
"icon": "vite.svg"
}
You can play with colors and icons as you deem fit. Now we are ready to run the application:
npm run dev
Read more
Posted by Stephan H Wissel on 17 March 2025 | Comments (0) | categories: Domino DRAPI WebDevelopment