Run a Svelte app from file:// with no server

Asked 23/5, 2020 at 1:9 Answered 15/1, 2023 at 3:15

I need to run a Svelte app and be able to execute it without a server. With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte

Eyla answered 23/5, 2020 at 1:9 Comment(3)

Hi vector. One of the answer posters below. We’d like clarification whether you mean to 1. Run the svelte app with roll up and build it (with npm etc) And then run the app WITHOUT a server (ie locally via file) ... Or, 2. Run and build svelte app WITHOUT server (including not running node on the build step) – Sulphone 23/5, 2020 at 3:52

Option 1 : Run the already built app locally via file:// – Eyla 23/5, 2020 at 4:30

Sure you can. I build android apps who are just html/css/js files embeded in a webwiew so this is a file:// protocol. Just write relative path in the index.html file to the bundle.css and bundle.js. – Sociology 23/5, 2020 at 9:9

I need to run a Svelte app and be able to execute it without a server. With other frameworks this is possible as it is just javascript but I can't find a way to just click my index.html and run my app built with Svelte

I'll break it down into two components, building and executing the svelte app.

Firstly, you require a computer to build the Svelte app as it executes rollup (and runs a node server) to perform the compilation, but this isn't what the OP is asking for...

To address the execution of the Svelte app, you can execute this without a running server.

Please see attached

You are given a npm run build from the Svelte create-svelte app generate command which outputs a public.html.

This can be used to host the file say, on Surge.sh, however to make this "local file friendly", You will need to edit the outputting html to the following (i.e. remove base /).

original source index.html

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

<script defer src='/build/bundle.js'></script>

Final html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Svelte app</title>

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

    <script defer src='build/bundle.js'></script>
</head>

<body>
</body>

</html>

Sulphone answered 23/5, 2020 at 3:17 Comment(3)

The post asks if they can run a svelte app without a http server. The screenshot clearly shows the create-svelte-app template on the browser with file://. – Sulphone 23/5, 2020 at 3:42

This was the first thing I did and it didn't work. Just now I've realized that I was using a router (github.com/jacwright/svelte-navaid) and this was causing the issues. I have switched to using hash-based routing and it solved the problem. Even though your answer did not solve my issue it is indeed the answer to what I wrote in the question and I will accept it as valid, thanks. – Eyla 23/5, 2020 at 4:27

@DenisTsoi Let me just delete all my comments because extended comments on StackOverflow isn't good. – Splice 23/5, 2020 at 7:40

If you're using Svelte (not SvelteKit) and has a single page only. You can use https://github.com/richardtallent/vite-plugin-singlefile to merge everything into one file on build, and it will then work through file://

Snorkel answered 15/1, 2023 at 3:15 Comment(0)

Recommended topics

Hot tags