You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
apiPrefix: Usually determined by the backend deployment approach, for example, it might add a prefix like /app/api/v1
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
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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:
/app/api/v11. 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.jsinstatic/, which gets copied tobuild/config.jsafternpm run buildThen, 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.jsfrom the current path. If I have multi-level routes, theconfig.jsfile cannot be found:/app/config.js-- 200/app/oauth/config.js-- 4043. Subsequent solution ideas
I noticed that
%sveltekit.head%and%sveltekit.body%automatically calculate relative paths based on route depth:build/login.htmlhashref="./_app/immutable/entry/start.DuYo4CyI.js"build/oauth/callback.htmlhashref="../_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
.envfile for configuration and reading withimport.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 buildgenerates abuild/_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
Beta Was this translation helpful? Give feedback.
All reactions