Using webOS TV Extension

This article guides you on developing apps using the webOS TV extension for Visual Studio (VS) Code. After completing VS Code configuration, read this guide to develop webOS TV apps in VS Code.

The following sections provide:

• Creating Web App

• Deploying Web App 

• Debugging Web App

Creating Web App

To create a web app in VS Code, generate a project first, then write your code. After writing your code, you can package your project into an app. 

Generating a Project with a Template

Start by creating a web app using one of the available templates. These templates provide a starting point for developing web apps.

1. Select webOS TV: Generate Project from the Command Palette (Ctrl+Shift+P).

2. Select Basic Web App.

3. Select a location for your app with the file system button at the top-right corner of the Command Palette.
   You can press Enter to create a basic web app in the default path (your current workspace directory).

4. Enter the project name of your app.

5. Enter your app properties - app ID, app version, and app title.
   You can press Enter to set it as default values.

6. Select whether to open the created app directory as the workspace.

The following example image shows the my_web_app project under the MY_PROJECT folder with the basic web app template. It did not open the my_web_app project as the workspace by selecting No in the last step.

Packaging the Project into an App

Follow the steps to package your web app created in the previous section into an IPK app file.

1. Select webOS TV: Package Application from the Command Palette (Ctrl+Shift+P).

2. Enter the directory of your web app.
   You can press Enter to set it as the default path (your current workspace directory).

   To package a web app with JS services, click Browser File System at the top-right corner and select the directories of the web app and JS services to package together using ctrl key.

3. Enter the directory path to locate the packaged app file.
   You can press Enter to set it as the default path (your current workspace directory).

4. Select whether to minify your app.
   To debug with the web inspector, select No.

If your app is packaged successfully, the IPK file is created as below.

You can also package an app with the Explorer Context menu. 

Deploying Web App

Before you deploy your web app on the target device, make sure to connect the target device to your PC. For more information about the connection, see the Connecting Target Device section.

Installing the App

Install the packaged app on the target device.

1. Right-click the IPK file from the Explorer.

2. Select the device to install the app.

If your app is installed on the target device successfully, you can see the app on the webOS TV Devices view below.

You can also install your app with the webOS TV: Install Application command on the Command Palette or the Device Context menu. 

Launching the App

Launch the app installed on the target device.

1. Right-click your app ID to launch from the installed apps list.

2. Select Run.

You can also launch your app with the webOS TV: Launch Application command on the Command Palette.

Launching the App with Parameters

Launch the app installed on the target device with parameters.

1. Select webOS TV: Launch Application with Parameters from the Command Palette (Ctrl+Shift+P).

2. Select the device to launch the app.

3. Select the app ID to launch.

4. Enter launch parameters.
   If you do not enter the parameters and press Enter, the content in the .launchparams.json file in the root of the workspace will be entered by default. 
   If you enter the parameters, they will be save in the .launchparams.json file.
   
   The following is an example of the parameter input window when the content in the .launchparams.json file is {"key":"test 123"}.
   If you do not enter the parameters and presses Enter, {"key":"test 123"} will be entered by default. 
   

Debugging Web App

Before debugging your app, make sure to set the value of webostv.choromExecutable property in Settings. For more information about the setting, see the Setting webOS TV Extension section.

Inspecting the App

Run Web Inspector and open the browser. Web Inspector displays the running information about your app.

1. Right-click the app ID to debug from the installed or running apps list.

2. Select Debug.

3. Chrome browser for Web Inspector is launched with the debugging URL.

You can also launch your app with the webOS TV: Inspect Application command on the Command Palette.

Inspecting the JS Service

Run Node Inspector in the device and create a launch configuration file to run Node Inspector Client in the VS Code. The JS service to inspect should be packaged and installed with the app in the device. 

1. Select webOS TV: Inspect JS Service from the Command Palette (Ctrl+Shift+P).

2. Select the device.

3. Enter the service ID to inspect. 

4. For webOS TV 5.0 or higher, a launch configuration file(.vscode/launch.json) is created in the workspace. If there is no opened workspace, select the location of the launch configuration file with the file system button at the top-right corner. To start debugging, press F5.
   For webOS TV 4.5 or lower, Chrome browser for Node Inspector is launched with the debugging URL.
   
   The following is an example of debugging com.domain.app.service on webOS TV 22.
   

Running the App without Installation

You can run your app on the target device without packaging and installing it whenever you change the code.

1. Right-click the app directory from the explorer and select webOS TV: Run without Installation.

2. Select the target device to run the app.

3. Enter the IP address of the host PC (your local PC).

You can also execute the webOS TV: Run without Installation command on the Command Palette.

To close the hosted app on the target device, follow the steps.

1. Right-click com.sdk.ares.hostedapp from the running apps list.

2. Select Close.

Running the App on the Simulator

You can run your app on the Simulator without packaging and installing it whenever you change the code.

If you have not installed webOS TV Simulator yet, go to Simulator > Installation and install the Simulator first.

1. Right-click the app directory from the explorer and select Run on Simulator.

2. Select the version of webOS TV Simulator to launch.

You can also execute the webOS TV: Run on Simulator command on the Command Palette.