.storybook/index.override.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title><%= options.title || 'Storybook'%></title>

    <% if (files.favicon) { %>
    <link rel="shortcut icon" href="<%= files.favicon%>" />
    <% } %>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
    files.css.forEach(file => { %>
    <link href="<%= file %>" rel="stylesheet" />
    <% }); %>

    <% // OVERRIDE START
        const { name } = require('../package.json');
    %>
    <script type="module" src="<%= name %>.esm.js"></script>
    <link rel="stylesheet" href="<%= name %>.css" />
    <% // OVERRIDE ENDS %>

    <style>
      #root[hidden],
      #docs-root[hidden] {
        display: none !important;
      }
    </style>
  </head>
  <body>
    <% if (typeof bodyHtmlSnippet !== 'undefined') { %>
      <%= bodyHtmlSnippet %>
    <% } %>

    <div id="root"></div>
    <div id="docs-root"></div>

    <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
      <script>
        <% for (var varName in globals) { %>
            <% if (globals[varName] != undefined) { %>
              window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
            <% } %>
        <% } %>
      </script>
    <% } %>

    <% dlls.forEach(file => { %>
      <script src="<%= file %>"></script>
    <% }); %>

    <% files.js.forEach(file => { %>
      <script src="<%= file %>"></script>
    <% }); %>
  </body>
</html>