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 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
Share Improve this question edited Jun 2, 2023 at 10:22 pixelistik 7,8303 gold badges33 silver badges43 bronze badges asked May 23, 2020 at 1:09 VectorVector 7572 gold badges13 silver badges23 bronze badges 3- 2 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) – Denis Tsoi Commented May 23, 2020 at 3:52
- Option 1 : Run the already built app locally via file:// – Vector Commented May 23, 2020 at 4:30
- 1 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. – JeffProd Commented May 23, 2020 at 9:09
2 Answers
Reset to default 10I 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 ponents, building and executing the svelte app.
Firstly, you require a puter to build the Svelte app as it executes rollup (and runs a node server) to perform the pilation, 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 mand 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>
If you're using Svelte (not SvelteKit) and has a single page only. You can use https://github./richardtallent/vite-plugin-singlefile to merge everything into one file on build, and it will then work through file://