I am developing a React app using freetogame API and it works perfectly on localhost, but I deployed it on Netlify and it's not working because it's making the API call to a different adress.
Here is the API call on localhost: localhost API Call
and here is the API call on the deployed site: Deployed Site API Call
As you can see in the deployed site API call, the Request URL is completely different and there is an /undefined/ part in the API call. I don't know what's causing this problem.
Here is the Github link to the project: Project Github Link
Please help me find the solution. Thanks in advance
Edit: I did some more research and figured that the problem may be caused by the axios call. There is baseURL, headers, and params in my axios call and I didn't defined them in the Netlify deploy. Here is my axios call: Axios Call and here is my package.json file: package.json
. How can I define them in netlify?
Have you added your environment variables to Netlify?
api_key = process.env.REACT_APP_API_KEY
api_host = process.env.REACT_APP_API_HOST
api_base_url = process.env.REACT_APP_API_BASE_URL
If you don't declare the above variables in your Netlify project it won't know what values to insert, which is why they are currently undefined. Visit this link for more information: Netlify Environment Variables
I found a solution and wanted to post it here so it can help others. I tried deploying my build file to Netlify manuelly and the site is working now.
Related
My frontend is deployed on Netlify. all the get request working well but POST, PULL, DELETE request is not working.
My backend is on Heroku..
Is it CORS problem or else?
Thank you very much.
this is my console after post request
From your linked screenshot, it appears that you're connecting to your API using relative URLs, for example: /api/something. Locally, this would most likely work as you'd most likely have your backend running too.
However, on production this would not work, because browsers will resolve /api/something relative to the domain which is now on Netlify. Since Netlify doesn't have your backend app running, and there is no asset at /api/something, Netlify sends back a 404.
The solution would be to use Netlify Rewrites: https://docs.netlify.com/routing/redirects/rewrites-proxies/. You could add something like:
/api/* https://your-heroku-url.com/:splat 200!
... in a file named _redirects which should be added to the publish folder on Netlify.
This would resolve /api/something to https://your-heroku-url.com/something. You might have to change the redirects based on your configuration.
In my Vercel's app dashboard I set environment variable BACKEND_URL for Preview environment and dev branch:
However after deploying it, the variable doesn't seem to work. My site can't access the api.
I added this quick way of checking what is inside process.env.BACKEND_URL and as expected - it is empty.
<Text>Backend URL: {process.env.BACKEND_URL}</Text>
Here is the screenshot of Vercel build which shows that the newest deploy is in fact Preview and from dev branch:
What am I doing wrong?
I have the same problem in my deployed react app. When I try to call my backend using a vercel env, instead of just calling the url it appends the vercel app url to the env for no reason causing it to fail.
For example:
REACT_APP_API_UR = "https://www.example.com"
and I create a post request to my api the url it post to is:
https://yourapp.vercel.app/%22https:/www.example.com%22
TLDR: React app interfaces properly with Flask API on PythonAnywhere when hosted locally but not when a static build is hosted on Netlify. Perhaps the proxy information is missing from the build?
EDIT 1:
Here are the errors in the browser console:
I've created a Flask API that pulls machine learning models from Amazon S3 and returns predictions on data input from POST requests. I've put this API on PythonAnywhere.
I've also created a React frontend which allows me to input data, submit it, and then receive the prediction. When I host this app locally, it behaves appropriately (i.e. connecting to the Flask app on PythonAnywhere, loading the models properly, and returning the predictions).
I've tried deploying a static build of the React app on Netlify. It behaves as expected, except for anything that requires interacting with the Flask App. I have a button for testing that simply calls the Flask app in a GET request, and even this is throwing a 404 error.
I checked the error and server logs on PythonAnywhere and see nothing. The only thing I can thik of is that my proxy which lists the domain of the PythonAnywhere app in my package.json file is for some reason unincluded in the build, but I don't know why this would be the case.
Has anyone else run into a similar issue or know how I can check to see if the proxy information is included in the static build? Thanks in advance!
Thanks to #Glenn for the help.
Solution:
I realized (embarrassingly late) that the requests were not going to the right address, as can be seen in the browser console error above. I was using a proxy during development, so the netlify app was calling itself rather than the pythonanywhere API. I simply went into my react code and edited the paths to pythonanywhere. E.g.
onClick={ async () => {
const response = await fetch("/get", {...}}
became
onClick={ async () => {
const response = await fetch("https://username.pythonanywhere.com/get", {...}}
As #Glenn mentioned, there may have been a CORS issue as well, so in my flask application I utilized flask_cors. I can't say for sure that this was necessary given that I didn't test removing it after the fetch addresses had changed, but I suspect that it is necessary.
Hopefully this can help someone else
I'm using Nextjs for a front-end application and dotnet core 3.1 for the Web API. There are some pages that are static and other that are dynamic I followed the official documentation to achieve this. On development mode (local machine) everything works fine. Both static and dynamic routes are working properly and fetching data from the dontnet core Web API.
However, when publishing the Nextjs app following this steps:
yarn build
yarn export
An out folder is generated at the root of the project
The content of that folder is uploaded to the server
After, the deployed files are uploaded and when loging to the app, it redirects to the main page (until here is working OK), but as soon as I click on the reload page botton (Chrome) I am gettint the 404 error.
Looking at the console in the developer tools I got this:
I found this Stackoverflow link with same issue but there the answer is to use Express for server routing. In my case I am using dotnet core Web API for server requests. So, not sure how to do that.
Is there a way to fix this from the client side? Might be a configuration is missing?
The only thing I noticed while doing the export was a message saying: No "exportPathMap" found. Not sure if that would the the reason.
I had got similar issue in react when all of my pages after building and exporting had ".html" extensions. I solved it by the following code in next.config.js file.
next.config.js
module.exports = {
exportTrailingSlash: true,
}
Note: Do not work with the above code while in development. Use it just before building the project.
You can find the documentation link here: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash.
UPDATE
The above code was for next.js v9.3.4 which I was using at that time. For newer versions below code should be used according to docs.
next.config.js
module.exports = {
trailingSlash: true,
}
it has been fixed update your nextjs package
npm install next#latest
based on the current version of Next js you have, visit here to see if there's any breaking change before updating what you have
I had a similar issue where after deploying the out folder created by next export all URL's would redirect me to the homepage. Everything was working fine during development and all URL's were accessible with next/link but in order to access pages with a URL I had to add a .html extension at the end of the URL.
Because I needed a quick workaround I added a useEffect block in the _app.tsx file for rerouting so that upon landing on the homepage it would act as if a Link component was clicked redirecting to the entered URL.
useEffect(()=>{
router.push(window.location.href)
},[])
I have an Asp.NET WebAPI project and a ReactJS app stored under <web-root>\app.
The react app itself is expecting a parameter passed in the URL
http://web-root/app/my-super-parameter.
How do I configure the routing in the ASP.NET app itself so it ignores that app folder and calls it as it is? Right now I'm getting a 404 error when calling the URL.
When creating the ReactApp I use http://localhost:5000/my-super-parameter and it works as needed. The time came to deploy to production under the same website as the REST project itself.
What's the best way to accomplish this?
Thx