I have created a three page react application using react-router-dom that also uses a proxy to make calls to the node API on my web server. When running the application in development everything runs as expected. My issues are after building it no longer renders anything on the screen. The weird thing is that I'm not receiving any errors in the console but through debugging I've noticed it does load the page until I call my API and then it goes blank. Does anyone know why this may be affecting the production build but not the development build? I've added:
"homepage": "."
to my package.json as it worked for someone else who asked the same question but it has made no difference for me. I've linked the code if anyone wants to take a look. Any insight would be greatly appreciated. Link to code
For anyone else who may stumble across this. It was due to issues with the proxy in the package.json. After removing the proxy and calling the API manually, there were no longer any issues.
Related
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:
https://dev.to/nikita_guliaev/deploying-create-react-app-with-json-server-as-backend-to-github-3pp9
https://github.com/YoussefZidan/fake-server
https://www.youtube.com/watch?v=5cbFLDe4OAA
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.
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")
I have hosted my react app in https://dev.newrohanamotors.lk/frontend/ here.
But it doesn't load the login page.
But It will change the title of the page.
Working well in local.
Can you please help me ?
Thank you
Try building as a production build and try again, Sometimes I also face a similar kinda situation, It's just that you have to reinstall all the supporting packages and build an optimized build and they try deploying. Coz, Its subjective reasons may differ from case to case!
I finished my first fullstack (React/Go) app and everything works locally but I'm having trouble with the next steps especially since I'm new to this. I read Heroku was a good choice and I was able to successfully deploy my Go code there and test it via Postman, however I'm having trouble getting my React code introduced so when I visit the Heroku app it displays the React UI. Is this an option on Heroku? Both my frontend and backend code are in the same Github repo if that makes any difference. Any advice how to both deployed together?
I'm pretty sure I have to use the build version of my React code but not sure how to go from there. Go can also be compiled into an executable. Could I theoretically do everything using just this executable and the React build project? Thanks for your help!
I'd recommend trying https://firebase.google.com - you can deploy apps for free, you'll get a free '.web.app' host, and you have some DB solutions also available for free, if you ever need them. The easiest way would - to compile everything into a build folder or something and simply upload it there. You can later buy a domain name and link it, but for the start is should be sufficient as it is.
I have finally decided to start a full stack project, a note taking app similar to Google Keep.
I made an REST API using this tutorial:
Build a Node.js API in 30 Minutes or Less
Only problem is I don't know how to use it, outside of Postman.
I am fairly proficient at the front end, but the back end is now what I need to focus on learning how to use. I understand what is going on with CRUD and the general idea of what a REST API is (not 100% sure about this just yet), but hooking it into the front end is still eluding me.
I have built other apps before using Angular, just not with my own API. So, I am sort of treading water here.
So you don't need to go through the tutorial.
Backbone of the API that the Tut uses these:
MongoDB (MongoClient, hooks into an mLab database)
Express
bodyParser
nodemon (only used for restarting the server on saves)
In order to get the server to start, I have to run "npm run dev" or "npm start" from a Terminal, both achieve the same thing and open port 8000. Once it is running, I can use Postman. Everything works just fine on the backend and things save properly to my database.
The tutorial, unfortunately doesn't explain how to hook things up to the front end. I was told that I needed to use ajax calls to get it to work. I can do that, I've done it before with both Angular 1.x and jQuery. I just don't quite know how to set up the front end.
The big thing, is I want it to be all in the same repo, rather than in separate repos. Any help would be appreciated!
(Github repo will be here soon)
Was pointed to a tutorial that helps with exactly this!
Creating a Single Page Angular App with Node and Angular
I just tried up deploy my React app for the very first time and spend 6 hours on it. Very discouraged, as I have been trying to deploy a simple one page react app and I couldn't do it.
First I tried to deploy to heroku, then to gh-pages
I think I got some hints as to the culprit from chrome dev tools. When I look at the sources tab, it looks like the browser is expecting what I put in the browser URL bar to be the actual names of the files in my file tree.
For instance, I was using react-router, and I had a route called /users/:id/dashboard. So let's say the full app was http://myapp.com/users/:id/dashboard.
The Error I kept getting, probably over 500 times, was error 404 meaning not found. This means that the browser was looking for a file called myapp/users... when in fact, users was just simply a route. In other words the only entry point was supposed to be http://myapp.com/.... and anything after that should have been manipulated by the script file.
Anyways... this was a terribly frustrating experience to say the least. My app works perfectly in development, but in production mode error 404 is my enemy. I could really use some good resources for increasing my skills in this arena. Something that has to do with how a server serves up files, how the browser interacts with assuming what files will be served based on the URL, etc.
I appreciate it so much. Thanks for the help.