webOS Studio Developer Guide

This guide will explain how you set up and use the webOS Studio extension on VS Code.

Set up

To use the webOS Studio, you have to set up the following.

Select a workspace

Workspace is the root directory for all your webOS apps and services. All commands of webOS Studio will be executed based on the workspace.

Navigate to File > Open Folder and select a directory. This directory will be your a new workspace.

Install global packages

Global packages are packages that are essential to run webOS Studio. webOS TV extension supports a command to install these packages at once, and it needs to be run once initially.

1. Open the Command Palette (Ctrl + Shift + P).
2. Execute webOS: Install Global Packages.

Or you can also do the same job with the following command:

npm install -g @enact/cli @webos-tools/cli patch-package

Install Emulator Launcher

Emulator Launcher is a command-line based tool which helps users set up webOS Emulators more easier.

You can install the Emulator Launcher with the following command:

python3 -m pip install --upgrade webos-emulator --force-reinstall

If you are using Windows, use python instead of python3.

Set Device profile

webOS Studio supports multiple webOS platforms. So, you need to set the device profile to tv before starting to use the extension.

1. Go to the Command Palette (Ctrl + Shift + P).
2. Execute webOS: Set Device Profile.
3. Select tv.

You can check the current device profile on the bottom-left corner. It should be set as webOS TV.

Configure Package Manager

Select a folder where the Package Manager installs SDK tools. When a user runs the Package Manager for the first time, a pop-up message for selecting a folder will show up. All tools installed through the Package Manager will be installed in this directory.

For more details, see Package Manager.

Prepare and connect a device

Install the Developer Mode app

First, install the Developer Mode app on your TV and turn on Developer Mode. For more information about installing the Developer Mode app, see Developer Mode App.

1. Install the Developer Mode app on your TV from LG Content Store.
2. Launch the Developer Mode app from the webOS TV Launcher and log in to the Developer Mode with your LG account.
3. Click the Dev Mode Status button to turn on Developer Mode.

Register the target device

Register your target device information on VS Code.

1. Select webOS: Set Up Device from the Command Palette (Ctrl+Shift+P) and select Add Device. You can also click the + button in the KNOWN DEVICE view.
2. Enter your device name, IP address, port number, and user name for the connection. If you are using a TV device, enter 9922 for port number and prisoner for user name.

Set the SSH key

1. After turning on Developer Mode on your TV device, launch the Developer Mode app.
2. Click the Key Server button in the Developer Mode app.
3. Select webOS TV: Set Up SSH Key from the Command Palette (Ctrl+Shift+P) on VS Code and select your device.
4. Enter the passphrase (case sensitive) as displayed on the Developer Mode app.

Basic usage

This section explains a typical development flow of webOS apps and services using this extension.

Add known devices

You can add your device to the known device list.

1. Click the + button in the KNOWN DEVICE view.
2. Enter the name, IP address, port number, and username of your webOS device.
3. (Optional) To set the added device as the default device, right-click the device and select Set Default Device. Actions will be performed on the default device unless the target device is specified.

Create an app or service

1. Click the + button in the APPS IN WORKSPACE view. Or Execute webOS: Create ProjectWizard in the Command Palette.
   The Project Wizard window will be displayed on the right side.

2. On the Project Wizard window, select TV at webOS Product and Default at API Version and click Generate Project.

3. Select a template to use and click Next.
   
   Here is the list of templates provided.

   • Basic Web App: A basic web app for webOS
   • Hosted Web App: A hosted web app
   • Web App Info: Configuration file for a web app (appinfo.json). See appinfo.json.
   • JS Service: A JavaScript service for webOS. This service MUST be packaged and installed with an app.
   • JS Service Info: Configuration files for a JS service (services.json and package.json). See services.json.
   • Sandstone, Moonstone: Enact apps with the Sandstone library or the Moonstone library. For more details about Enact apps, visit the Enact website.

4. Enter your project information, such as Project Location, Project Name, and App or Service ID, and click Finish. Necessary information items vary upon the selected template.

webos-service library

webos-service library is a library for using webOS components on JS services or Enact apps.

To use the library, do one of the following:

• In the Add webOS library line, check Yes and click Finish.
• After finishing, in the APPS IN WORKSPACE view, right-click the app or service, and select Install webOS NPM Library.

Edit the source code with Preview

While you are editing an app, you can preview the app UI before installing it.

To preview the app, in the APPS IN WORKSPACE view, right-click the app and select Preview App. The preview of the app is automatically launched on the right side.

You can check the result of your modification to the source code instantly in this preview.

Package, install, and launch the app

A typical process to install webOS apps is in three steps:

