PHP file in React public folder(Testing on localhost)

Question

Currently I am working on a React folder with some PHP in public folder.

Structure

.
├── pubic
│   ├── api
│        └── co.php
├── _src
│   ├── api
│   └── components
│   └── index.tsx
├── package.json
└── node_modules

The public folder contains PHP files that changes Requests/Responses to client/API server(made by diff company).

I added another endpoint/PHP file in public folder but cannot seem to access it when testing on localhost. My coworker has mentioned that I need to update changes in staging server to test out changes in PHP folder.

Is there a better way to test locally so I do not have to update server everytime I make changes in public folder adding PHP files?

/src/api/co/reg/index.ts

import { TRequestConfig, TRequestParams } from '../..';
export { CoRes } from './CoRes.class';

export const coRequestConfig: TRequestConfig = {
  endpoint: '/tempo/api/co.php',
  method: 'POST',
  useMock: false,
  mockFunc: params => {
    return {
      ok: true,
      body: '{}',
    };
  },
  params2request: (params): TRequestParams => {
    return {
      body: params ? params.body : {},
    };
  },
};

/public/api/co.php

<?php
$ch = curl_init();
$isDev = $_SERVER['SERVER_NAME'] === 'stg.cooo.ca' || $_SERVER['SERVER_NAME'] === 'lol.ca';
$protocol = $isDev ? 'https://cooo.com' : 'https://cooo.prod.com';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $url = "${protocol}/aa/api/co/used";
  $data = file_get_contents('php://input');

  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_POST, true);
  curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type:application/json'));
  curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

} else {
  $couponId = $_GET['couponId'];  
  $url = "${protocol}/aa/api/co/${couponId}";

  curl_setopt($ch, CURLOPT_URL, $url);
}
if ($isDev) {
  curl_setopt($ch, CURLOPT_USERPWD, "1234:1122"); 
}
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
echo  $result;

Answer 1

I do this frequently on my own projects, and I have a hackish solution for it.

To run PHP a parser or compiler from the server side (WAMP/LAMP/XAMPP/ETC) needs to handle the PHP file first, then send the data to the client side. Since react is node based it can't handle PHP files natively.

My own solution uses WAMP and tying the virtual host (httpd-vhosts.conf) to the public folder of my react project.

Example :

<VirtualHost *:80>
    ServerName api.projectname.test
    ServerAlias www.api.projectname.test
    DocumentRoot "path/to/public/folder"
    <Directory  "path/to/public/folder/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        Header set Access-Control-Allow-Origin "*"
        AllowOverride All
        Require local
    </Directory>
</VirtualHost>

Next, I configure the host file (c:\Windows\System32\Drivers\etc\hosts) to redirect this URL back to localhost by adding the following two lines inside this file (can be at the bottom, but make sure its a new line, and not one with a "#" comment sign.

127.0.0.1 api.projectname.test
::1 api.projectname.test

Finally, I start up WAMP and react, in react I use a a conditional if to switch between development or production, to switch the URL

if_dev() ? 'http://api.projectname.test/api' : '/api'

Then the setup is complete. Note that this may not work completely in the case of uploading files to server, where the backend is also on the same server directory as during development, any upload will cause a react-script re-render due to the public folders having changes, but other than that, you may now easily use this to implement a standard PHP backend with your code, also while having both front-end and back-end in the same directory (convenient if saving both to git etc)