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.
Related
I am learning Node.js. This is a very newbie question.
I want to fetch some data from my database via node.js server. I am using Axios and so my line of code looks like this. But it is just an ordinary fetch request.
const response = api.get("/");
But I do not retrieve the data with this. I retrieve a completely new page that looks like this.
It is an empty page with the data that I want to retrieve. But I do not need a new page. I need the data only. I want to store it in the RESPONSE variable. How can I do that?
Can anyone point me in the right direction? Perhaps I should watch a video on how to build a REST API?
This is not a page. It is your browser's way of rendering the data of your response. You can use a JSON viewer plugin for your browser if you expect to see pretier data or use an HTTP client like Postman to be sure that your API returns what you expect.
So this was the problem.
My React was on port 3000. My Node was also on port 3000. When I started my React App, everything was fine and my browser displayed all pages perfectly well. But once I started my Node, it rendered data into the browser.
Just now I changed the Node port to 4000 and the problem is gone.
It seems like React and Node were competing here who is going to render the content into my browser. Node was prefered by my chrome browsers. Perhaps because I started it later.
I have created my fullstack (Node.js and React.js) blog app and now when I want to deploy my frontend and of course backend, I have noticed, that I don't know how to do it in a proper way.
My application works fine when I use localhost but if I deploy it, my links won't be like "localhost:8080/api/blablabla", but for example some heroku slug (url) and my Node.js routes.
In my Node.js it looks like this:
And here below my app.js code:
And from React.js (frontend side) it looks like this:
So, the question is what I need to add. I suppose, that on React (frontend) must me something like env. variables with backend link? And before it, better to add backend to know what the slug (url) would be, because it is random. But I dont know do I need to add something on backend or not.
If I wrote something wrong, I will be really appreciate if you correct me:)
ThanK you in advance
In the last React.js image you have shared, I can see you are using axios to send the GET request. However, you are providing a url which is a localhost one. So I assume you are trying to make a request to the backend that you have hosted on Heroku, but instead, the url is pointing to your local environment. What I would recommend doing is changing the http://localhost:5000 part to the Heroku app's url.
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 am using Blueprints to create two separate modules, one for api and one for website. My APIs have a route prefix of api. Now, I am having a route in my website called easy and it will be fetching a JSON from a route in api called easy and it's route is /api/easy.
So, how can i call /api/easy from /easy.
I have tried using requests to call http:localhost:5000/api/easy and it works fine in development server but when I am deploying it on Nginx server, it fails probably because I am exposing port 80 there.
When I deploy my webapp on nginx, it show up perfectly just that route /easy throws Internal Server Error.
Okay so what worked for me is I simply ended up calling the api function from the frontend rather than doing the POST requests. Obviously, it makes no sense creating backend routes for flask seperately when you are using Flask too in frontend. Simply, a seperate utility function would be fine.
Edit: I can share either of my package.json files if that helps.
Edit2: I dont know if this is a common question or a dumb question. I know it doesn't fit stackoverflow, but I've been struggling with this heroku deploy for the better part of a day already.
I recently followed the following tutorial on posting a react / express app to heroku, and while I think I have been successful, I am confused as to how I can access my API. For reference, a couple of relevant steps in the tutorial are:
Create Node / Express API, push to heroku, and check that it works (by going to the api endpoints in the URL and literally seeing the data), and add "start": "node index.js" to the Node package.json file.
Create React App inside of the root directory of the Node API, add to the react app's package.json this: "proxy": "http://localhost:5000" (I figure so that the api and app can communicate.
I've followed all of these steps, and my React App is working on heroku. The app is displaying, and since the app relies on the Node API to get data to display, clearly the Express/Node API is working.
However, I would like to Actually See the node API endpoints, by going to the endpoint in my browser, and I am not able to do that in heroku currently. All of the React Routes work, however when I visit the api routes my screen is blank. Any thoughts on how i can visit my API endpoints, that are on heroku, in the browser?
For example of my problem:
Localhost Node
when I launch (node index.js) on localhost, I can access my node API endpoints at http://localhost:8080/api/path/to/endpoint
http://localhost:8080/ is root of my node API
Localhost React
when I launch (npm start) on localhost, I can access my react app root at http://localhost:3000/
another one of my react router routes is http://localhost:3000/myreactpage/, which leads to a page of my react app.
Heroku
lets say my heroku app name is https://dusty-manager-23562.herokuapp.com/
https://dusty-manager-23562.herokuapp.com/ leads to the root of my React app
https://dusty-manager-23562.herokuapp.com/myreactpage does lead to my react app page
https://dusty-manager-23562.herokuapp.com/api/path/to/endpoint does not show my data, even though i thought it would / want to see my data. This right here is my question.
So this is my problem. A long post for a simple question - why can't i visit the API endpoint of my node / express app when its pushed to heroku, when I can see the data when its at http://localhost:8080/api/path/to/endpoint. The react app is working, so it's getting the API data correctly, but i want to be able to see the data in browser at the endpoint.
Thanks!
So there are two problems that are probably working in tandem to cause you this headache.
The first and more likely issue is that react-router is intercepting the "/api" urls and deciding prematurely that it doesn't have any components to show for those. A way to fix this is to edit the "proxy" property in your client code's package.json.
"proxy": {
"/api": {
"target": "http://localhost:5000"
}
}
(☝️ I'm assuming here that you kept the 5000 port number from the tutorial. If not change it to 8080 or whatever you used for the api port number.)
The second issue is that the service worker create-react-app adds for you is doing the same thing. It reads the path and thinks there's nothing to serve. If your '/api' route is still showing a blank page, in your browser's dev tools go to the 'Application' tab and click 'Clear site data' (assuming you're using Chrome, not sure how this is done in other browsers) then refresh.
If you don't care about having a service worker, remove the registerServiceWorker() call from your client code's index.js. If you do want the service worker, you'll need to edit the registerServiceWorker.js file to be a little more discerning in how it matches paths.
Hope that helps!
A think this is a relevant post here - Accessing internal API with React, Axios on Heroku
I am not using Axios, but i think the app.get(*) may be giving me issues.
EDIT: no this didn't help a ton actually...