From zero to first run
This guide starts from an empty directory and gets you to a runnable Oro Runtime application using the installed toolchain. The goal is not just to boot a page, but to end with a project that already looks like something you can keep.
1) Create a project with oroc init#
Start from any workspace where you want the app directory to live:
oroc init field-notes
cd field-notes
This gives you a project with an oro.toml, a default web root, and the minimum bundle metadata the runtime needs.
2) Inspect the scaffold#
The first files to look at are:
oro.toml— project configurationsrc/index.html— your initial pagesrc/main.js— your entry module
Use the CLI to confirm what the runtime thinks your configuration is:
oroc config --format toml
oroc config --describe meta.bundle_identifier
oroc config --describe build.copy_map
That gives you the effective config, not just the file on disk.
3) Give the app a real identity#
Update oro.toml so the bundle metadata already looks production-ready:
[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"
This metadata is reused by packaging, installation, and updates later. Setting it early avoids churn.
4) Replace the starter page with something useful#
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()}`
})
That already proves three things:
- the runtime is serving ordinary HTML and ES modules,
oro:applicationis available from the main window,- the project is ready to grow into a real app instead of a demo snippet.
5) Run it locally#
oroc run .
Use these when you need more visibility during development:
oroc run . -D
oroc run . -V --log-file runtime-log.json
6) Confirm the build path#
Before you add more files, learn where the runtime writes outputs:
oroc print-build-dir .
oroc build .
At this point you have a working app, a stable bundle identifier, and a buildable project model.
Next#
Source repository · Edit this page · View Markdown