How to run ReactApp created by create-react-app on XAMP using index.php rather than index.html?

Question

I have thoroughly searched the web about creating a website using React as a front end and PHP as a backend for like a week now. I have found many solutions about configuring webpacks and stuffs. But most of them only aim for index.html. So, I decided to create one LARGE react app and used CDNs of React, ReactDOM, and Babel to run it on index.php which is running on XAMPP. The main reason for creating one large app is because I cannot use full functionality of creating components and importing them.

But now, I want to use MDBootstrap, and its React components. But I cannot use them since importing is not available. I have watched tutorials and read articles about webpack and configured it. But all those were for index.html. And lastly, I have also found tutorials using PHP, XAMP(MySQL), and React. However, most of them run on Node server rather than XAMP server.

So I want to create something like

• Website
  • react_app
  • index.php

where react_app is created by create-react-app or does have a same functionality as it like imports and stuffs. I do know that NPM server runs index.html from /build/, but I do want to run it on XAMP server using index.php.

Answer 1

Here is a link you can follow to do what you are asking for https://medium.com/@MartinMouritzen/how-to-run-php-in-node-js-and-why-you-probably-shouldnt-do-that-fb12abe955b0

and a possible other answer here Execute PHP scripts within Node.js web server

Only thing is, it is not really advisable to do this. It carries a number of security risks. I would advice you learn to seperate concerns and follow the Model-View-Controller (MVC) design attached to React.

You can still have React as your view while PHP is in the back. requests are sent and received through an api call. Check out this simple tutorial on achieving this https://blog.bitsrc.io/how-to-build-a-contact-form-with-react-js-and-php-d5977c17fec0

I hope this helps you with what you need. If it doesn't, let me know. glad to help!