Menu
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.
903
Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead.
How to make components in Svelte # Before you start, make sure you've set up a new Svelte project using SvelteKit. Within SvelteKit, we already have a folder called routes, which contains all of our Svelte application pages. To kick things off, make a new folder in src called components .
Svelte is not a monolithic JavaScript library imported by applications: instead, Svelte compiles HTML templates to specialized code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance; application code is also processed by the compiler, inserting calls to ...
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:
165
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