1. Package the source code into an .ipk file.
2. Install the IPK file.
3. Launch the installed app.

You can trigger these steps in sequence by clicking the Run App button in the APPS IN WORKSPACE view. After clicking the button, enter the information about the app to run. If you use the default information, just press the Enter key.

Or you can do package, install, and launch the app separately by

• Right-clicking the app and selecting the operation you want, or
• Selecting the operation from the Command Palette (Ctrl+Shift+P) and selecting the app.

Launch the app with parameters

You can run an app on the target device with launch parameters.
To run the app with launch parameters, select webOS: Launch Application with Parameters from the Command Palette (Ctrl+Shift+P). For more about launching with parameters, see ares-launch.

Run the app on a Simulator

You can run an app on the Simulator without packaging and installing it.

To run the app on a Simulator,

• Right-click the app to run in the APPS IN WORKSPACE view and select webOS TV: Run on Simulator,
• Right-click the simulator to use in the Simulator Manager view and select Run App, or
• Select webOS TV: Run on Simulator from the Command Palette (Ctrl+Shift+P).

You can also run the app with launch parameters on a Simulator by selecting webOS TV: Run on Simulator with Parameters from the Command Palette (Ctrl+Shift+P).

If you have not installed webOS TV Simulator yet, install the Simulator first using Package Manager.

Uninstall the app

You can uninstall apps in the KNOWN DEVICE view.

To uninstall an app from a certain device, right-click the app in the Installed app list of the device and select Uninstall.

Debug the app

You can debug apps or services that are installed on the known devices.

Supported types are as follows:

• Web app
• Enact app
• JavaScript service

Prerequisites

• The target device or Emulator should be running as Default Device.
• (For debugging with Chrome Inspector) A Chromium-based browser is installed. See Launch Web Inspector for more details.

Start a Debugging Session - App

1. In the APPS IN WORKSPACE view, right-click an app and select Debug on.

2. Select Chrome Inspector or VS Code Debugger.

• Chrome Inspector
  Enter the path of the browser executable.

  Then the debugging session will be activated in the browser.

• VS Code Debugger
  The DEBUG CONSOLE panel will be activated automatically. In the panel, you can check the console messages from the app or service.

In the debugging session, you can set breakpoints, check variables, callstack, etc.

Start a Debugging Session - Service

1. In the APPS IN WORKSPACE view, right-click an installed service and select Debug on.

2. Select Chrome Inspector or VS Code Debugger.

• Chrome Inspector
  a. A URL for the debugging session will be displayed in the OUTPUT panel. Copy the URL. b. Open your browser and go to chrome://inspect. Configure the URL as follows:

  Note

  Microsoft Edge browser automatically redirects chrome://inspect to edge://inspect.
  c. Click inspect. This opens a new window for the debugging session.

• VS Code Debugger
  The DEBUG CONSOLE panel will be activated automatically.

Run ESLint on the Enact App

ESLint statically analyzes files for potential errors (or warnings) and helps enforce a common coding style. For more information, check ESLint Configurations.

To run ESLint, in the APPS IN WORKSPACE view, right-click a React app and select Run Lint.

The PROBLEMS panel shows the result messages.

To clean the Lint messages from the panel, in the APPS IN WORKSPACE view, right-click the React app and select Clear Lint.

Useful features

Package Manager

Package Manager manages SDKs for webOS app development. You can install and uninstall SDKs with a simple click.

In order to launch the Package Manager on Windows, VS Code has to be opened with the administrator permission. On Mac and Ubuntu, the system prompts you for the root user password during component installation.

When a user runs the Package Manager for the first time, a pop-up message for selecting a directory will show up. Once the directory is set, all SDKs are installed in this directory.

Some SDKs require prerequisite software, so the Package Manager checks if the software is installed. If not installed, it will download, extract, and install the software.

The following table lists software prerequisites for each SDK.

Simulator Manager

You can find the list of installed Simulators in the SIMULATOR MANAGER view.

Right-click the Simulator to use and select Run App to run your app.

Emulator Manager

You can find the list of installed Emulators in the EMULATOR MANAGER view.

Click the Launch button on the right of the Emulator to launch.

IPK Analyzer

You can analyze the file size of the app or services in the IPK file.

1. Open the Command Palette (Ctrl + Shift + P) and type webOS: IPK Analyzer.

2. Click Import IPK.

3. Choose the IPK file to analyze. After the file is loaded, you can see the following screen:

4. Click the Compare IPK button to load another IPK - for example, its older version.

Process log

webOS Studio has many internal utility commands including ares-cli, enact-cli, and VirtualBox utility. In the OUTPUT panel, you can check the output logs of these commands and find helpful information to debug your apps or services.