javascripthtmlsveltesapper

Svelte build initial render to index.html file


I've decided try out Svelte for my next website, and this will be a static website hosted using GitLab pages.

I got the basic compilation working which generates dist/bundle.js and dist/bundle.css.

The issue is that I cannot upload this dist folder as there is no index.html file.

How do I get Svelte/rollup to generate an index.html file which contains the initial render?


The other option is to create my own index.html file and import bundle.js. This is not an option for me because the initial render is now generated at runtime via javascript instead of at compile-time, potentially having a negative SEO impact and preventing users without javascript from at least seeing something.


I was also looking at Sapper which does server-side rendering, which, from what I know, does an initial rendering server-side. However, this seems to require you to have a server instead of rendering to a file, and seems overly complicated for a static single-page website.


Solution

  • After digging around for a while, I found out that Sapper allows you to export (render to html files instead of requiring a server).

    You can do this by using the sapper export command. You can also easily switch to an express server if required.

    This has the following benefits over a normal svelte compilation and over some other frameworks: