In this article, I am going to walk you through setting up a PHP backend server for a React Application.
To download or browse the code visit the repository via this Github link.
With this setup you will be able to run and develop your React app on your normal Apache localhost rather than node js localhost:3000 which is crazy when you wan’t to force authentication redirects with PHP or using secure cookie as you develop your web app or render some things with PHP before your app starts. I will also add SCSS support and nice advanced stuff.
Alright, now let’s get to it!
Requirements: You need Node.js and npm installed on your local machine. As well as a XAMPP, WAMP or any other web server solution.
Setting up the folder structure
Here is the folder structure we will be left with after the dust settles:
First, we need to create the
php-react-app root directory for now. This will hold all of our files. Next we have the
app folder that will contain our entire React application. I added an extra folder
_devapp which hosts my React app code. I’d recommend you do this too if your server backend is not running on Node js. If interested with knowing why i do that please leave a response and i will give you my
WHY.I also have an
assets folder which will contain our compiled react and css. The
node_modules folder is self explanatory, but this will contain all of the NPM packages for our
app.js file. It will be created automatically when we install our NPM.
Getting Started with the Backend
create a new file called
Setting up a React app
Now that we have created our index.php file, let us create the front end of our application. Create a new Directory where our index.php file resides and name it app. Open your terminal in our new terminal and type,
In our app directory, locate
package.json file. Add the following configuration to it.
Important stuff to note
We are configuring webpack to use the
app.scss (has our app css/styling) as our main/entry files.
We are defining the output of our compiled scripts which is
path: path.resolve(__dirname, ‘assets’, ‘bundle’),
For some reason i don’t mix the bunded css and js files in one folder which would have been the case in the above code hence i added the script below to the
new ExtractTextPlugin(path.join(‘..’, ‘css’, ‘app.css’))
In our app we are importing the MyApp global variable to our react JS app.
This keeps our app clean. I avoid importing variables from the global
window variable unless it’s necessary.
And lastly If your react app is connecting to an api then it’s good to pass static Endpoints via webpack or any other static variables like the api version the app will be using
‘__DEV__’ : JSON.stringify(true),
‘__API_HOST__’ : JSON.stringify(‘http://localhost/my-app/'),
For bundling/compiling our SCSS and React app we will use webpack. Copy the following in the webpack.config.js file
Now let us display our user data in our front end. Traverse to
/app/_devapp/app.js file and do the following. We will import our user data by importing our JS myApp variable thanks to webpack.
/** We are importing our index.php myApp Vairaible */
import myApp from ‘myApp’;
npm install to install our dependencies.
We will be watching for changes in our React app files and this will enable as to use our React files as bundles files while we are still in development mode. This is accomplished by this line in our
watch”: “webpack — colors — debug — display-chunk -w — env.NODE_ENV=development — mode development”
To display our react app frontend we need to run this command via terminal or cmd
npm run-script watch.
The final step in development is production. But first, the initial code has to go through several stages of processing, compilation, and minimization.
To accomplish we use this line in our
“build”: “webpack — progress — env.NODE_ENV=production — mode production”,
Finally, we need to execute the command
"run-script build". After that, the compiled React code will appear in the “app/assets/bundles/” folder. The scss will be compiled into the “app/assets/css” folder. That’s all!
To get all the files of this project download or browse the code visit the repository via this Github link.
And that’s it guys! If you liked this post, make sure to give me some 👏 below and follow me for more articles.
Loving my WordPress theme? Get it for $20 only. Get Brink Theme