My Angular application overriding node express route when triggered from browser. Its working fine when i tried same node route from postman.
When i hit my expressjs public route in browser then its redirecting me to default page of angular app.
Example,
if i hit below url in browser
https://example.com/mj/api/get-details
Its redirect me to default angular page instead of hitting nodejs route.
angular default page example,
https://example.com/#/home
All my exressjs routes working properly from postman. But its seems angular overriding express route.
How do i create express public route & access it from browser.
Note: my angular & node express(microservice) working different repositories.
How I can use React-Router to point directly to a route defined with Express on the backend instead of rendering a component? I want to return valid JSON with no HTML included in the response.
React-Router only handles routing on the React frontend.
There is no way for React-Router to point to an Express Route on the back end.
A React component would have to use that API endpoint.
Why not just hit the endpoint manually.
How does the react client connect to the server via express? Many tutorials talk about Superagent and axios which is adding to my confusion. Are there any resources on server side routing in the context of react? thank you
In MERN stack, you do not necessarily have to think of the entire stack as a single entity. Mongo, ReactJS and NodeJS server can all work independently. And let us for easiness of understanding sake say all of them are on separate servers. That is we can have Mongo on one server, ReactJS on another server and NodeJS with express on a third server, then also it will be a MERN stack app.
How a MERN app work is as follows
For example, let us have an app that displays the details of all the students in a class. First, in the React app let us say you select a class, and then the React front-end will send a query to the nodejs server. The query will contain the particular class name. Now nodejs will send a query to the mongo db asking for the details of the students of that class which it will send back to the node server. The node server will then send the details to the front end and it will update it.
If you ask for connection as such, there can be no connection at all except for querying for data. Instead of using the reactjs front end you can use some other frontend and it will give you the same details. React, Mongo and Node, all are capable of working on their own in their respective fields.
Axios is a promise based HTTP client for the browser and node.js.
They are completely independent. Whether using axios, the native Javascript fetch, jQuery AJAX, etc...each of them runs in the browser and makes a GET/POST request to nodejs. You will have defined corresponding GET/POST routes within nodejs to respond to these requests and return JSON response data for them to consume.
I would start by forgetting about react altogether. Instead build an express API with various GET/POST routes that return JSON responses. Test with a simple client like postman. Once you have a handle on that, then start with a front-end Javascript framework to consume these services.
Here is a cut of my express+react api:
var express = require('express');
var router = express.Router();
router.get('/', function (req, res) {
res.render('index', {myjson: "myValue"});
})
module.exports = router;
Basically I am sending the json string to index.jsx, where the frontend is rendered.
Also I've set in express as:
app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());
So the express server knows where React is.
Checkout the npm package Express-react-engine.
All the elements of the stack can be used independently, React , Node.Js, and MongoDB.
They can be installed in different servers and the communication is by using Fetch, Axios or any other tool.
I'm building a node + react app that uses passport's facebook authentication. Getting this authentication to work involves hitting an express route '/auth/facebook'. Unfortunately as soon as the react app loads up react router 4 doesn't allow links to directly hit the express server and instead searches for a react route matching 'auth/facebook'. In short how do I link to a route within my application but outside of the react app when using react router 4?
React Router is only for client side routing. Use fetch API or a similar library for that.
I'll state one way of solving your problem (using fetch and without react router).
Remove the href from the <a> tag
Add an event listener for the click event, <a onClick={makeCall}>
Then in the makeCall function, you can call the backend using the fetch API(or axios or whatever),
makeCall() {
fetch('/auth/facebook', options)
.then((res) => {
// Something
})
.catch((err) => {
// handle error
});
}
My situation:
I'm using Express and passport.js as my backend API server and React js as my front-end.
What I'm currently facing is that I keep getting index.html file when I request my passport auth by "/api/auth/*". However, it works as I expected when I'm making a request from my front-end via proxy.
So I tried using Regex to exclude "/api/*" route from using static build files.
app.use('/api', api)
app.use(/^\/(?!api).*/, express.static(path.join(__dirname, '/../build')))
app.get(/^\/(?!api).*/, (req, res) => {
res.sendFile(path.join(__dirname, '/../build/index.html'))
})
But not like my expectation, I just got Unexpected token < warning ...
How can I get my get "/api" route to work also while using React js build files?
Or should I just keep making a proxy request from React js dev server?
I want to understand how Express and React js app deployed in some server work together.