Writing Your First App

Ultralight enables you to build your C/C++ app's front-end with HTML/JS/CSS.

This gives you the best of both worlds-- fast, beautiful, modern web UI with the power and performance of native code.

1. Install the prerequisites

Install the prequisites for your platform if you haven't already done so.

2. Clone the Quick Start repo

Clone the code in the ultralight-ux/ultralight-quick-start repository.

git clone [email protected]:ultralight-ux/ultralight-quick-start.git

3. Download the Ultralight SDK and extract it to `/SDK`

Download the Ultralight SDK and extract the contents to ultralight-quick-start/SDK.

4. Open in VS Code

Building the app

Open the ultralight-quick-start folder in VS Code
Install the recommended extensions when prompted (C/C++ and CMake Tools)
Select your preferred build preset (Release or Debug) when prompted
Build the project using one of these methods:
- Click the "Build" button in the CMake status bar
- Run the "Build (Release)" or "Build (Debug)" task from the Terminal menu
- Press F7 to build with the default configuration

Running / debugging the app

After building, you can run and debug the app:

Open the "Run and Debug" view (Ctrl+Shift+D)
Select "MyApp" from the dropdown
Press F5 to start debugging or Ctrl+F5 to run without debugging

5. Understanding the folder layout

The quick start project is organized with the following structure:

ultralight-quick-start/
  ├── assets/           # HTML resources to bundle with app
  ├── cmake/            # CMake scripts to automate build
  ├── src/              # C/C++ source files
  └── CMakeLists.txt    # CMake project file, edit this to customize your app

Assets Folder

You should place all your web-page resources (eg, HTML files, JS files, CSS files, images, etc.) inside the assets folder. Anything in this directory will be bundled with the application post-build.

You can access these resources via file:/// in your C++ and HTML code, for example:

void MyApp::InitializeView() {
  // Load "app.html" from the "assets" directory
  myView->LoadURL("file:///app.html");
}

6. Customizing the window title

To change the title of the window, we will need to dive into the C++ source code for our app.

Open up src/MyApp.cpp and find the following lines:

///
/// Set the title of our window.
///
window_->SetTitle("MyApp");

Change the string to something like "My Awesome App!" and save the file:

///
/// Set the title of our window.
///
window_->SetTitle("My Awesome App!");

After you've done that, rebuild and relaunch MyApp to see your changes.

7. Editing the HTML assets

Let's start editing our HTML assets.

Open up assets/app.html and find the following lines:

<body>
 <h1>Hello World!</h1>
</body>

Change the HTML to display another welcome message, like "Welcome to My App!":

<body>
  <h1>Welcome to My App!</h1>
</body>