Jump to main content

HTML Template

Using your own HTML file.


Default Behaviour

While you don't need to bring your own HTML file to the party, it's recommended that you do. That said, if you're just testing ideas out for the time being and omit this step, the built-in one will work fine.

Do not confuse this with your layout component.


Specifying Your Own

In your root directory's static folder, create an index.html file such as this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Your description here.">
    <title>Your Project Title Here</title>
    <link rel="stylesheet" href="/static/some-css-framework.min.css">
    <link rel="stylesheet" href="/static/svelte.csr.css">
  </head>
  <body>
    {{app}}
  </body>
  <script src='/static/svelte.csr.js' defer></script>
</html>

The body element should only contain {{app}}, which is how the compiled app will know where to mount. The script tag points to where the compiled app will be served from.


File Location

my_project_name
├── manage.py
├── dxsvelte.py
├── package.json
├── tsconfig.json
├── static
│   └── index.html       <-- Create your HTML template here
└── ...