Elit Run Help

Create an Elit-based .wapk that points to https://elit.d-osc.com/

This guide shows the default browser-sandbox-friendly way to create a `.wapk` package that points to the external site at `https://elit.d-osc.com/`: keep a small in-package HTTP server, but build the browser UI itself with Elit inside the archive so you can grow the package later without falling back to inline HTML.

Back to Elit Run Privacy Policy Open target site

Quick Answer

Recommended approach

Do not rely only on a hard redirect unless you know the destination behaves well inside an embedded frame. In this repo, the default pattern is to ship a tiny WAPK package whose server is small, but whose browser UI is written with Elit so you can add branding, notices, or richer flows without rewriting the package later.

Elit is the default frontend Works in browser sandbox Keeps a fallback when iframe embedding is blocked

Step 1

Create the package source

In this repo, the working example already lives under `examples/elit-dosc-link/`. If you want your own variant, duplicate that folder and change the `TARGET_URL` constant in `index.js`. 

examples/
  elit-dosc-link/
    index.js
    index.html
    client.mjs
    README.md

Step 2

Register the WAPK header

Add an entry to `wapk.config.json` so the example generator knows which source directory to pack, which runtime header to embed, and which Elit browser modules to copy into the archive. 

{
  "sourceDir": "examples/elit-dosc-link",
  "outputPath": "examples/elit-dosc-link.wapk",
  "header": {
    "name": "elit-dosc-link",
    "version": "1.0.0",
    "runtime": "node",
    "entry": "index.js",
    "scripts": {
      "start": "node index.js"
    },
    "port": 8083,
    "createdAt": "2026-04-13T00:00:00.000Z"
  },
  "extraFiles": [
    ["vendor/elit-dom.mjs", "node_modules/elit/dist/dom.mjs"],
    ["vendor/elit-el.mjs", "node_modules/elit/dist/el.mjs"],
    ["vendor/elit-state.mjs", "node_modules/elit/dist/state.mjs"],
    ["vendor/elit-style.mjs", "node_modules/elit/dist/style.mjs"]
  ]
}

Step 3

Use a small in-package HTTP server

Keep the server narrow: it should serve `index.html`, `client.mjs`, and `/vendor/*`, plus expose `/open` and `/api/status`. That keeps the server easy to reason about while the UI stays inside Elit. 

const fs = require('fs');
const http = require('http');
const path = require('path');

const TARGET_URL = 'https://elit.d-osc.com/';
const port = 8083;

function sendFile(response, relativePath) {
  const normalized = relativePath.replace(/^\/+/, '');
  const filePath = path.join(__dirname, normalized);
  response.writeHead(200, { 'content-type': 'text/html; charset=utf-8' });
  response.end(fs.readFileSync(filePath));
}

const server = http.createServer((request, response) => {
  const pathname = (request.url || '/').split('?')[0] || '/';

  if (pathname === '/' || pathname === '/index.html') {
    sendFile(response, 'index.html');
    return;
  }

  if (pathname === '/open') {
    response.writeHead(302, { location: TARGET_URL });
    response.end();
    return;
  }

  sendFile(response, pathname);
});

server.listen(port);

Step 4

Build the browser UI with Elit

The browser entry should import Elit from the packaged vendor files. This is the default frontend pattern for the `elit-dosc-link` example. 

import { render } from './vendor/elit-dom.mjs';
import { a, button, main, section } from './vendor/elit-el.mjs';
import { createState, reactive } from './vendor/elit-state.mjs';
import styles from './vendor/elit-style.mjs';

const appState = createState({ view: 'overview' });

render('app', reactive(appState, (state) => main(
  section('Your Elit UI goes here'),
)));

In the working example, `client.mjs` handles the open button, packaged status view, and embedded preview.

Step 5

Generate and test inside Elit Run

npm run example:elit-dosc-link
  1. Run Elit Run locally.
  2. Generate `examples/elit-dosc-link.wapk`.
  3. Open that archive from the landing page.
  4. Use the in-package `Open target site` button.
  5. Check whether the embedded preview works or is blocked by the destination site.

Important Note

Iframe and redirect limitations

Repo Shortcut

Files added for this guide