How can I embed new React JS Front-end in my existing monolithic Node JS App?

shehwar 0
Viewed 25

Scenario is, I have an existing Node Js Monolithic App with simple HTML ( No Front-end Framework is used ) . Now I have created a better front-end with React JS and want to embed the React JS Build in NODE Js APP.

APP-1 : Node Js with HTML ( Monolithic )

APP-2 : React JS Frontend ( UI only, Interacting with APP-1 as its backend )

There is also an option of running these two apps on different instances on Server but that will cost alot. I want to use a single project ( instance ) with React Js embedded in it.

My approach for now which is very bad: I have added build folder in NODE JS app and created the redirect to the build folder when someone visits NodeApp.com/index

Drawback: When someone visits a route other than index i.e NodeApp.com/xyz this will take to the NodeApp old UI in HTML. I can't redirect all the routes manually as most of them are dynamic.

What's the best approach for this, where should I start?

reactjs node.js javascript
1 Answers

@shehwar it's possible to do this

  1. Write your APIs for the backend on a route eg: /api
  2. Write your react app
  3. In you app fetch data from your /api route to get data from your backend
  4. Build your react app to get the static files
  5. Add the static files your public folder on your node server
  6. And serve the index.html file on the / route
  7. In a case that you have more pages in your public folder serve the public folder on the / route

Here is an article that provides a more detailed explanation

Link: How to Render a React App Using an Express Server in Node.js

Rilla0
Related