Search code examples
javascriptphpmysqlreactjswampserver

Develop React w/ full-stack (WAMP) locally

Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?

The perfect case is to:

  • Use the default React Create App setup without ejecting scripts
  • Make AJAX calls to PHP files which will handle the queries to MySQL database

Questions:

  • Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
  • Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?

EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:

  • How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
Solution

  • After investigation I have found a way to achieve my goal.

    The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:

    After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.

    P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.