OpenFin

Getting Started Guide

This page will help you get up and running with OpenFin!

Introduction

OpenFin provides a native desktop experience for your webapps. This guide will walk you through the steps to install the necessary tools and dependencies for creating a whole new experience for your financial applications. When you have completed this guide, you will be able to:

  • Launch the OpenFin runtime
  • Create and modify the configuration file to point to your web application
  • Run and install a sample application
  • Edit a sample application to add functionality

Prerequisites

To create applications with OpenFin, you will need to download the OpenFin command line tool (CLI) or use the OpenFin Installer Generator. The OpenFin CLI tool allows you to install the OpenFin Runtime, launch applications with a URL or configuration file, create Windows installers, and create configuration files. Learn more about the OpenFin CLI tool here. The OpenFin Installer Generator generates a RVM installer, which streamlines the process of installing and updating the OpenFin Runtime on Windows.

This getting started guide primarily focuses on the OpenFin CLI tool. To learn more about installing and deploying applications with the installer generator here](doc:deploying-applications).

There is also an additional app template available on Github through Hadouken.

License

You need a Developer License to download, use, test, or build with any OpenFin Technology. The code in this section is covered by the OpenFin Developer License. If you have any questions, please contact support@openfin.co.

Windows setup

To use the OpenFin CLI tool on Windows, you will need to install Node and npm.

Mac setup

To use the OpenFin CLI tool on Mac, you will need to install Node and npm. Additionally, you may need to install or update Apple Developer tools. To install or update Apple Developer tools:

  1. Launch Terminal, found in /Applications/Utilities/
  2. Write the following command:
xcode-select --install
  1. A software update popup window will appear, follow the prompt to install

Linux setup

To use OpenFin CLI tool on Linux, you will need to make sure you have the latest versions of Node and npm. To update to the latest version for Node and npm:

  1. Launch gnome-terminal from the prompt
  2. Write the following command to globally update npm and Node:
npm install -g npm
npm install node@latest -g

Additional resources

Although Git is not required to install OpenFin CLI tools, it will be required to complete part of a tutorial later featured in this guide.

Installation

OpenFin Installer Generator

OpenFin’s installer service generates an RVM installer, which streamlines the process of installing and updating the OpenFin Runtime. The installer is pre-baked with the application’s config URL and is delivered as a zip file containing an installer executable which can be hosted on any web server.

Install and test OpenFin CLI tools

Write the following commands into your terminal:

  1. Write the install command to download and install the OpenFin CLI Tool.
npm install -g openfin-cli
  1. To test your application, you will need to auto-generate an app.json file and specify the URL of your hosted webapp. Write the launch command to generate the file and point it to your hosted webapp. This host url will appear in your configuration file.
openfin --launch --url http://example.com

If you do not have a hosted webapp to test, you can use any url as a placeholder to test the installation.

Modify and launch your configuration file

Each application you create will need an application configuration file. This file can live in the filesystem or be hosted on a web server. We recommend you host this file as part of your application. Both the openfin-cli and OpenFin RVM will use a configuration file to launch applications as well as make use of other configuration data.

Below is an example of the app.json file you will find in whichever folder your command line tool was launched from. This is a configuration file in json format. You can read more about this file in our app configuration API docs.

The url property startup-app features an example of where your applications host url will live in your configuration file.

{
    "devtools_port": 9090,
    "startup_app": {
        "name": "OpenfinPOC",
        "description": "OpenFin POC",
        "url": "https://example.com",
        "uuid": "OpenfinPOC-1tkcgzqv475",
        "autoShow": true
    },
    "runtime": {
        "arguments": "",
        "version": "beta"
    },
    "shortcut": {
        "company": "OpenFin",
        "description": "Openfin POC",
        "name": "Openfin POC"
    }
}

Once you have created your custom configuration file, the openfin-cli and OpenFin RVM will use this to launch your application. To specify which custom configuration file for the CLI and/or RVM to use, enter the command:

openfin --launch --config app.json

Install and run a sample application

The following tutorial requires the OpenFin CLI tool. To run a

Now that you have the CLI tools installed you can begin taking advantage of the OpenFin APIs to enhance your web applications and give them a real desktop feel. To complete this section of the guide, you’ll need to install Git.

  1. To install the sample application, you will need to clone the application from the Git repository. Write the following command into your terminal:
git clone -b https://github.com/HadoukenIO/app-template.git
  1. From the directory where you cloned the repository, change the directory:
cd app-template
  1. Now we have to build the service. To do this, enter the following command:
npm install
  1. npm will build the service modules necessary to run the OpenFin runtime and accompanying application. To start the application, enter the following command:
npm start

This will execute the OpenFin runtime and display the example application in a window within the OpenFin runtime. Your terminal will display the following message while the runtime is running:

Serving "...app-template/public" at http://127.0.0.1:5555
Ready for changes

You can find the server script in /app-template/server.js.

Edit your web application to add functionality

Now that the basic tools are installed you can start to utilize the OpenFin JavaScript API from your web application. To demonstrate some basic functionality of the API, this section of the tutorial will show you how to:

  • Create a function that will open a new window when invoked
  • Add a button to the default index.html page displayed in the application template so the end-user can open a new application in the same runtime
  • Run and test your changes

Create a function that will launch new windows

In this example you will use the Openfin Window.create(); method to create a new window in the OpenFin runtime.

  1. In the index.html file found in app-template/public, add the following JS code in a script tag:
    /* Define a function that will launch a window */
    async function launchWindow(url) {
        /* Use the await keyword. The function will wait for the 
        window object to instantiate before resuming execution */
        const win = await fin.Window.create({
            /* Provide initialization options to the new window */
            name: "OpenFin Getting Started Guide",
            url: url,
            defaultWidth: 600,
            defaultHeight: 400,
            resizable: false,
            autoShow: true
        });
        /* When the window object is finished building, this method will 
        cause the Chromium Developer showDeveloperTools to be displayed */
        await win.showDeveloperTools();
    }
  1. Add a button to the app-template UI that will invoke the launchWindow function. To do this, place the following code in index.html:
<button type="button"
 onclick="launchWindow('https://openfin.co/documentation/getting-started/')">Launch New Window</button>
  1. Start the OpenFin runtime in your terminal:
npm start
  1. Click the button and a new window will launch.

What's Next

You now are able to launch the OpenFin runtime, modify the app configuration file to point to your web application, install and run a sample application, and edit that sample application to add functionality. The next step is to create an application that employs all of the functionality you need. To get started, you can use our Developer tutorials to learn how to implement features into your application such as window animation and inter-app messaging or preview our API reference guides to create your own features.

Additional Tutorials

Getting Started Guide


This page will help you get up and running with OpenFin!

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.