Simple Static Files

The simplest approach is to serve static files without any build step. You can simply place your HTML, CSS, and JS files directly inside the app/ directory.

By leveraging native browser features like ES modules and import maps, you can easily load complex dependencies directly from CDNs (like esm.sh). For example, here is an app/index.html that runs a full GraphiQL IDE using only static files:

<!doctype html>
<html lang="en">
  <head>
    <title>GraphiQL</title>
    <link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.1.0",
          "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
          "graphiql": "https://esm.sh/graphiql?standalone",
          "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone"
        }
      }
    </script>
    <script type="module">
      import React from 'react';
      import ReactDOM from 'react-dom/client';
      import { GraphiQL } from 'graphiql';
      import { createGraphiQLFetcher } from '@graphiql/toolkit';

      const fetcher = createGraphiQLFetcher({ url: '/graphql' });
      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
      root.render(React.createElement(GraphiQL, { fetcher }));
    </script>
  </head>
  <body style="margin: 0;">
    <div id="graphiql" style="height: 100dvh;"></div>
  </body>
</html>