This extension helps develop apps and services for webOS Open Source Edition (OSE).
IMPORTANT NOTICE: If you installed the webOS OSE extension, please uninstall it first. Then install this extension.
Table of Contents
Note: Some features of this extension are originated from the webOS TV extension.
- Microsoft Visual Studio Code v1.58.0 or higher
- Node.js from v8.12.0 to v14.15.1 (recommended)
- Python 3.6 or higher (Only for Emulator)
- VirtualBox (Only for Emulator)
Before creating your first project, we recommend that you set a workspace — it's a kind of base directory of multiple projects — for all your webOS apps/services. All projects contained within the workspace are shown in the APPS IN WORKSPACE tab. This will make managing your projects more effectively.
A workspace can be set up in one of two ways:
- Navigate to File > Open Folder and select a directory. This directory is set up as the workspace.
- When creating an app/service using this extension, the Project Location is automatically set up as the workspace.
This section explains a typical development flow of webOS apps and services using this extension.
Creating an App/Service
Note: If you failed to create an app or service, please do the followings:
webOS OSE: Install Global Packages in the Command Palette (Ctrl + Shift + P).
npm to the latest version.
Click the + button in the APPS IN WORKSPACE tab.
Select the project type in Command Palette, and enter the information depending on your type.
Some types need additional steps. Check the following table:
||For UI components for the Enact app, you can choose either sandstone or moonstone library.
||If you want to webos-service library and the content assistant feature for the library, click Yes.
Or you can add this library after you create the app or service. In the APPS IN WORKPLACE tab, right-click your app or service and click Insatll webOS NPM Library.
|Hosted web app
||Enter the URL to show.
Modifying the Source Code
Now that the app or service is created, update (implement) the source code for the project.
Adding Known Devices
The known device is a webOS device that user can access to.
Note: This step is required only once per device.
Click the + button in the KNOWN DEVICE tab.
Note: By default, a dummy emulator device is listed in the tab. If no emulator is available on your computer, see the guides in the Emulator Manager section.
Enter the name and IP address of your webOS device.
Set the device as the default device. This ensures that all device operations are performed on that device.
Packaging / Installing / Launching
Typical steps to install webOS apps are as follows:
- Package the source code into an
- Install the IPK file.
- Launch the installed app.
The above three steps are triggered sequentially by clikcin the Run App button in the APPS IN WORKSPACE tab.
Then, enter the information about the app.
You can uninstall the apps in the KNOWN DEVICE tab.
Or You can uninstall the app manually using the appInstallService API or webOS OSE CLI.
Debugging the App/Service
Note: This guide only describes how to start a debugging session and its basic usage. For more details on how to debug on VS Code, refer to the official guide.
- Google Chrome browser must be available/installed on the local system.
- IP address of target device (or emulator) and IDE should be in the same network for debugging.
How to Start a webOS Debugging Session
Right-click an installed app or service and click Debug App/Service. After a while, a debugging session will be enabled.
In the DEBUG CONSOLE panel, you can check the console messages from the app or service.
After a while, the Run and Debug view is automatically opened. In the view, you can check variables, callstack, etc.
- If the Run and Debug view is not opened, navigate to View > Open View... and select Run and Debug.
- If the debugging session is not launched, close all running apps on the webOS device and re-try to click Debug App/Service.
- (very unlikely to occur) You might get a notification indicating that a debug session is already active, even when all debug sessions are closed. To resolve this issue, restart the IDE and try debugging again.
Previewing the App (Web and Enact)
You can preview web apps or Enact apps in your VS Code before installing it.
In the APPS IN WORKSPACE tab, right-click the app and click App Preview.
An App Preview page is automatically launched.
Note: Only one app can be previewed at the same time. If another app preview is launched, the new preview is launched in the existing tab.
Running 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.
In the APPS IN WORKSPACE tab, right-click the React app and click Run Lint. The PROBLEMS panel shows the result messages.
To clean the Lint messages from the panel, click Clear Lint.
You can generate various templates for webOS apps or services.
This features provides the auto-completion using the following trigger strings:
Type one of the following texts to call LS2 APIs.
You can also use the Tab key to auto-complete input strings.
Note: If the auto-completion with the Tab key doesn't work, please check the Tab Completion setting is on.
new LS2Request to use webos Library of Enact. Using the
Ctrl + Space keys, you can check the list of supported methods.
You can manage webOS emulator (VirtualBox) images in VS Code. By default, any webOS emulator images installed in VirtualBox are listed in the EMULATOR MANAGER tab.
VirtualBox must be installed on your computer. (Supported version: 6.1 or higher)
webOS emulator image (
.vmdk) is required. For how to make the image, refer to Emulator User Guide.
Emulator Launcher is required. Enter the following command to install it:
python3 -m pip install --upgrade webos-emulator --force-reinstall
How to Manage Emulator Images
Click the + button in the EMULATOR MANAGER tab.
Fill in the input form. For the other system requirements, refer to Emulator User Guide.
Click Add Instance and the created instance is listed in the EMULATOR MANAGER tab.
Click the Run App button (triangle) to run the emulator. This action will launch a new a VirtualBox window.
To stop or close an emulator instance, close the running VirtualBox window.
- Multiple emulator instances cannot use the same VMDK file.
- Only one emulator instance can bb launched at the same time.
- When deleting an emulator instance, the associated VMDK file is also DELETED. Make sure that the VMDK file is safely backed up.
You can analyze the file size of the app or services in the IPK file.
Open the Command Palette (Ctrl+Shift+P) and type webOS OSE: IPK Analyzer.
Click Import IPK.
Choose the IPK file to analyze. After the file is loaded, you can see the following screen:
Click the Compare IPK button to load another IPK. (For example, the older version of the original file)
||webOS OSE: Create Project Wizard
||Generates source code templates.
||webOS OSE: Install Global Packages
||Installs essential global packages to run this extension.
||webOS OSE: Generate Project
||webOS OSE: Package Application
||Packages the app into a package file (IPK).
||webOS OSE: Set Up Device
||Adds, modifies, or removes devices from the device list.
|Testing apps on the device
||webOS OSE: Install Application
||Installs an app on the device.
||webOS OSE: Launch Application
||Runs an app installed on the device.
||webOS OSE: Run Application
||Package, Install, and Launch operations are executed sequentially.
||webOS OSE: Debug Application
||Package, Install, and Inspect operations are executed sequentially.
|Analyzing an IPK
||webOS OSE: IPK Analyzer
||Analyzes a selected IPK.
- When the IDE is opened, a notification indicates the VirtualBox is not installed, even when VirtualBox is in fact installed and working properly. To resolve this, update the environment path variable to point to the VirtualBox installation directory.
- If you want to report bugs or suggest some features, use Issue Reporter. (Help > Report Issue)
Copyright and License Information
Unless otherwise specified, all content, including all source code files and documentation files in this repository are:
Copyright (c) 2021-2022 LG Electronics, Inc.
All content, including all source code files and documentation files in this repository except otherwise noted are:
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.