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 pilation 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 pile-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 plicated for a static single-page website.
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 pilation 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 pile-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 plicated for a static single-page website.
Share Improve this question asked Jul 26, 2019 at 17:57 David CallananDavid Callanan 5,97014 gold badges76 silver badges122 bronze badges2 Answers
Reset to default 10After 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 mand. You can also easily switch to an express server if required.
This has the following benefits over a normal svelte pilation 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
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 pile to the public folder instead of dist). Svelte / Rollup will not generate an index.html file, it is purely for piling and bundling your JS / Svelte ponents.
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 ment on that.
I hope my answer helps in some way.