SmartDesktop Quickstart 💥

Install 📡

Grab it from Github and install with Yarn (the npm CLI works too).

git clone https://github.com/chartiq/finsemble-seed
cd finsemble-seed
yarn install
yarn start

You've now warped in a new SmartDesktop, complete advanced window management, inter-app communications, and a toolbar from which to orchestrate it all. Go ahead and take it for a spin!

Add Some Apps 📦

Adding apps to your SmartDesktop is easy with the Finsemble CLI. Just point the CLI at a URL or local executable to automatically integrate it, or have the CLI scaffold a new web app for you for local development (React and Angular are supported out-of-the-box!).

Now let's add some demo apps to play with:

npx finsemble-cli add component "Account Detail" url https://documentation.finsemble.com/tutorials/components/accountDetail/accountDetail.html
npx finsemble-cli add component "Account Statement" url https://documentation.finsemble.com/tutorials/components/accountStatement/accountStatement.html

(While you can install the CLI globally, we recommend using local installations via npx to prevent version mismatches.)

Now restart the SmartDesktop (just between us devs, there's a hidden keyboard shortcut to do so: CTRL+ALT+SHIFT+R). Our new apps are now available in the App Launcher menu. Launch a few, and test out the SmartDesktop's snapping and grouping features.


🙌 Easy-peasy, eh?

Add Magic with Preloads ✨

Injecting Code

Window management is sweet, but the SmartDesktop's real superpower is preloads! Preloads allows us to inject logic into existing Javascript app, augmenting or modifying its behavior. Even without access to the source code, you can deeply integrate an app into the rest of your SmartDesktop.

Let's create a new preload and inject it into our Account Detail app:

npx finsemble-cli add preload myFirstPreload
npx finsemble-cli inject myFirstPreload "Account Detail"
npx finsemble-cli inject myFirstPreload "Account Statement"

This will create a new script called myFirstPreload.js and add it to the list of trusted preloads.

Note: When working with preloads, security is a big deal that we take seriously! Finsemble's security infrastructure has been rigorously engineered and professionally audited to keep your data safe on the new frontier of desktop integration. You can read more about security policies here.

Replace the the runPreload function with the following:

function runPreload() {
	alert("Hello from a preload!");
}

For Webpack to detect our new preload, we need to restart the build by shutting down the SmartDesktop (or killing it at the command-line with CTRL-c) and running yarn start again. Once its up, launch an account detail app and see your new preload in action!

Integrating Apps with the Linker

The SmartDesktop comes equipped with linker channels, pub-sub channels that allow you to integrate apps with minimal code. Let's use the Finsemble Client API (which is automatically preloaded into all apps) to automatically sync the Account Detail and Account Statement apps.

Replace the runPreload function in myFirstPreload.js with the following:

function runPreload() {
	FSBL.Clients.LinkerClient.subscribe("account", (acc) => {
		// This function is a built-in global in both the
		// Account Detail and Account Statement apps
		// that we'll reuse.
		window.displayAccount(acc);
	});
}

Restart the SmartDesktop, and launch both an Account Detail and Account Statement app. By placing them on the same color linker channel, they can automatically synchronize as you change the account in focus!

Linking Demo

At this point it's appropriate to laugh maniacally as you relish your new unbridled power give yourself a pat on the back for learning preloads. Have fun and build something cool!

Deploying 👨‍🚀

Once you've got your SmartDesktop how you like, you can package it up into a custom EXE and deploy it to your users. The SmartDesktop has two parts: assets, hosted a webserver; and a runtime built, on the Finsemble Electron Adapter.

To deploy the assets, build them in prod mode:

yarn build:prod

Then host them on a web server of your choosing, but we include a prebuilt Express server for your convenience. Let's start it up:

yarn server

A file called configs/application/manifest-local.json controls where the runtime looks for the assets (and lots of important things - check the Config Reference for more). In our case, the dev and prod URL's are the same, but you'll want to change them.

The runtime is deployed as an installer, packaged as an EXE. Let's make it now. In a separate terminal, run this (it will take a while):

yarn makeInstaller:prod

And voilà! Inside ./pkg you'll find a new installer for SmartDesktop that you can distribute however you distribute other EXE's to your users. Try running it to install your custom SmartDesktop to your local machine.

Native Apps, Custom UI, White Labeling, and More

Need to integrate a native desktop app? We've got you covered! Assimilate native apps directly for visual integration, or use our .NET or Java API's for deep logical integrations.

The SmartDesktop's UI components (the toolbar, window titlebars, etc.) are completely customizable - you can add, remove, modify, or change the theme of pretty much everything!

Questions? Want to see a demo or custom POC? Drop us a line at support@finsemble.com! We'd love to hear from you!