client/public/frame.html

<!DOCTYPE HTML>
<html>
<head>
  <title>Try PureScript!</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--
    JSPM Generator Import Map
    Edit URL: https://generator.jspm.io/#ZcxBDkAwEEDRWQinMQwhlr2EA9BOZKQqqamtq5OIle1L/s8zgOIag4p6djDLUkpQXjgawh47AsdWtsnjehiqsUWCyJPV0u2boQEbrH9QWS8c9O8Hx5Pj61+ckjgzPOPmBszFaRmMAA
  -->
  <script type="importmap">
  {
    "imports": {
      "big-integer": "https://ga.jspm.io/npm:big-integer@1.6.51/BigInteger.js",
      "decimal.js": "https://ga.jspm.io/npm:decimal.js@10.3.1/decimal.js",
      "react": "https://ga.jspm.io/npm:react@18.2.0/index.js",
      "react-dom": "https://ga.jspm.io/npm:react-dom@18.2.0/index.js",
      "react-dom/client": "https://ga.jspm.io/npm:react-dom@18.2.0/client.js",
      "react-dom/server": "https://ga.jspm.io/npm:react-dom@18.2.0/server.browser.js",
      "uuid": "https://ga.jspm.io/npm:uuid@8.3.2/dist/esm-browser/index.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js",
        "scheduler": "https://ga.jspm.io/npm:scheduler@0.20.2/index.js"
      }
    }
  }
  </script>

  <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
  <!-- While 1.5.12 is not the latest release (1.5.16) and still sometimes shows an error (head on null) it is currently the best option -->
  <!-- See https://github.com/purescript/trypurescript/pull/297#issuecomment-1214194277 -->
  <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.12/dist/es-module-shims.js" integrity="sha384-KpzeqocuAuGQvuaqG8NBwER/6UR/rFGoff/DdvgKT1OBZsR/GyQXTn6hrC5J+K2B" crossorigin="anonymous"></script>

  <script src="js/frame.js"></script>
</head>
<body>
  <main id="main"></main>
  <div id="root"></div>
</body>
</html>