React Componets Not Displaying On Server - reactjs

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!

Related

Is it safe and optimized to use static pre-rendered react app in production

I know you may find this question idea based, but as I'm newbie to react, I haven't had other places to ask.
I have created a single page react app using create-react-app and exported production version into build directory using the command npm run build.
Due to SEO friendly problems that react apps have, I decided to go with react-snapshot and react-snap but the first one is too old and deprecated and the second one has too many issues in its GitHub repo.
I should mention that I know about NextJs, Gatsby, Cloud pre-rendering and other ways. But I want to deploy my app to a serverless cloud like Vercel.
I wonder what happens if I render the production version in my browser (Lets say Chrome) and export rendered html, js and css into a single static HTML file? Remember that my app is made of several components, but the URL won't change because the whole app is in a single path/route.
I guess there would be some problems in different browsers!
I have found that it is possible to host a NextJs application on vercel. Besides, I went for vps.
Anyway, for future readers, I guess the best decision in my case was NextJs, which is very fast and light in production.
Note: If you find this Q&A useless, just let me know in the comments so I'll delete it.

Issue rendering ReactJS production build

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.

Deploy React app with JSON-server as backend

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")

Advice on how/where to deploy a React/Golang app?

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.

Anyone able to get lightbox2 working in a react site?

I am able to get it working on my Gatsby site when using gatsby develop locally and it works incredibly! But sadly it always causes my build to fail when trying to deploy to Netlify. I could really use some help if anyone has any experience getting non-react packages to work in a react environment. Or if anyone has recommendations of alternative lightbox packages that were made to work with react. Either way, I would greatly appreciate it!
Thanks,
Chris

Resources