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.
Related
I've got an express backend and want to send the user a react component when a specific route is requested from the server. How can I do this?
I've also got react-router setup on the frontend, but I'm unable to redirect to a react route when an express route is requested...
use axios.
let result = await axios.get("url<localhost>/route<api route of express>");
I'm trying to create a simple authentication app using React (from vite) and express. I have my node app, and my react login/signup set, but when I try to login or signup, my react app keeps requesting to itself (localhost:3000) instead of my backend (localhost:5000). I set a "proxy" in my react package.json but it doesn't change anything. I tried to set a variable with my backend link and it worked, but is it a good practice ?
For example, /new works fine with localhost (server using localhost:5000 and client 3000). However, after deployed on Heroku, by clicking the "Add new" link from the Navigation bar (with bootstrap and added as {Link} part), the page is rendered as expected, but if I refresh the page, it shows "cannot get /new" since it is trying to fetch from server (there is no such API from server).
by clicking
by refreshing
The website is deployed by running "npm run build" and building react client into the /public folder of server (Express node.js).
How should I solve this?
When you're refreshing the page the browser sends request to your heroku server to fetch that path.
While you want the browser to reload your React app route.
To fix that you'll need to:
Prepend your api endpoints definition with /api prefix, for instance /api/coaches.
Update your React app code to make api requests to updated enpoints.
Add this code to your express server after your endpoints definitions:
app.get('*', (req, res) => res.sendFile(path.resolve('build', 'index.html'));
Been watching alot of tutorials and i see that there is express routing as well as react routing.
Is the react routing for client and the node js routing for server (api?).
Wanting to know if someone could please clarify this as new to React, Node, Express.
Thanks
It is possible (and even recommended) to use both of them in combination.
TL;DR
react-router is used to navigate between multiples pages/views of your front-end app/website. Usually in a single page app (SPA), where pages/views are loaded dynamically.
express router is a way to return static content (index.html, image.png...) AND to handle API calls that are often related to database logic. Those routes are handled server-side.
Example
myapp.com/my-portfolio is a view and should be handled and rendered by react router
// this router render pages components dynamically based on the url
<Route path="/my-portfolio" component={Portfolio} />
<Route path="/page2" component={Page2} />
myapp.com/user/create or myapp.com/api/getMyJson is an api call that should be handled server-side by express router:
// app.js
// api call that return json data
// this is where I will usually return database content
app.get('/api/getMyJson', (req, res) => {
res.send('{"my_var":"value"}');
});
// api call that return the content of folder app/public where
// the index.html and static resources are usually exposed
app.use(express.static('app/public'))
Single page application workflow
The front-end (client browser) request the back-end (your server) for the application static content (myLogo.png, index.html...) usually served by express router
While the first page is loaded and the user begin to interact with the app, the front-end continues to load other pages in the background (lazy loading)
When the user navigate to another page (with react-router), the page is already loaded and the user is taken there without any further server call nor page reloading
On another hand, express router need to handle API calls like myapp.com/user/userId/get/notifications to get data that is not "static" like json data.
I'll try explain the difference through an example. Say we have a single page application built with react at www.example.com
React Routing
We hit www.example.com and the index.html is loaded from the server. Note that it has all of your react pages in your bundle.js file. You now click the about button on the navbar, this sends you to www.example.com/about. This call does not hit the server, it is handled by your react router.
Express
Much like above we hit www.example.com and get the index. This time when we hit /about we get information from the server
Take a look at this blog post:https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
I am using angularjs2 with the lite-server and nodejs with express, when i am running my express server on port 3000, and navigate to that in the browser i get the HTML on the DOM as expected, but when i would navigate to a different path eg. localhost:3000/my_route, and maybe refresh later, i receive the expected response from the server but i do not get the HTML.This is how i configure express to get the index.html in the client side
app.use(express.static(path.join(__dirname, 'client')));
I am using systemjs as module for angularjs2, can you guys please assist me with the appropriate setup, for nodejs/expressjs and angularjs2.
Thanks.