basperheim/custom-html-file-wails-io.md

## custom-html-file-wails-io.md

      
    Raw
  

              custom-html-file-wails-io.md
            
          
    Use a custom HTML file in Wails.io

Generate Wails.io project

Create a new Vanilla TS wails.io project with wails init -n myproject -t vanilla-ts.
Add a main.html file in assets

Create a new frontend/src/assets/main.html file:
<h1>hello world</h1>
Finally, modify the frontend/index.html as follows:
<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        fetch("./src/assets/main.html")
          .then((response) => response.text())
          .then((html) => {
            document.getElementById("includedContent").innerHTML = html;
          })
          .catch((error) => console.error("Error loading content:", error));
      });
    </script>
  </head>
  <body>
    <!-- <div id="app"></div> -->
    <div id="includedContent"></div>
    <script src="./src/main.ts" type="module"></script>
  </body>
</html>