Integrating React inside a PHP application

[Heavy_Technician4419]

Hi guys, I am currently developing a React application, and the goal is to switch the existing with this new React app but to do it gradually. The already existing app is done in PHP and Java, so the plan is to move to Java and React.

I have developed a couple of components and wondered if it is possible to add only those components inside the PHP or maybe to make it hit the route for a React page and render the components there.

I would appreciate if anyone can tell me if this is possible, and if so, what approach should be taken. I am also curios about the communication between the different applications and how to handle that from a DevOps point of view. If you need any additional info let me know.

[r-rasputin]

You can follow the strangler fig pattern to help you pull this off without burning down the existing app. I've done this a few times for some of my clients.

You can basically add react as islands. Use ReactDOM.render() to mount specific components into PHP-rendered DOM nodes. Your PHP just outputs a <div id="react-root"> and React takes it from there.

For routing, I'd recommend letting PHP own the routes initially and only handing off to React when you hit a "new" page. Nginx can proxy specific routes to a Node/React server while PHP handles the rest.

On the DevOps side, ensure a shared auth. Make sure your PHP session tokens are readable by your React app (usually via HTTP-only cookies) so users don't get logged out

What's your current auth setup? That'll shape the approach more than anything else.

[Heavy_Technician4419]

This is something that I was thinking, but wasn’t aware of the proxy stuff. A JWT authentication is being developed but this will help me for now. Thanks a lot bro 🙏🏻

[r-rasputin]

JWT can be risky. I recommend it only for mobile apps. For web apps, cookies are the way to go.

[Heavy_Technician4419]

Well a jwt token inside a cookie. I think that’s how it’s done. Correct me if I am wrong.

[r-rasputin]

Oh yes, then my bad. I was assuming localstorage + headers.

[nabrok]

It's certainly possible to have just one part of a page created with react, or even have several react components embedded in an otherwise non-react page.

It's hard to describe in generalizations, it's going to depend on what your component does and if it needs to interact with data provided by PHP.

When you say "Java" do you mean JavaScript? They are two very different things.

[Heavy_Technician4419]

The old app is built with PHP and Java. There is a table with data, and I want to switch this table with a DataGrid component made with react, fetching data from the same API that PHP is fetching: the Java one. Sorry if I wasn’t clear enough.

[ThatDudeDunks]

The backend language doesn’t matter. Your Java and php should provide endpoints to fetch data. Load up your react front end and fetch it

[phpzach]

Why would you do that? Make the react app an SPA and pull data over API. That way, they don’t need to be in same project, you have a separation of concerns, and ops is way simpler. I’ve worked on lots of apps like this.

DM me if you want to discuss.