Vue3 and nuxt3 fetch method local and on "netlify dev" is ok, but after uploading via github to netlify no longer works

I can create a form locally using the Netlify Dev environment
Submit and store in Supabase database.
The function works locally
const result = await fetch(/api/subscribe?email=${userEmail.value});
but on the server on Netlify I keep getting 500 errors with no error message.
I use Nuxt3, in the Netlify dev environment and local localhost everything runs great, only in production on the Netlify server it doesn’t work.

Hi @didefix

Are environment variables used to hold supabase credentials? Are they set in the UI?

Are you able to share the repository you are deploying from?

Are environment variables used to store Superbase credentials? Are they set in the UI?
Answer: Yes I use environment variables, if the form means user interface then no.
Can you share the repository you are deploying from?
Answer: I reduced the code but works locally in the answer. If that’s not enough, I think I can also unlock the repository, but I can’t say that now.

// Content of newsletter3.vue file with form and javascript

<form @submit.prevent="postToDB">
<input type="email"  id="email"  v-model="userEmail"  name="email" />
<button>Subscribe</button>
</form>
<script setup>

const DBResponse = ref([]);
const userEmail = ref("");

async function postToDB() {
  console.log('bin in funktion postToDB => ', userEmail.value);
  const result = await fetch(`/api/subscribe3?email=${userEmail.value}`);
  const data = await result.json();
  console.log('Data newsletter3 ist ', data);
  console.log('Result ist => ', JSON.stringify(data) );
  DBResponse.value = data;
}
</script>

// ——————————————————————————————————
// this is a javascript file from server/api/subscribe3
// this file is called by the .vue file (newsletter3.vue) from above.

import * as url from "url";
import { createClient } from "@supabase/supabase-js";

export default async (req, res) => {
    const queryObject = url.parse(req.url, true).query;
    const { SUPABASE_URL, SUPABASE_KEY } = process.env;
    try {
         const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

        let response;
        const { email } = queryObject;

        if (email) {
            const { data, error } = await supabase
              .from('subscribers') 
              .insert([
                  {
                      email: email,
                  }
              ]);
            response = data;
        }
        res.writeHead(200, {
            "Content-Type": "application/json",
        });
        res.write(JSON.stringify(response));
        res.end();
    } catch (error) {
        console.log(error);
        res.writeHead(500, {
            "Content-Type": "application/json",
        });
        res.write(JSON.stringify(error));
        res.end();
    }
};

Yours sincerely

The first thing to mention is that any environment variable used inside a .vue file is then accessible in the frontend code. If the SUPABASE_URL and SUPABASE_KEY are meant to remain secret (and I suggest they should remain so) then I would advise moving the call to Supabase to a function.

Where is /api/ defined as a route? In this an internal Vue/Nuxt route? Are you using SSR or SSG functionality of Nuxt3?

1 Like

If I type “supabase_url” and “supabase_key” directly into the
File server/api/subsribe3, everything works great locally and on netlify productions.
But I didn’t manage it with serverless functions from netlify.

Are you using Nuxt3’s SSR or SSG functionality?
Answer: SSR

So it works if I write the Supabase Url and Key directly in a file. Tried a lot with serverless functions. Are there may be a guide where the solution can be found.

Many Thanks
dieter

1 Like

Problem solved without serverless function.
I set up the environment variables in the Netlify frontend.
Site Overview > Site Settings > Build and Deploy > Environment > Environment Variables

Just enter the parameters with the values here and it works locally with .env environment variables and also on Netlify.
Since I work with Nuxt3 and Vue3, I don’t think the key will ever be displayed in the developer console and should therefore be relatively safe.
Thank you for your help
dieter

1 Like