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?

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?

• javascript
• php
• mysql
• reactjs
• wampserver

Share Improve this question Follow edited May 29, 2018 at 19:50 marc_s 757k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Jan 16, 2018 at 10:15 0leg0leg 14.2k1818 gold badges7777 silver badges101101 bronze badges 5

• While its possible, its not really the way we develop with react... May you wanna take a quick look at nodejs and how to create a simple API server with it. Its really simple and much better, not only due to a massive performance increase. – Twinfriends Commented Jan 16, 2018 at 10:21
• I am open to NodeJS, however the hosting pany provides only MySQL+PHP solution. Is it possible to develop using NodeJS and some SQL database and then build things to make them work on MySQL+PHP in production? – 0leg Commented Jan 16, 2018 at 10:23
• 2 Would be possible, but not worth at all, since you would have to rewrite your whole serverside code. Then simply to for PHP. May you wanna have a look at reactPHP too. reactphp – Twinfriends Commented Jan 16, 2018 at 10:25
• The thing is that the project is hosted on guest-hosting, so I am unable to install anything - only plain MySQL and PHP scripts. I would like to figure out without buying Private Virtual Server option. – 0leg Commented Jan 16, 2018 at 11:51
• What you can achieve without ejecting is very limited. What are your concerns of not ejecting? – Raptor Commented Jan 17, 2018 at 1:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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:

• https://github./facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

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.

1) I strongly remend you do try to do this : Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project., and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.

2) You do not need to eject scripts to have both your frontend and backend in the same place : Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app