Whats the best way to integrate 2 different react projects? - node.js

I Have a huge react project which requires a chat app.
I've now already made this chat app using react-chat-engine.
Now I want to integrate this chat app with the Main app. I can put it in the same app and route to it sure.. but...
I would like to use the same chat app for another application which will use similar database.
Other than iFrame and <a href.. is there any other way? Which is hopefully quicker to load

I think that you can use React.DOM.render(<App>, document.getElementById("root")) on different div then #root and you should have two react apps in one HTML

Related

React and Express Routing and Views

I'm a newbie in web development. I built a project before using Node, Express, and EJS (as my frontend) and now, I am trying to make another one using React as my frontend.
I watched and studied a lot of React + Express tutorial videos in Youtube but I think every video only shows a one-page site.
My question is how do I handle the routing of Express+React? Where should I put the routes and render multiple pages or views? Should I put it in the app.js under the Node folder? Or should I create another folder under the React app consisting of the js files for different views?
Thank you. I would gladly to answer questions if my post lacks information.
There's an interesting hand to it.
App
__|__
| |
Frontend Backend -->Database(MongoDB)
I think this scanty tree should do justice to it.
I'd suggest you use MERN
MongoDB
ExpressJs
ReactJs
Nodejs
Your apps need to be on different servers. This method is effective and secure.
Since you already know React, Express, Nodejs... You can check out this link (by cleverprogrammer)to see some MERN projects and how each part of the app communicates with one another seamlessly.
https://youtu.be/ktjafK4SgWM

is react supposed to be used on top of handlebars with node.js?

I want to use react on my node.js website. Im using express and handlebars with this website. Is react supposed to be used on top of all that? Or should i not use handlebars or express with react?
Also what is your opinion on node.js? Is it a declining technology? Is there something else that is better for me to use?
React is a view library. Is mean to be used to build your entire ui.
Then you have two options you can use it to build a SPA - single page application - and consume data through network request to your server or render multiple pages each of those will be a react app.
Node + express are backend tech that can help you to build the server side of a web app here you can create some api endpoints to return data to the server and comunĂ­cate with the database.
Node is a very good choice as is still and will be used for long time and many companies.

Using Nodejs Along Side Firebase

I am about to start developing my web application in Firebase. Problem is, currently I have 100s of questions running through my head, and nothing I can find online specifically answers such.
Now from what I understand you can ONLY host assets on Firebase hosting (HTML, CSS, JS), and if you have a backend (such as Node) you will have to use a separate hosting service (like Heroku).
Firebase hosting implies that everything can be done from the browser, but I am not sure how I would get around using a backend.
For instance, if the user enters the url http://___.com/login I would route that in Express to login.html. Also if a user types in /index or /home or even nothing, it would take them to index.html. How would I go about doing this without a backend?
Another big question I have is templating. On Node there are many templating engines, is there such a thing though when just using the frontend?
Would there be a way to get around those two issues above without using a backend? I can see some benefits when using a backend such as server side rendering, and using third-party services such as Sendgrid. But what else would I get out of using a backend such as Node?
I guess I am just a bit confused on how a web application could be done without a backend (that you can access and control). I do not see how templating, routing, and many other things can be controlled by just the browser, and hosted within Firebase.
I plan on using Node (unless all of this is possible without a backend), and I am intending on using React and Redux as well. Can Firebase, Node, React and Redux all be used together?
I know there are a ton of questions above, but I just can not wrap my head around it all. I put all of my main question in bold, thank you!
Firebase Hosting allows you to do single-page app style routing, you'd just add this to your firebase.json:
{
"hosting": {
"rewrites": [{"source": "**", "destination": "/index.html"}]
}
}
As for templating, you'd want to look into frameworks such as React, Angular, Ember, Polymer, etc. to do dynamic content generation client-side instead of relying on server-side templates.
Firebase offers tools that can help you with the most common things you'll need when building an app (auth, database, file uploads, hosting). For these, you won't need a server at all. If and when your app needs additional custom back-end work, you can always deploy separate services that can be called by the client or even just listen to the database and trigger events directly.
And yes, you can definitely use React, Redux, and Firebase together. Hope that helps!

Is this a good way to layout a Web app with a Node backend and a React frontend?

My general idea was that I was going to make a RESTful backend and then in my frontend request and render data by backend spits out. Is this generally how to layout a Node and React Web app? I'm new to front ends, any help is appreciated!
Yes this is how your app should be structured. The front end should make the API calls to your node backend and will just display the data to the user. This allows your front end to be very dynamic. If you ever want to expand your application later it will be completely independent of your backend. If you ever plan to expand to different platforms (mobile,etc) you will then be able to build those out as separate "front ends" to interact with the API as well.

chargin partial web page with node express and EJS

I need help to charge my web page partialy, for example I want to listen music in a player while I am changing betwen different content. For my project is necesary to do this with node Expres and EJS but at the moment I can not find any module or solution for this. Any advice?
Thanks.
Express is a server side technology. As far as I understand what you want to achieve is single page web application. Try using client side Single page web application technologies like Angular or Backbone etc.

Resources