How to build a configurable static webpage?

[gitsang]

Due to deployment requirements, I need to use the static-adapter to build static web pages and support configurable web and API prefixes.

The configuration is divided into two parts:

1. apiPrefix: Usually determined by the backend deployment approach, for example, it might add a prefix like /app/api/v1
2. pagePrefix: Used to add a prefix when navigating between pages when the page is deployed with a prefix (such as dynamically concatenating pagePrefix in oauth redirect_uri)

1. My current solution

1.1 Page routing

Page routing by default uses relative paths, so I only need to add prefixes in the reverse proxy server.

1.2 Configuration file

I added a config.js in static/, which gets copied to build/config.js after npm run build

window.CONFIG = {
  apiPrefix: "/app/api/v1",
  pagePrefix: "/app",
};

Then, I added the following in src/app.html:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
+   <script src="./config.js"></script>
    %sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

This way, when I run npm run build, this script gets embedded under the compiled HTML files.

When deploying, I can modify the configuration by replacing the config.js file.

2. The problem encountered

However, with this approach, it always looks for config.js from the current path. If I have multi-level routes, the config.js file cannot be found:

• Accessing /app/login looks for /app/config.js -- 200
• Accessing /app/oauth/callback looks for /app/oauth/config.js -- 404

Additionally, the path found through npm run dev has the same issue.

3. Subsequent solution ideas

I noticed that %sveltekit.head% and %sveltekit.body% automatically calculate relative paths based on route depth:

• build/login.html has href="./_app/immutable/entry/start.DuYo4CyI.js"
• build/oauth/callback.html has href="../_app/immutable/entry/start.DuYo4CyI.js"

I think I should also be able to use a similar method to calculate the location of the config.js file

4. Other attempted solutions

4.1 .env

Using a .env file for configuration and reading with import.meta.env.VITE_API_PREFIX, but this file can only be read during build time or dev time, and cannot be dynamically modified after compiling into static files.

I noticed that npm run build generates a build/_app/env.js. I think maybe I can also configure my environment variables from this location, but I haven't found relevant documentation.

4.2 Use the configuration provided by the backend

This is a deadlock, because my backend API may need the prefix configured by the frontend.

Reference

• https://svelte.dev/tutorial/kit/env-static-public

[Kxrma47]

Use SvelteKit's asset placeholder instead of a route-relative literal:

<script src="%sveltekit.assets%/config.js"></script>

Keep config.js in static/. During generation, %sveltekit.assets% becomes paths.assets when configured, otherwise the correct relative path to paths.base, so nested pages do not resolve it from their own directory. This is the documented app.html placeholder: https://svelte.dev/docs/kit/project-structure#Project-files-src-app.html