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.
Related
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.
Having some trouble understanding where to put html files and redirect. I'm very new to react and node js and just getting started with my first project. I have authentication working well, where my App.js in my client side has some inputs and it sends that info to node js server, which authenticates.
After authentication, should I send back a response to react so react can load a new web page? Or do I simply redirect to an html file on the server side? (res.sendFile...)?
Thanks
From my personal experience. You only use nodejs actually expressjs to read database, design api and expose api endpoint to the front end. On react part, you could call the api and also setup the proxy in the package.json file. Good example to follow:https://create-react-app.dev/docs/proxying-api-requests-in-development/
You could use it as reference.
I have a question and got confused with the articles I found on the internet.
I have a react App which deploys on the development server. I want to create an admin part, where the administrator will be able to push content into the database. React App will get content from a Database and render it.
Also after the development, I want to upload this on hosting so users from the internet can have access to it and use it. I understand how the server works with post\get requests from glitch projects.
Writing on React.Js, server with express.js
So can someone explain to me the following:
how the server sends React app? Should I send simple index.html with #root div and the whole website will work?
I am a bit confused about how hand-made server and API are different from hostings? How to connect then backend with a hosting?
IN VSCode is it possible to make a react App showing from the server of Node.js? - On glitch I can
sendfile index.html with simple request and I see the landing page.
So theoretically I should have a possibility to send static file through a server of Node.js/Express.js?
Can you explain these questions to me, please or provide some resources where it explained? Currently I'm watching Youtube and Google but how to connect it with my project I do not get a clear idea.
Pretty much. If you use create-react-app to build your React frontend, the build result folder will contain all the static files required (HTML, CSS, JS, images, fonts...). You can then either have your Express app serve it as static data.
"Hosting" is a nebulous term... No, you can't upload a Express/Node.js app to some PHP web hotel and expect it to work. You'll need an application-hosting centered provider/PaaS such as Heroku.
When developing a react + backend app locally, you'd have your backend server running, and the frontend dev server up to serve your frontend and configured to proxy all API requests to the backend server (like this, via the Create-React-App docs).
I know it's kind of awkward question, but is it possible to start up an express server on the browser (basically run an express server on client's side i.e. when user clicks on a button) of an Angular app?
The server on client's side would be very simple, basically define a route that would be later used by the app. (like a local call - 127.0.0.1/myRoute)
Has anyone ever seen anything like that?
Thanks.
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...