Relative paths to bundles in index.html

user_6408313 0
Viewed 2113

I have a small svelte-application, that is accessed through a reverse proxy. The app is accessed under a path, like http://host/appname, and the proxy rule fetches content from http://localhost:port. The svelte-app is listening to the same port.

When I load http://host/appname/index.html, the file is fetched as expected, but the js and css bundles have an absolute path, like '/bundle.js'. This makes the browser trying to fetch http://host/bundle.js, which of course fails. If the links in index.html were relative, like './bundle.js', things would work better, since the browser would expand it to http://host/appname/bundle.js, which is where the files are.

How can I make svelte produce relative paths to my bundles?

svelte
2 Answers

You can set your own public/index.html template and define the links to the CSS and JS bundles to suit your project. For example, if both bundles are output into the public directory as well:

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

    <title>Svelte app</title>

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

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

<body>
</body>
</html>

Note that you can set the output directory for both bundles (CSS & JS) in your rollup configuration file.

user_54386160

I found not very convient with a static generated site. Especially with development and

  1. add <base href="/abc/"> to the index.html file.
  2. use svelte-routing with Router for SPA navigation.
<Router basepath="/abc">
...
</Router>

I suggest use sveltekit

user_51134520
Related