How to deploy React SPA

Support
, , ,
1

Site: https://mealmetrics-awoodbur.netlify.app/
I have built a simple react SPA with its own server and router. It uses the route /openai/generateinfo to call the openai api (which hopefully will work from the api key i stored in the environment variables and call like this: const configuration = new Configuration({
apiKey: Netlify.env.get(“OPENAI_API_KEY”),
});
Right now it won’t connect to the server and I get this error when I hit submit:
POST http://localhost:8080/openai/generateinfo net::ERR_CONNECTION_REFUSED
I’ve already tried adding a _redirects folder in public with “/* /index.html 200” but that didn’t do anything. Help! I’m new to this and don’t know anything!

2

@aarondwoods You’ve already identified your problem.

localhost means the computer of the person visiting the site.

So if I visit the site, it’s trying to connect to localhost:8080 on my computer and obviously I’m not running your API at that location.

You’ll need to host your API somewhere so that it’s accessible to all.

As you can’t run a “node server” with Netlify, (see: https://answers.netlify.com/t/support-guide-can-i-run-a-web-server-http-listener-and-or-database-at-netlify/3078 ), you would create it with a Serverless Function or host it with another provider.

3

Thanks for the response. I’ve switched to a serverless function, but I’m having trouble getting around CORS errors. Right now the error I’m getting is: Access to fetch at ‘https://mealmetrics-awoodbur.netlify.app/.netlify/functions/generateInfo’ from origin ‘http://localhost:8888’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled."
Here is what I return from my serverless function:
return {
statusCode: 200,
headers: {
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Headers”: “Authorization, Content-Type”,
“Access-Control-Allow-Methods”: “POST”,
“Cntent-Type”: “application/json”
},
body: response
}
and here is where I call the function:
const response = await fetch(
“https://mealmetrics-awoodbur.netlify.app/.netlify/functions/generateInfo”,
{
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({ recipe }),
}

4

@aarondwoods You need to handle the preflight options request:

See:

https://www.johno.com/cors-handling-with-netlify-functions

Plenty of resources out there with examples.

5

I added the preflight check:
if (event.httpMethod === ‘OPTIONS’) {
return {
statusCode: 200,
headers: CORS_HEADERS,
}
}
at the beginning of my function, and it made no difference, I still get the same error. I’ve tried many other tactics from many other resources as well to no avail.

6

@aarondwoods If it doesn’t work, then it’s not correct, just double check everything, google around for a few more resources etc.

I don’t use it myself, so cannot give you implementation specifics.