When I set this up on my localhost, I am able to pull data from my database by setting up a GET request with the sub page “/data” that doesn’t really exist. And similarly, when I want to accept submissions I send a POST request to a sub page “/email” which also doesn’t exist. This isn’t a problem when I am on localhost, but when I change it to match with the deployed website it gives me a 404 error on the Get and Post requests I assume because the page doesn’t exist. Is there a good way to fix this without adding in new pages since I don’t actually want to leave the page? I added a netlify.toml file to redirect /data back to the home page, but it ended up just getting the html from index.html.
The database is on an Ubuntu server I set up. The connection works from both my laptop and my desktop so there’s no problem with multiple connections that way. I tried adjusting the get and post requests so that they stay on the same page, but my get request just returns the index.html page and turns my home page into a blank white page. I console logged what it gives back and this is what I get
<!doctype html>React AppYou need to enable JavaScript to run this app.
I also changed the submission page to be like this
fetch(‘One More Once’,{
method: ‘POST’,
headers: { “Content-Type”: “application/json”},
body: JSON.stringify(data)
}).then(()=>{
alert(‘Successful Submission’)
console.log(“Email sent”)
})
and I still get a 404 error even though this is the page it is currently on.
From a tiny bit more testing it seems very odd. When I go to the home page and click on the submit VODs navigation it lets me go to the submission page. But if I copy and paste the exact URL back into the search bar it gives a 404 error saying the page doesn’t exist. I am using React Router to handle my routing so I don’t see why there should be an error like that.
This is because you are running a React SPA. The solution to this issue is outlined in the following support guide as well as in this Netlify documentation and this Create React App documentation.
With the database
I suspect you have a proxy set up (e.g. in the package.json) which allows this to work. You have two choices on Netlify:
call the server URL directly from within the app; or
create a proxy to the database server to use relative paths (e.g. /data.)
There may be another issue that I hadn’t thought about. When I run my site on my localhost, I run npm run start to boot up the javascript and src files for the site and npm run devStart to boot the connection to the server. I tried looking up a way to run commands after the site is deployed, but I couldn’t find anything. Maybe that was the issue all along?
I’m not sure I completely understand. I have a server.js file that basically just connects to my server/database, but I use node/nodemon to run it. So I can’t do that through netlify, but I can run it through another service to keep it always up as well? And having this file/connection separate from the deployment is fine and should work?
Yes, having the frontend deployed independently and separately from the backend is perfectly fine. That part of the idea of deploying to Netlify. Handle frontend deployments with Netlify, backend with a services of your choosing.
Essentially this is what you already have as you are running two separate commands to start the frontend and backend services.
Once you’ve deployed and configured the backend, you’ll need to set up the frontend accordingly with the address of the server. You can test this locally before deploying to Netlify.
Great suggestions, @coelmay! @adamprinciotta, after you look into this further, please do come back and let us know what ultimately solved your issue! This will help future forums members.
I was able to successfully put my server.js file for my back end onto a server I own. But now I am trying to figure out how to connect the front end and back end.
This is the basic get request which seems to work since it console logs REQUEST MADE and shows me what it returned, but it’s just the index.html file transcripted into the console.
However, I’m not sure if it should still be the url or if I should be connecting it to the server directly through the IP address, or if in the server I should be storing the data on a separate page on the website. But I am not sure how to do any of this. I’ve done a little research but it doesn’t really make sense to me, or they seem to just be localhost to localhost connections which worked fine for me before.
Also which part of the to = do I change to the server address/IP. Is it completely in place of https://api.example.com/:splat or just in place of /:splat?
The api.example.com is intended as the placeholder for where the address of the backend should go. As for including the wildcard (*) and :splat, this depends on how the backend works.
If there is only one endpoint (the domain root i.e. https://api.example.com/) the * and :splat need not exist e.g.
[[redirects]]
from = "/api/"
to = "https://api.example.com/" # Change to your server address/IP
status = 200
And the URL for fetch is just url: "/api/".
If there are multiple endpoints (e.g. https://api.example.com/getUserById, and https://api.example.com/getUserFavourites) the * and :splat are important. If you called url: "/api/getUserById" without the * and :splat with the above redirect rule the fetch call would fail as only the /api/ path is proxied.
The error is still there but I think this may be a problem with the server putting the data out there. when I run the Server.js file on the server it successfully runs and connects to my SQL database.
But when I type in the url that should work directly into the search bar it says it’s not found
So the server is looking for a GET request on the /data path, but you aren’t doing that. You’ve also included the :splat in the URL which isn’t correct.
