Build a plain HTML app

You don’t need a framework or a build step. A niso app can be an index.html with its stylesheets and scripts, loaded as a browser loads it: classic and module scripts, imports, <link rel="stylesheet">, fonts and images, from the app’s own files.

examples/plain/index.html

<!doctype html>
<html>
<head>
  <meta name="niso-platform-style" content="auto">
  <link rel="stylesheet" href="style.css">
  <script type="module" src="app.js"></script>
</head>
<body>
  <h1>Count: <span id="n">0</span></h1>
  <button id="add">Add one</button>
</body>
</html>

examples/plain/app.js

let n = 0;
document.getElementById('add').addEventListener('click', () => {
  document.getElementById('n').textContent = ++n;
});

examples/plain/style.css

h1 { color: tomato; }

The niso-platform-style meta gives the page the platform’s look (Platform style); leave it out for plain CSS.

Run it

Headless, tapping the button once (niso-run from cargo build --release -p niso-quickjs --bin niso-run):

target/release/niso-run --page examples/plain/index.html --root examples/plain --tap 43,51 --dump | grep Count

  <h1>Count: <span id="n">1</span></h1>

In a window:

hosts/iced/build.sh --no-launch && target/release/niso-iced --page examples/plain/index.html --root examples/plain
hosts/apple/build.sh --platform macos --page examples/plain

With --root, the page is at http://localhost/ (on Apple platforms, at the app’s own origin https://<bundle id>.app.niso/) and its URLs map to files under the root, so relative links resolve as on a web server. A path that leaves the root isn’t served.

Android has no --page yet: its host runs a JS bundle, so bundle the page’s scripts into one file with esbuild, as examples/build.mjs does.