Search code examples
reactjsxampp

How do I use React and xampp together?


I'm trying to build a React application that talks to a MariaDB/MySQL database on my local PC. I am running two servers

1) npm start for the development server to simulate the client, and
2) xampp to simulate the server.

I have created a test database on my local machine. Here is my confusion.

I have c:\react\testclient setup with my react project and am in that directory when I run npm start. I am also running xampp out of the box unmodified. It points to c:\xampp\htdocs as the Document root.
So if I am understanding this correctly I am pointing to two different places with servers as root directories. I want to test my code end to end.
My React app will handle a "login" function and make an ajax call to my server to check the credentials against what is in the database and respond with success or failure.
I assume I have to put my php code in the xampp path in a directory near the document root (maybe c:\xampp\php or something like that). This is how I am setup, but I don't know how to develop this fully on the same PC because they point to different document root directories.

My question is to those who have set this up for their development environment. What do I have to change? Do I have to do a "build" of the React application and copy that to the document root of the xampp server to test end to end?

Do I have to point one environment to the other so they can work together?


Solution

  • First of all, you have to put your php code IN the root, so in c:\xampp\htdocs. If you start your XAMPP server, xammp will host this directory on http://localhost/ Let's say you have an index.php which handles your ajax request:

    You can now make a ajax request to http://localhost/index.php

    Hope this helps