I am new to coding, completed developing sample MERN app, app is up and running on Heroku, but on first load only my data is rendered but the template is not rendered.
In my home page instead of JSX it only shows JSON data from backend, but when I manually change the URL to other pages it renders fine.
I already referred to Heroku only displaying backend of MERN app. How can I fix this? but none of the answer seems to be working.
Can anyone help me to resolve the issue?
Related
I am working on a personal project for my portfolio and I'm completely stuck.
I have an Angular 14 app I've been working on. The stack is PEAN. I currently have a live version of it hosted on Heroku. The issue I'm running into is that in my local development version of the app, everything works as intended, however on the live version on Heroku, If I refresh the page using f5 while on the main backlog page, it does not refresh, and instead shows a blank page with "[ ]" at the top of the page. Every other part of the app functions fine, and it does not fully crash when I run into this issue. If I type a different URL in and go to that page, it works again. If after doing so, I click a link that loads the crashed component, it will reload just fine. It appears that the component only breaks if I refresh the component with f5 (or clicking the refresh button on chrome).
I've been working on this for a long time and I think I've narrowed it down a bit. So far I've:
confirmed that my express server is serving my static HTML files from their folder correctly
added a catch all code block at the bottom of my express file to redirect to index.html
made sure that Heroku was actually executing my server.js file
removed potential offending portions of code, like auth/error interceptors and newly added Google Sign-in
I've also:
checked with various browsers/mobile browsers
checked for console errors (there are none)
checked network tab on refresh. (just shows a 304-OK response)
checked Heroku logs. No errors there either.
The issue can not be recreated locally, and it only happens on refresh of one component, the Backlog component.
If there is any more info I can add please let me know, I'm hoping this is a regularly encountered issue. I can't seem to find anything that specifically deals with my exact issue by searching. Any help is greatly appreciated.
update
The blank page with "[ ]" appears to be my database's response when hit without a user ID to check against, and return data. I've narrowed this down to an HTTP-INTERCEPTOR that injects the user ID into the headers, which the route that would use that info for the DB wouldn't have. This makes my DB return "[]".
The only thing I don't understand is that this happens only when hosted on heroku, and not locally.
I launched my first fullstack application with Netlify and Heroku. When I test locally everything works fine but when I try the netlify I get this error in the terminal.
It should connect to Heroku, the fetch request is set up that way and I been looking online and can't seem to find any answer.
[Netlify][2]
[Front-end][3]
[Back-end][4]
P.s sorry for any odd formatting, stackoverflow insisted I format my code despite not writing any code
I am making a web application using node and react. I have deployed this app using Heroku.
At the time of development suppose I am at URL http://localhost:3000/posts. Now when I refresh the page I am redirected to the same URL.
But after I have deployed my application when I am at URL https://xyz.herokuapp.com/posts and try to refresh this page I get a window showing the following message Cannot GET /posts.
I am unable to understand this problem of my code or I missed something while deploying it. Please guide me on this problem, also let me know if more information is required.
I am working on my first full stack application and making a facebook clone till now i made a login and registration system and connected it to express and mongodb as my database, the front end for my login system is written in HTML and CSS only after this i started to work on the main page of facebook in react and made a similar ui in react now the problem is I don't have any idea of how to route it with my express where all the other routes are i mean like i have a login root , a forgot password root and so on i don't know how to show the Facebook front page when someone logs in . So please help me with this.
So you want to send the login/registration data to the backend? You can use axios (https://github.com/axios/axios). When making an API call, React will try first try and look it up in the frontend, if it cannot find anything it will pass it on. To enable the pass on you have to add this to you package.json.
"proxy": "http://localhost:5000",
Of course the 5000 is your port where the express backend is running.
I've created a simple TODO list application using MERN stack, and it works find locally. I have deployed it to Heroku and the react page loads up, but it doesn't connect to my MongoDB database.
It seems like since my axios code is set to localhost it is not getting the information from the database. I belive there is a way to set it so that instead of localhost it retrieves the correct url, but i don't know how to do that.
Thank you.
axios.get("localhost:5000/user")
You can use "/" instead of localhost:5000 axios will send request to the current base url.