Building to a single offline .html file

[RobinL]

I work for government, and we're often very constrained in our technology. Since many of our users can't set up web servers, it can be very useful to distribute notebooks as single, standalone .html files that can easily be emailed.

I'm excited by notebooks 2.0 because they seem to 'almost' offer this out of the box. I can work on a single, self contained project using the new <notebook> tag the a .html file, with all my code locally, and run a build command to output my html.

I wondered if anyone could advise on whether achieving this is likely to be fairly straightforward or very difficult, and/or whether it's a feature that's been considered. If fairly straightforward, I'd appreciate a few tips on the direction I may take.

So far, I've had a play with a vite.config.mjs to attempt to do this combined with a vite build:

see here

import { defineConfig } from "vite";
import { observable, config as nbkit } from "@observablehq/notebook-kit/vite";
import { viteSingleFile } from "vite-plugin-singlefile";      

export default defineConfig({
    ...nbkit(),
    plugins: [
        observable(),
        viteSingleFile()
    ],
    build: {
        assetsInlineLimit: Infinity,
        cssCodeSplit: false,
        rollupOptions: {
            input: "index.html",
            inlineDynamicImports: true
        }
    }
});

but i get errors like Cannot access 'nl' before initialization.

After fiddling for several hours with various options I got the feeling there may be a bit of a conflict/contradiction between the design of notebook-kit and my aim of outputting a single file:

• The build command of notebook-kit always includes all dependencies (e.g. mermaid, vega) so there's lots of unused code. So the route of running notebooks build and then a second step to try and singlefile it results in very large files (and I haven't actually got it to work, my singlefile outputs always have errors like RuntimeError: Cannot access 'nl' before initialization)
• I feel like there's possibly something about the dynamic handling of dependencies that makes it difficult to roll things up into a single offline page.

With the 1.0 old style notebooks, with a lot of fiddling, I was able to get this working in quite a hacky way by combining the runtime with javascript export, and inlining dependencies like vega-lite manually in <script> tags.

Irrespective of whether this is possible, thanks so much for this technology, I'm very excited about the notebook 2.0!

[RobinL]

An update: I have got this going. The trick is to localise the dependencies that you're actually using (i.e. explicitly install them using like @observablehq/inputs ).

The below is a minimal vite config, but you can be a bit more clever and prune the deps you don't need from node_modules/@observablehq/notebook-kit/dist/src/runtime/stdlib/recommendedLibraries.js, otherwise you have to install them ALL by running like npm install @observablehq/plot @observablehq/inputs lodash arquero ... and so on

You also want to use a template (see the template: "./template.html" line) because otherwise it'll inline loads of fonts you don't need

Minimal vite config

// vite.config.mjs
import { defineConfig } from "vite";
import { observable } from "@observablehq/notebook-kit/vite";
import { viteSingleFile } from "vite-plugin-singlefile";
import { resolve } from "node:path";

export default defineConfig({
  root: ".",
  resolve: {
    alias: [
      {
        find: /^npm:(.*)$/,
        replacement: resolve("./node_modules/$1")
      },
      {
        find: /^observable:(.*)$/,
        replacement: resolve("./node_modules/@observablehq/notebook-kit/dist/src/$1")
      }
    ]
  },
  plugins: [
    observable({
      template: "./template.html"
    }),
    viteSingleFile()
  ],
  build: {
    assetsInlineLimit: Infinity,
    minify: false,
    sourcemap: false
  }
});