Deploy React app with JSON-server as backend-CodePudding

I made a simple CRUD application that is supposed to be an appointment manager based on Traversy's Task Manager (found here: https://www.youtube.com/watch?v=w7ejDZ8SWv8), and now I'm trying to publish it.

I have found a number of guides but none have helped me. I'll list them below:

The one that I believe came the closest to help me do what I want is the first one listed. If I follow it to the letter, all I get is the background but nothing else. I experimented trying to run it on my pc, changing the fetch requests from localhost to https://my-json-server.typicode.com/jmiguelcastellanosj/ap-m/appointments but it didn't work. I removed the homepage property from the package.json file and it worked on my computer (changes didn't persist, but from my understanding that's expected from the service provided by typicode), tried deploying it but it didn't even load the background.

I could describe my other attempts with the other two guides, but other than finding out that heroku exists, I don't think I got much useful learning from them.

Ideally, I would like the changes to persist after reloading the application, but right now that seems like a pipedream considering it doesn't even work once deployed.

I have a feeling that the reason for this app not working is related to the fetch requests (found in Dashboard.js, AddAppointmentForm.js, EditAppointment.js, Appointment.js), but I really don't know.

This is my first time trying to deploy anything, so I have no idea what it is that I'm missing or doing wrong, and having spent days trying and failing at this, I'm at a complete loss on what to do. Help would be greatly appreciated. Thank you.

My repo can be found here: https://github.com/jmiguelcastellanosj/ap-m

Right now it should be able to work locally with json-server as backend.

CodePudding user response：

Before building set your "homepage" in package.json to "https://jmiguelcastellanosj.github.io/ap-m", this will let github pages load your files properly. Also if your routing doesn't work properly, in each of your routes add "/ap-m" in front of your path (So path='/' becomes path="/ap-m")