First Runtime App · Learn Oro Runtime

This chapter starts from a generated project, then replaces the starter page with a small native runtime smoke test. The app remains ordinary HTML and JavaScript, with native capability coming from an explicit oro:application import.

Create the project

oroc init creates the project config, web root, and starter files.

Terminal

oroc init field-notes
cd field-notes

Set the bundle identity

Bundle metadata is reused later by packaging, install, and update tooling.

oro.toml

[meta]
bundle_identifier = "com.example.field-notes"
title = "Field Notes"
version = "0.1.0"
description = "A small local-first notes app built on Oro Runtime."

[build]
name = "field-notes"

Replace the starter page

The runtime serves web files. Keep the first page plain and make the script import explicit.

src/index.html

<!doctype html>
<html lang="en">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Field Notes</title>

  <main>
    <h1>Field Notes</h1>
    <p id="status">Booting...</p>
    <button id="capture" type="button">Capture note</button>
  </main>

  <script type="module" src="./main.js"></script>
</html>

src/main.js

import application from 'oro:application'

const status = document.getElementById('status')
const capture = document.getElementById('capture')
const currentWindow = await application.getCurrentWindow()

await currentWindow.setTitle('Field Notes')
status.textContent = `Runtime ${application.runtimeVersion}`

capture.addEventListener('click', () => {
  status.textContent = `Captured at ${new Date().toLocaleTimeString()}`
})

Run and inspect the build path

Run locally first. Then confirm where build artifacts are written before the project grows.

Terminal

oroc run .
oroc print-build-dir .
oroc build .

At this point, the app is still a web app. The native part is explicit: the CLI owns the host shell, and oro:application owns the runtime capability used by the page.

What changed

oro.toml named the app and gave it stable bundle metadata.
src/index.html stayed portable HTML.
src/main.js used oro:application for window and version information.
oroc run . loaded the project through the same model used by builds.

Chapter complete

Next, connect these files to the full project layout and configuration model.

Continue to project layout