Possible to update API path in static build without rebuild.
Hello,
I have a where we are distributing a static build nuxt app in a python package to provide a frontend similar to MLflow. The package can host a python api that the nuxt frontend relies on. So currently I set the the api path in
nuxt.config.ts in runtimeConfig.public so that the path is available to all pages within the frontend. The frontend is hosted statically also though python using fastapi.
The problem I am running into is that once the frontend is built, that api path is set and I cannot find a way to be able to update it without rebuilding the frontend. I would like to avoid having to rebuild the frontend if possible in order to avoid requiring users to have node setup on their machine in order to update the api path.
I have scoured the docs to find a way and see several notes implying it is not possible, for example on the .env page it notes, Note that for a purely static site, it is not possible to set runtime configuration config after your project is prerendered..
Is anyone aware of a way that it would be possible to update a global variable to be used by the static site?
My current best solution that I have come up with involves rebuilding the app within a docker container each time that the user starts it up and then using volumes to copy it out and then statically host it. But hopefully could find a cleaner way.
Thank you in advance.8 Replies
Hi @Mightsrain. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, it appears that updating the API path in a static Nuxt build without rebuilding is indeed challenging. However, I can provide some insights and potential workarounds:
1. Runtime Config Limitations:
As you've correctly noted, for a purely static site, it's not possible to set runtime configuration after the project is prerendered. This limitation is mentioned in the Nuxt documentation Environment Variables (https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables).
2. Environment Variables:
While environment variables can be used to update runtime config values, this approach is primarily effective during development or for server-side rendering. For a static build, these variables are typically baked in at build time Runtime Config (https://nuxt.com/docs/guide/going-further/runtime-config#environment-variables).
3. App Config:
Nuxt provides an
updateAppConfig utility, but this is designed for runtime updates and may not be suitable for your static build scenario updateAppConfig (https://nuxt.com/docs/api/utils/update-app-config).
4. Client-side Workarounds:
Although not ideal, you might consider a client-side solution where you fetch the API path from a configuration file or endpoint after the app loads. This could be implemented using a plugin or middleware, but it would require careful handling of asynchronous operations.
5. Build-time Solution:
Your current approach of rebuilding the app in a Docker container each time the user starts it up, while not ideal, is a valid solution given the limitations of static builds. This method ensures that the correct API path is baked into the build at runtime.
6. Server-side Rendering:
If possible, consider using server-side rendering instead of a purely static build. This would allow you to use environment variables or server-side logic to set the API path dynamically Nitro Configuration (https://nitro.unjs.io/guide/configuration#production).
Given these constraints, your current Docker-based solution seems to be a reasonable approach. It allows you to dynamically set the API path without requiring users to have Node.js installed on their machines.
If you're open to exploring alternatives, you might consider:
1. Using a small server-side component to inject the API path into the static HTML at runtime.
2. Implementing a client-side configuration fetching mechanism, although this would introduce a slight delay in API availability.
3. Investigating if your Python package can modify the static files to update the API path before serving them.
Unfortunately, there doesn't seem to be a straightforward way to update global variables in a purely static Nuxt site without some form of rebuild or server-side intervention.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@231825416317304832> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Not possible with generate/static build. This is not a nuxt limitation. All the hmtl an js is already build and the Browser cant read any env from the host Maschine. Without any request or backend/ssr not possible.
You can find and replace in source files. Not recommended
Got it, thats about what it seemed like based on what I could see in the docs. Had considered replacing the source files but it was present so many places in there it would have been tough and very ugly.
Are you aware of any general workaround for how that would be handled? I would assume in a more "normal" case you would set the env variables in a build pipeline or something, build the app and then deploy it statically? Just unfortunately doesn't work for my case
Yes. You can online set env at build time with generate. There is no real workaround. You would have to request the "env" from any "api" at browser (like a request). Or intercept the html and write soweit payload to the window.
Any chance to not generate static files?
Thanks for the input. Pretty much has to be static because its shipped with a python package and we don't want to require node. I found a decent enough workaround that we are going to just host it in docker
If you use empty strings in your runtimeConfig, then when you run the prod build it will read env.
not possible if generating the site
with build and running node yes. but not with static build