Creating a Web App

The first step to creating a web app is copying essential files from a template. The webOS TV SDK provides Bootplate (web app template) as below:

• Basic web app template: A template of a general web app that displays the "Hello World" message on a screen

• Hosted web app template: A template of hosted web apps

The webOS TV SDK provides the JS service template and config file template (appinfo.json). JS service template is a general service template that is running as a background service on webOS TV. Config file template provides the necessary file for the webOS TV app that specifies metadata of the web app, such as an app ID, app name, and related resources.

Use the ares-generate command to create a web app or a JS service. You can also create a web app, JS Service, an appinfo.json file, and icon images from the templates with the ares-generate command.

Listing Templates

The webOS TV SDK provides several templates. Execute the following command to check the usable template for your web app.

Using a Template

The following sections describe how to get each type of web app template.

• Creating a Web App from Template 

• Creating a Hosted Web App Template

• Creating a JS Service from Template

• Creating an appinfo.json file from Template

Creating a Web App

The basic web template provides a "Hello World" web app with the minimum essential files for webOS TV. This template is useful when using other UI frameworks.

Execute the following command to create a web app to ./sampleApp directory.

The following table describes the files of a web app that templates provide: 

Directory / File	Description
webOSTVjs-1.1.1	The webOS TV library directory. The webOS TV specific library to call LS API.
appinfo.json	The web app configuration file. The appinfo.json file includes metadata of the web app. This file must exist when packaging web app. See appinfo.json for the detailed description of the appinfo.json file.
icon.png	The icon image file. See Key App Assets for the detailed description of the icon.png file.
largeicon.png	The large icon image file. See Key App Assets for the detailed description of the largeicon.png file.
index.html	The web app's main page. This page only shows "Hello World" text on a screen.

Creating a Hosted Web App

The hosted web app template provides a hosted web app that contains a redirect URL with the minimum essential files for webOS TV.

Execute the following command to create a web app to ./sampleApp directory.

The following table describes the files of a hosted web app that the template provides: 

Directory / File	Description
appinfo.json	The web app configuration file. The appinfo.json file includes metadata of the web app. This file must exist when packaging web app. See appinfo.json for the detailed description of the appinfo.json file.
icon.png	The icon image file. See Key App Assets for the detailed description of the icon.png file.
largeicon.png	The large icon image file. See Key App Assets for the detailed description of the largeicon.png file.
index.html	The web app's main page that contains the redirect URL.

Creating a JS Service

The JS service template provides a sample JS service which is running as a background service on webOS TV. The sample JS service responses simple messages for a service request.

Execute the following command to create a JS service from the template (js_service).

The following table is a basic description of the files of the sample JS service:

File	Description
helloclient.js	The simple JS service code which subscribes helloworld_webos_service.js service. This sample shows how to communicate between services.
helloworld_webos_service.js	The sample JS service code which provides several simple commands. These commands are specified in the services.json file to use them.
package.json	The configuration file of NPM. For more information, see https://docs.npmjs.com/getting-started/using-a-package.json.
services.json	The configuration file defines what commands the service provides on the webOS bus. For more information, See Creating & Using JavaScript Services.

Creating an appinfo.json file from Template

The webappinfo template provides an appinfo.json file with sample value. If you are building a new web app without templates or using the existing web app which was not made from templates, you should add the appinfo.json file into your app. The appinfo.json file holds the app's name, ID, app type, icon image, and the main page information to the file.

Execute the following command to create the appinfo.json file template (webappinfo).

The webOS TV SDK provides the appinfo.json file template as below.