Web apps don't just run in browsers.
Target OpenFin, Electron and other containers from a single codebase. This project contains the current work-in-progress Symphony Desktop Wrapper. The goal of this project is to provide a common API across multiple HTML5 containers.
Unified API
ContainerJS provides an abstraction layer, rather than using the underlying container APIs (OpenFin, Electron), you use the ContainerJS APIs.
Desktop Intergration
Desktop containers allow HTML5 application to run outside of the browser, allowing a deeper, more intergrated experience.
Bootstrapping & Distribution
ContainerJS provides a uniform mechanism for distributing applications, with web-based distribution and an application manifest.
Project Status
ContainerJS is currently under active development, with frequent breaking changes!
Getting Started
The following describes how to create a simple ‘Hello World’ application and run it with Electron, OpenFin and a Browser.
Creating the Hello World app
From within an empty folder, add a minimal HTML file called index.html:
<!doctype html>
<meta charset="utf-8">
<body>
<h1>Hello World!</h1>
<div>
ContainerJS status: <span id="status">initialising</span>
</div>
<script src="https://unpkg.com/containerjs-api-browser/build/dist/containerjs-api.js"></script>
<script>
ssf.app.ready()
.then(() => {
const status = document.getElementById('status')
status.innerText = 'ready';
});
</script>
</body>The above displays a simple welcome message and indicates the status of the ContainerJS APIs. The containerjs-api.js is the browser API, that will create the ContainerJS API if no API currently exists.
This file uses the ssf API to handle the container ready promise, updating the status text when this lifecycle event occurs.
Starting a local server
The container loads HTML applications over HTTP, so in order to run this demo application you need to start a local server. If you don’t already have a preferred tool, you can use the node http-server package:
$ npm install --global http-server
$ http-server -p 8080This starts a server on port 8080.
Running with OpenFin
The ContainerJS project provides an OpenFin-based command line tool, which can be installed as follows:
$ npm install --global containerjs-api-openfinTo run your simple ‘Hello World’ application from within an OpenFin container, execute the following:
$ ssf-openfin --url http://localhost:8080/index.htmlYou should now see the Hello World application, and see the status update to ‘ready’. Note: The notification API
will not work unless a notification.html is hosted on a server. An example notification file can be generated by passing
--notification [outdir] to ssf-openfin.
For more advanced control of the OpenFin application and initial window, you can use an app.json manifest file. See Manifest Files for more details.
For details of the ssf-electron CLI, see Command Line Interface.
Running with Electron
The ContainerJS project provides an Electron-based command line tool, which can be installed as follows:
$ npm install --global containerjs-api-electronFrom within your ‘Hello World’ folder, execute the following:
$ ssf-electron --url http://localhost:8080/index.htmlYou should now see exactly the same app running within Electron.
For more advanced control of the Electron application and initial window, you can use an app.json manifest file. See Manifest Files for more details.
For details of the ssf-electron CLI, see Command Line Interface.
Browser
To run your app within a browser, simply navigate to the URL http://localhost:8080/index.html.