Svelte build initial render to index.html file

Asked 26/7, 2019 at 17:57 Answered 27/7, 2019 at 16:20

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.

Fem answered 26/7, 2019 at 17:57 Comment(0)

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:

Better SEO
Possibly better accessibility
Faster page loads due to initial page render
JavaScript not required to view non-dynamic sections of your page
Component-scoped javascript still available at runtime
No runtime and virtual DOM - faster and smaller javascript bundle

Fem answered 27/7, 2019 at 16:20 Comment(1)

Looks like sapper has been superseded by SvelteKit (by the same people): kit.svelte.dev – Dewey 27/4, 2021 at 1:36

I have recently started experimenting with Svelte and started by downloading the hello world example.
I then just started altering it for my needs.
It already has an index.html file set up in the public folder (it is set up to compile to the public folder instead of dist). Svelte / Rollup will not generate an index.html file, it is purely for compiling and bundling your JS / Svelte components.

The index.html file supplied is just basic:

<!doctype html>
<html>
<head>
    <meta charset='utf8'>
    <meta name='viewport' content='width=device-width'>

    <title>Svelte app</title>

    <link rel='icon' type='image/png' href='favicon.png'>
    <link rel='stylesheet' href='global.css'>
    <link rel='stylesheet' href='bundle.css'>
</head>

<body>
    <script src='bundle.js'></script>
</body>
</html>

The main.js looks like this:

import App from './App.svelte';

var app = new App({
  target: document.body
});

export default app;

Here is a link [source], [build] to my first svelte app if you're interested.

As far as SEO is concerned, I hear all over the place for years that google can crawl JS now, but I am not convinced. A JS driven SPA will never have the SEO juice that a standard html page will.

That being said, I am currently working on an SPA with svelte that I want good SEO for. The interactive part is only a small part of the page, so I am adding the rest (text, images and stuff) directly to the index.html so search engines should have no problem crawling it. I just change the main.js to inject the app into a div (with the ID of app) rather than the body.
So the main.js looks like this:

import App from './App.svelte';

var app = new App({
  target: document.getElementById('app'),
});

export default app;

I have not yet done anything with Sapper so I can't comment on that.

I hope my answer helps in some way.

Ney answered 26/7, 2019 at 23:17 Comment(3)

I actually did start with that hello world example and that's when I decided to ask this question. If I put the static content in index.html, it defeats my purpose of using svelte because my website is mainly static and the only dynamic parts will be maybe a hamburger menu. So I intend to use Svelte as more of a html compiler than a js compiler due to my lack of dynamic parts, similar to next.js and react static and a few others (which have the issue of either not allowing any client-side javascript inside components or require the entire react runtime which I'mtrying toavoid byusing Svelte) – Fem 27/7, 2019 at 10:36

Then it seems to me that you don't need svelte at all (or any JS framework). A menu can be made with minimal CSS and maybe a small amount of JS. Maybe a static site generator would more suit your needs. I persoannly use metalsmith for my blog. – Ney 27/7, 2019 at 12:7

Svelte allows me to separate into components with scoped styles and javascript and I find it difficult to develop without this. I could use other template engines but I can't find any that have scoped css and js. I also prefer to stick with Svelte so that I can use it across projects regardless of whether I'd like to generate a static website or not. Svelte already generates a static website unless you use something like sapper, but requires javascript to generate the initial render instead of generating a html file with the initial render. I would have expected this to be a simple task. – Fem 27/7, 2019 at 13:21

Recommended topics

Hot tags