2

I am working on a React JS application. Where I am using PHP and MySQL at the back end and React JS at the front end. What I am trying to do is to make a simple API 'fetch()' call to the back end and to get some data. My React App is running on "http://localhost:3000/". I have made a folder called "api/index.php" in the root directory of the React Application. When I try to make the call I get the error "File not found : 404". I don't know why.

Fetch API in a component

fetch("/api/index.php", {
  method: "POST",
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => console.log(res))

Files Structure enter image description here

Please note that I am running the whole app in wamp server directory www/react-app/

Improve this question
9
  • 1
    Dont you think you need to give path like this in React Js /api/index.php Commented Sep 27, 2019 at 7:44
  • How did you start your React application? Commented Sep 27, 2019 at 8:22
  • @KoalaYeung using "create-react-app" Commented Sep 27, 2019 at 8:42
  • @Jaymin yes, I have mistyped the code, I made an update now. Commented Sep 27, 2019 at 8:43
  • 2
    How are you running your php/MySQL backend? Do you have another apache running on a different port and serve through that? If that is the case then your URL would be localhost:{apache-port}/api/index.php Commented Sep 27, 2019 at 8:48

3 Answers 3

Reset to default
3

You cannot serve php with create-react-app development server (i.e. npm run start). As @EliasSoares pointed out, your PHP needs to be parsed on server side by php-fpm or Apache's mod_php setup.

Either you should:

  • Build the create-react-app statically (i.e. npm run build). Then manually copy the build result, together with your /api PHP code, to the WAMP document root. This way works, but you will need to copy your JS / assets folder to WAMP every time your ReactJS code is updated.

    Or

  • Serve PHP with WAMP on a different localhost port (say locahost:8080). Still develop your CRA application with development server (i.e. npm run start) at the same time. You need to modify your fetch URL like this:

    fetch('http://localhost:8080/api/index.php', options).then(...);

    This way, you need to correctly code your PHP to deal with CORS preflight request and header. If you're using some popular PHP framework, I'm sure they'd have some middleware / plugin solution for this problem.

I think the 2nd option, although more troublesome to setup, is the more flexible solution for a better development experience.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@NadeemAhmad: Your fetch call didn't specified the hostname and port. In that case, your browser would presume the path to be on the same host:port (i.e. http://localhost:3000), which is the CRA development server that has no ability to parse and run the PHP code.
And if you just change the fetch URL to your WAMP port, you'd most probably encounter the CORS issue I mentioned.
Yes, I will take care of that.
3

Before all, your file is outside the public directory, so it's not accessible from your dev webserver. Also, looks like you are mixing concepts here. Keep some things in mind:

  1. A react application is build from the your sourcecode and served using some dev webserver usually while developing.
  2. PHP files need to be parsed on server side, usually as a extension to apache or nginx.
  3. If you try to serve your file without a PHP parser, you will expose your source code to the world instead of having it executed.
Improve this answer

4 Comments

I got your point, but what If I build React App, then also I will be supposed to host the .php code separately ?
Yes. It's the best practice, create a whole new application just for your api.
Updated my answer to a more comprehensive version.
My PHP code is already on the Wamp, I am serving the whole react app in WAMP.
-1

You need to run your localhost/.../api/index.php if you are using xampp or local server for PHP and SQL. No local is included in your link.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.