Web apps

Web apps

Web apps are HTML-based apps that communicate with the VisionAppster Engine using the JavaScript client API. The only difference to an ordinary HTML/JS-based web page is that the Engine serves all content from a single zip file.

Let's assume you have created a web app (web page) that contains the following files:

index.html
css/style.css
img/logo.png
img/background.jpg
js/logic.js

Normally, you would copy the directory structure to the root of your web server (such as Nginx or Apache) and point your browser to the address of your server. Copying the files obviously requires e.g. ssh access to the server.

The VisionAppster Engine contains a built-in web server that can be used exactly the same way. Web apps can however be served in a more efficient and convenient way as .webapp files.

Just like component packages, web apps are standard zip files. To create a web app you only need to zip the files and rename the file to .webapp:

# cd to wherever your index.html resides. Then:
zip -r my.webapp *

You can include .webapp files in component packages. Once such a package is installed, the Engine's web server is able to serve the contents of the file as if it was an ordinary directory structure. If a directory in the zip contains a file called index.html, it will be returned by the server when a client sends a GET requests to the directory. By default, the server is configured to reject requests to directories that lack index.html.

Installed web apps will be listed on the front page of the Engine's management interface and can be opened by clicking the link. The target of the link will be something like http://localhost:2015/components/com.example/1/my.webapp/. If you omit the trailing slash, the server will return you the whole web app packet.

By default, the web server will also serve the contents of .zip files in the same manner. The difference is that such files won't be automatically detected as web apps and won't thus be available on the Engine's front page after installing the component package. This may be useful if you want to include a testing UI for your app in a component, but don't want to make that UI too prominent.

Putting everything in a single file not only makes it easier to handle web apps, but also makes serving them more efficient. All modern browsers support "deflate" transfer encoding, which means the server can return archived files without decompressing them first. The browser decompresses the data, which saves bandwidth and reduces server load.