Develop Reference

How routing in Express.js/Node.js web app?

I'm working on this web app that include several pages.
I really would know if it's better handle the router in the backend (Node.js) or in the frontend (React.js) or with both (I didn't understand in the Internet).
For example, how have I to work with the login page (that will re-direct on the user area).
Thanks

I don't know how big your project is, or its requirements, but if this is a personal project I would suggest using the React Router Library. You can make a call to your Express app from the Front, and based on the response you get back you can route the user to wherever.
In a project of mine I had an express route for login that looked for the user in a database, then checked to see if they provided the correct password. If the user provided the wrong password or if the account wasn't found I sent back an error message. If the user provided the right password I sent a success message to the front. I would listen for the response on the frontend, if I received a success message, I would call useNavigate from React Router to route the user to the user page.
Here is the documentation for React Router Dom: https://www.npmjs.com/package/react-router-dom
If this is a bigger project and you need to think about accessibility and search engine optimization, you would have to find a way to render React from the backend. Its called server side rendering, which I'm not familiar with.
Hope this helps a little.

Is it Possible to serve a Client Side React Component / Application in a server side Express Route?

I have an Node/Express backend that is using Pug.js to render a number of server side routes. The application is static at the moment and is a simple site.
I created an interactive "builder" component in React.js using CRA. It allows a site visitor to configure product interactively.
The end goal is this:
when a site visitor hits the builder nav link, they would be taken to a page that would render my serverside templates to keep the look and feel of the site. However, In the content block I would want to render the react application that I have created.
I have looking for days and maybe am just not understanding what I am seeing.I am not sure if server side rendering, or proxying would make this work? i have tried the CRA proxy and have not gotten the result.
Folder structure image:
If anyone needs more info or can point out a few resources it would be very helpful.
I am still learning as well so I apologize if this breaks any SO guidelines.
Thank you in advance

So, your CRA looks something like
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
     <h1>Hello, world!</h1>,
     document.getElementById('app')
);
So to expose this component, you should have a pug template that is like all your others, except also contains somewhere in it
<div id="app"></div>
<script src="bundle.js"></script>
Where the src of the script is the relative path to your built component. Then just serve that template with express when they hit that route.

How front-end router works in a MVC Framework?

I cannot fully understand how a single page application can do routing by itself.
Maybe you can see the example here.
If you click on those links (below the visited, purple color link), the url and the page will be change without reloading. But how to achieve this if the front-end is deployed in a MVC framework?
Isn't that if you visit a url on MVC, it'll will look for the corresponding controller for that url? If that happen, of course the page will be reloaded isn't it? If it using HTML5 History, how can when I revisit the url, the page display the changed state?
Can someone explain how to achieve this with React app that deployed on a MVC framework like Rails? Thank you

I'm more familiar with Angular, but all the Single Page Applications (SPA) are based on the the same model. You have three layers:
the Rails MVC routing system with its routes and controllers
the React SPA routing system (that also has its own
routes and controller system)
the React event handling system that, as a javascript framework, among other things, catches mouse clicks in the web application
In your reactrails example page, the root of your web site (/) is handled by Rails, and every other pages (/*) are intercepted and handled by the react routing system.
So basically, if you have a rails ApplicationController you could have a config/routes.rb like this:
# routes.rb
root 'application#main'
# catch every routes and serve only the Application.main action
match '*path', to: 'application#main'
# application_controller.rb
class ApplicationController
def main
end
end
This will redirect every urls coming to Rails (/this/is/an/example, /that/one/is/not/an/example...) to the React router. (Note that you could also have other routes such as /api/gimme/my/damn/json/data that will resolve to other controllers and send back JSON, xml, html or any kind of data)
Then, in your html page, React intercepts every clicks, on links or buttons, and compare them to its own routes.
If a route match, it will display the correct page via its templating system, (usually loading it by Ajax or read it from its cache), and you won't see any page reload. You could say that react act has a client-side server.
If you call a url such as /i/like/flowers, the route will be first processed by rails (/*), that will send you an html file located at the / route, containing your SPA app, that will kicks in, analyse the route itself, and show you the correct content from its own templating system.
So to sum up, you have:
GET /my/super/react/url
//=> Rails serves `main.html` that includes `react-router`
Once main.html is loaded, react-router looks at its routes components and serve the right template if route exists (/my/super/react/url).
You could find more examples in the react-router documentation
This is the basic scenario, and I'm sure others will complete anything I didn't cover, and add react specific samples!

Use React and Express

I'm using Express framework on NodeJS (hosted by Heroku) to create my web site. I'm also using the React framework to create my components.
I have several HTML files with divs inside and React components which can be rendered in those divs.
When a user chooses a route (e.g. /movies) I want to be able to associate one HTML file with a component and return it back to the user. I already looked for a solution, but all of them talk about server-side rendering and sending back HTML files.
Is there another solution?

Check out react router you don't have to use server side rendering, you just need to give a react component that you want to return when a route is requested.

The standard way to do this now is to build a Single-Page applications and redirect all requests to /, and the front end routing will handle the required page to load.

using backbone router with Aura

Trying to build a web client application with backbone aura. Struggling to add router to the application. did anyone try adding router to backbone aura yet?

I don't know about Backbone router, but I built a simple router that listens to every message each component send and update the URL, and listens for every change in URL and sends specific messages. As an extension I couldn't make it work (because it would render before the components that needed to listen for its messages -- at least the first based on the initial URL), so I built it as a component.