in general, the idea is this: this is a project for an internship in a company. There is a database for 10,000 records, it should load in about 10 seconds. Then a list of entries from mongodb should have appeared. There they can be changed and deleted. The routing itself does not work, I cannot follow the links and there is no download from the database. everywhere it gives a 404 error, so, apparently, I did not correctly specify the URL of my server to heroku. but I don't understand where .-.
So far checking out your code I noticed a couple things. To be clear Heroku is where you would've deployed your server. So in your frontend is where any axios request you're making should go to your Heroku URL which I gather is https://medvedevs-pdf-app.herokuapp.com.
I'm just going to try and list out some of the potential issues / confusions could be.
In App.js you do not have a component specified for your root url. <Route path='/' /> should have a component property attached. Not sure if you wanted something for that Route, if not, you could remove that.
Looking at your Network request it's trying to request your Netlify URL for the /files/sync path and that is a path you have defined in your backend/server.js not your frontend. I'm not exactly sure why that is honestly looking at your code nut it's trying to request https://5f85f700cdda755ccf152d30--medvedev-pdf.netlify.app/files/sync instead of https://medvedevs-pdf-app.herokuapp.com/files/sync.
One big thing in server.js is you need to remove the base URL from all of your routes. https://medvedevs-pdf-app.herokuapp.com needs to be deleted. Your server code lives at that url so you don't have to specify that part. Only specify the rest of the path - so your paths should just be /, /files/:id, /files/sync, /files/:id/update, and so on. Otherwise your request is going to https://medvedevs-pdf-app.herokuapp.com/https://medvedevs-pdf-app.herokuapp.com/files/sync which your server will not pickup.
In your frontend inside of File.jsx in your methods CreateFile and deleteFile you history.push() to your server (Heroku) URL. With react-router's history you should be pushing to valid client-side routes or essentially different URLs you'd see in the browser address bar.
In File.jsx, the createAndDownloadPdf method, you history.push('/files') and also your Delete button at the bottom of the file Links to={'/files'}. You don't have a Route defined in App.js nor any conditional renders dependent on the URL path being /files.
I'm not sure if this was working prior to deployment to Heroku/Netlify but it seems there are a few places where you may have gotten mixed up on making axios requests to your server for a task to be performed and defining your client-side routes to display certain data.
First thing I would try if it was working prior is to absolutely change the base URLs in your server.js, that is definitely one part of the bigger issue.
I am really very grateful to you for the time spent on "consulting" me :) many thanks for the detailed description of the problems in my code, I will fix them. yes, on localhost this service turned out to be completely working, but I will definitely try to make it work on the hosting
Absolutely, no problem. A second set of eyes can be a life-saver sometimes! Throw an update in here if it gets working or not and I can try to dig a little deeper. Good luck!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Eugene, can you briefly run me through what the process is for using your app and where it fails?
I see it’s something to create a pdf after entering some info but at what point does it not work?
in general, the idea is this: this is a project for an internship in a company. There is a database for 10,000 records, it should load in about 10 seconds. Then a list of entries from mongodb should have appeared. There they can be changed and deleted. The routing itself does not work, I cannot follow the links and there is no download from the database. everywhere it gives a 404 error, so, apparently, I did not correctly specify the URL of my server to heroku. but I don't understand where .-.
I’m looking through the code now to maybe find some potential issues. One thing popped in my mind though.
Did you specify in your MongoDB cluster to allow Network Access from either all IP addresses or your Heroku IP address? (Step 7 in the post)
So far checking out your code I noticed a couple things. To be clear Heroku is where you would've deployed your server. So in your
frontendis where any axios request you're making should go to your Heroku URL which I gather ishttps://medvedevs-pdf-app.herokuapp.com.I'm just going to try and list out some of the potential issues / confusions could be.
In
App.jsyou do not have a component specified for your root url.<Route path='/' />should have a component property attached. Not sure if you wanted something for that Route, if not, you could remove that.Looking at your Network request it's trying to request your Netlify URL for the
/files/syncpath and that is a path you have defined in yourbackend/server.jsnot yourfrontend. I'm not exactly sure why that is honestly looking at your code nut it's trying to requesthttps://5f85f700cdda755ccf152d30--medvedev-pdf.netlify.app/files/syncinstead ofhttps://medvedevs-pdf-app.herokuapp.com/files/sync.One big thing in
server.jsis you need to remove the base URL from all of your routes.https://medvedevs-pdf-app.herokuapp.comneeds to be deleted. Your server code lives at that url so you don't have to specify that part. Only specify the rest of the path - so your paths should just be/,/files/:id,/files/sync,/files/:id/update, and so on. Otherwise your request is going tohttps://medvedevs-pdf-app.herokuapp.com/https://medvedevs-pdf-app.herokuapp.com/files/syncwhich your server will not pickup.In your
frontendinside ofFile.jsxin your methodsCreateFileanddeleteFileyouhistory.push()to your server (Heroku) URL. With react-router'shistoryyou should be pushing to valid client-side routes or essentially different URLs you'd see in the browser address bar.In
File.jsx, thecreateAndDownloadPdfmethod, youhistory.push('/files')and also your Delete button at the bottom of the file Linksto={'/files'}. You don't have a Route defined inApp.jsnor any conditional renders dependent on the URL path being/files.I'm not sure if this was working prior to deployment to Heroku/Netlify but it seems there are a few places where you may have gotten mixed up on making
axiosrequests to your server for a task to be performed and defining yourclient-sideroutes to display certain data.First thing I would try if it was working prior is to absolutely change the base URLs in your
server.js, that is definitely one part of the bigger issue.I am really very grateful to you for the time spent on "consulting" me :) many thanks for the detailed description of the problems in my code, I will fix them. yes, on localhost this service turned out to be completely working, but I will definitely try to make it work on the hosting
Absolutely, no problem. A second set of eyes can be a life-saver sometimes! Throw an update in here if it gets working or not and I can try to dig a little deeper. Good luck!