generateFallbackHtml() — vite Function Reference

Architecture documentation for the generateFallbackHtml() function in indexHtml.ts from the vite codebase.

Function typescript ViteCore ConfigEngine calls 1 called by 1

Entity Profile

ViteCore→ ConfigEngine→ generateFallbackHtml() — vite Function Reference

Dependency Diagram

graph TD
  95af623a_b371_82bb_94fc_ff6a88f1555c["generateFallbackHtml()"]
  3f56d5b2_9fca_532f_3bfc_6bfb2be77015["indexHtml.ts"]
  95af623a_b371_82bb_94fc_ff6a88f1555c -->|defined in| 3f56d5b2_9fca_532f_3bfc_6bfb2be77015
  fc571085_3ab0_feca_5965_61c2be1d5c08["indexHtmlMiddleware()"]
  fc571085_3ab0_feca_5965_61c2be1d5c08 -->|calls| 95af623a_b371_82bb_94fc_ff6a88f1555c
  b2ef9799_cd96_ba83_06a5_28e8fa51363d["getHmrImplementation()"]
  95af623a_b371_82bb_94fc_ff6a88f1555c -->|calls| b2ef9799_cd96_ba83_06a5_28e8fa51363d
  style 95af623a_b371_82bb_94fc_ff6a88f1555c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/server/middlewares/indexHtml.ts lines 558–619

async function generateFallbackHtml(server: ViteDevServer) {
  const hmrRuntime = await getHmrImplementation(server.config)
  return /* html */ `
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="module">
    ${hmrRuntime.replaceAll('</script>', '<\\/script>')}
  </script>
  <style>
    :root {
      --page-bg: #ffffff;
      --text-color: #1d1d1f;
      --spinner-track: #f5f5f7;
      --spinner-accent: #0071e3;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --page-bg: #1e1e1e;
        --text-color: #f5f5f5;
        --spinner-track: #424242;
      }
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      background-color: var(--page-bg);
      color: var(--text-color);
    }

    .container {
      margin: auto;
      padding: 2rem;
      text-align: center;
      border-radius: 1rem;
    }

    .spinner {
      width: 3rem;
      height: 3rem;
      margin: 2rem auto;
      border: 3px solid var(--spinner-track);
      border-top-color: var(--spinner-accent);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg) } }
  </style>
</head>
<body>
  <div class="container">
    <h1>Bundling in progress</h1>
    <p>The page will automatically reload when ready.</p>
    <div class="spinner"></div>
  </div>
</body>
</html>
`
}