@trailstash/ultra/cli/serve.js

A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc

import fs from "fs";
import path from "path";
import { context } from "esbuild";
import { Args, Command, Flags } from "@oclif/core";
import Build, {
  buildConfigFromQuery,
  buildOptions,
  getHTMLContext,
  ultraRoot,
} from "./build.js";
import { Liquid } from "liquidjs";

const engine = new Liquid();

export default class Serve extends Command {
  static flags = {
    ...Build.flags,
    host: Flags.string({
      char: "H",
      description: "Host to listen on",
      default: "localhost",
    }),
    port: Flags.string({
      char: "p",
      description: "Port number to listen on",
      default: 8000,
      parse: parseInt,
    }),
  };
  static args = {
    query: Args.file({
      description: "A query to build an interactive map for",
    }),
  };

  static description = `Run an Ultra development server`;

  async run() {
    let {
      args: { query },
      flags: { config, host, port },
    } = await this.parse(Serve);

    if (!fs.existsSync(config)) {
      console.error(
        `"${config}" not found, using ${path.join(ultraRoot, "config.mjs")}`,
      );
      config = path.join(ultraRoot, "config.mjs");
    }

    if (query) {
      config = await buildConfigFromQuery(config, query);
    }

    let html = engine.parseAndRenderSync(
      fs.readFileSync(path.join(ultraRoot, "index.html")),
      await getHTMLContext(config),
    );
    fs.mkdirSync("dist", { recursive: true });
    fs.writeFileSync("dist/index.html", html);
    html = engine.parseAndRenderSync(
      fs.readFileSync(path.join(ultraRoot, "app.html")),
      await getHTMLContext(config),
    );
    fs.mkdirSync("dist/app", { recursive: true });
    fs.writeFileSync("dist/app/index.html", html);
    fs.copyFileSync(
      "node_modules/maplibre-gl/dist/maplibre-gl-worker.mjs",
      "dist/maplibre-gl-worker.mjs",
    );
    fs.copyFileSync(
      "node_modules/maplibre-gl/dist/maplibre-gl-shared.mjs",
      "dist/maplibre-gl-shared.mjs",
    );

    const ctx = await context(buildOptions(config, true));
    console.log(`Starting dev server on http://${host}:${port}`);
    await ctx.serve({ host, port, servedir: "dist" });
  }
}