How to define runtime config on Vercel

[belfortf]

Hi, I'm doing something probably wrong so I thought it is better to ask for help :)

nuxt-api-party is working well in my dev environment on my machine. Here's the nuxt.config.ts:

export default defineNuxtConfig({
	runtimeConfig: {
		apiParty: {
			endpoints: {
				first: {
					url: "",
					token: "",
				},
				second: {
					url: "",
					token: "",
				},
			},
		},
	},
});

After deploying the app to vercel, the api calls fail. My understanding of runtimeConfig is that the variables are populated only in the server and then get passed to the frontend, but it seems my frontend is not getting those (as it seems). Any ideas what am I doing wrong ? I'm using a .env file that is the same for dev and production (I also tried a .env.production file but it didn't change anything). Thanks a lot for any inputs !

[belfortf]

Some more info from my side:

.env file looks like this:

NUXT_API_PARTY_ENDPOINTS_FIRST_URL=https://xxx
NUXT_API_PARTY_ENDPOINTS_FIRST_TOKEN=yyyy
NUXT_API_PARTY_ENDPOINTS_SECOND_URL=https://yyy
NUXT_API_PARTY_ENDPOINTS_FIRST_TOKEN=xxx

Before using nuxt-api-party, my .env variables had VITE in front of them. Maybe that's the issue ?

[johannschopplich]

Your environment variables look fine for your local .env file. Have you added the same variables to your Vercel app configuration?

[johannschopplich]

Autoloading from environment variables doesn't work in some environments. I'm not sure about Vercel, but I have a similar issue in Cloudflare. When you have added them to your Vercel config, you can try to reference them manually:

-url: "",
+url: process.env.NUXT_API_PARTY_ENDPOINTS_FIRST_URL,

[belfortf]

Hi Johann, thanks for your answer. By the way, let me congratulate you on this great project, it was really gold for me to find it after 2 days searching for a secure alternative for my use case 👍

I managed to get it working now by actually getting rid of the .env file and declaring the variables directly on Vercel. Then they get populated on runtimeConfig correctly as it seems. So, the exact same nuxt.config.ts works:

runtimeConfig: {
		apiParty: {
			endpoints: {
				first: {
					url: "",
					token: "",
				},
				second: {
					url: "",
					token: "",
				}
			},
		},
	},

I was not aware that one could / should declare the variables directly on Vercel because before I had a .env.production and my variables were declared with VITE in front of them and it all worked fine. But I'm glad it works now.

[belfortf]

It seems I was too fast to declare victory. There's a very very weird thing going on. I see that the endpoint is being hit by the api call. I'm making some complex machine learning calculations that can take up to 1 minute to process. On localhost, it all works. On Vercel, when I make the api call with nuxt-api-party I see that the endpoint is hit but then after 10 seconds I get a 504 error.

The endpoint is still processing the calculation and ends without an error, the client though gets a 504. If I decrease the processing time, i.e. say 1 second, it all works (on both localhost, and on Vercel) :( Is there any time mechanism built on nuxt-api-party ? Are there any ideas ?

Thanks a lot !

[belfortf]

Regarding what I'm returning, just something like this:

{
"variable1": [
"https://aadasdas.com"
],
"variable2": "axaxaxaxa"
}

[belfortf]

Just speculating here but this is written by Vercel:

Execution Timeout
Serverless Functions on Vercel enforce a maximum execution timeout. This means that the function must respond to an incoming HTTP request before the timeout has been reached.

If the Serverless Function does not respond to the HTTP request within the timeout, then a 504 error status code is returned with the error code FUNCTION_INVOCATION_TIMEOUT.

The timeout is determined by the "Serverless Function Execution Timeout (Seconds)" limit, which is based on the plan that the Personal Account, or Team has enabled when creating the deployment.

However, I'm using an edge function, so that shouldn't be a problem. If I hit the endpoint directly without api-party, I can wait the 1 minute and it is all good. The problem seems to happen when using api-party....