Web

A JOPS app is a set of static files: an index.html, your ES modules and HTML layouts, and the library itself. The browser loads them as they are. There is no build step, so any static web server can host the app.

You can load the library in two ways:

• From the CDN (jsDelivr): two tags in an HTML page, nothing to install.
• Vendored with npm: npx jops-core init copies the library into your project as lib/jops-core.min.js, sets up index.html and adds scripts to package.json.

Quick start

CDN

1. Add the import map and the jops-core script to your index.html:

   index.html

   <script type="importmap">
   {
     "imports": {
       "jops-core": "https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js"
     }
   }
   </script>
   <script type="module"
     src="https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js"
     data-app="./src/App.js"></script>

2. Create the entry module that data-app points to. It creates the root view and renders it:

   src/App.js

   import { View } from "jops-core";
   
   export default class App {
     constructor() {
       const root = new View();
       root.loadLayout("./src/layout/main.html").then(() => root.render());
     }
   }

3. Serve the folder over HTTP and open it in the browser:

   npx serve

Replace @latest with a version (for example @1.1.10) to pin it.

npm

1. Create a project and install JOPS:

   npm init -y
   npm install jops-core

2. Run init and pick a template (1 Empty, 2 Hello World, or 5 None for only the library, index.html and scripts):

   npx jops-core init

3. Serve the folder over HTTP:

   npx serve

init vendors the library to /lib/jops-core.min.js, writes the import map and the module script into index.html, and adds build and postinstall scripts to package.json. See Installation for every template.

ES modules need HTTP

Open the app through a web server (npx serve or any static server), not by double-clicking index.html. Browsers block import on file:// URLs.

The two script tags

The import map

The import map tells the browser where the bare specifier "jops-core" lives, so every module of your app can write:

import { View, Router, Store } from "jops-core";

The import map must come before any module script on the page. Its URL and the src of the jops-core script must be the same URL, otherwise the browser loads two separate copies of the library.

data-app

The module script loads the library, and the library then imports the module named in data-app and creates its default export. That module is your entry point (App.js by convention). Point data-app to wherever you keep it.

data-root

By default the app renders into <body> and replaces its content. To render into one element and keep the rest of the page, add data-root with that element’s id:

index.html

<header>Static site header</header>
<div id="app"></div>

<script type="module"
  src="https://cdn.jsdelivr.net/npm/jops-core@latest/lib/jops-core.min.js"
  data-app="./src/App.js"
  data-root="app"></script>

For pages where your own code decides when the app starts (or stops), use hosted mode instead.

Project layout

A typical npm project created by npx jops-core init looks like this:

• index.html import map + jops-core script
• Directorylib/

  • jops-core.min.js vendored library
• Directorysrc/

  • App.js entry point (data-app)
  • Home.js one view per file
  • Directorylayout/

    • main.html
  • Directorycss/

    • styles.css
• package.json

See Project structure for what each part does.

Paths

Paths you give to JOPS (data-app, src=, layout=, loadLayout(), setStyle()) resolve against the HTML page, not against the file they are written in. JOPS adjusts them to where the library comes from:

Setup	Write	Works in a sub-folder (example.com/my-app/)
Library from the CDN	./src/...	Yes: ./ paths stay relative to the page
Vendored library (/lib/jops-core.min.js)	/src/... or ./src/...	Only with the folder in every path

With a vendored library, ./src/... and /src/... both resolve from the site root. Serve the app from the root of the site, or, if it lives in a sub-folder, write root-absolute paths that include the folder everywhere: the import map, the script src, data-app, src=, layout=, loadLayout(), stylesheets and images.

my-app/index.html

<script type="importmap">
  { "imports": { "jops-core": "/my-app/lib/jops-core.min.js" } }
</script>
<script type="module" src="/my-app/lib/jops-core.min.js" data-app="/my-app/src/App.js"></script>

Tip

ES module import statements inside your .js files are resolved by the browser relative to the file, as usual. The path rules above apply only to paths that JOPS loads.

Deploying

The files you write are the files you ship. For an npm project, create a clean copy for the server:

npm run build

This generates a dist/ folder ready to serve. Upload it to any static host: Nginx, Apache, IIS, S3 with CloudFront, GitHub Pages and similar. The server only needs to deliver files. Hash routes (#details?id=7) never reach the server, so no rewrite rules are needed.

Before building, make sure the vendored library matches the installed package:

npm i jops-core@latest
npx jops-core update

build warns when lib/jops-core.min.js differs from the installed version. See Updating and Production.

Note

Browsers and CDNs may cache jops-core.min.js, views and layouts. Use short cache headers or versioned paths for those files so users get the new version after a deploy.

Next steps

Quick startBuild your first JOPS app from a template.

Embedding in a pageStart and stop a JOPS app from your own code with hosted mode.

RoutingHash routes, stacked views and transitions.

CLIinit, update and build.