How to setup a React and PHP Web app

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 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 index.php.

We are accessing our react app by adding this javascript line in our index.php file.

<script type=”text/javascript” src=”/app/assets/bundle/main.bundle.js” ></script>

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,

npm init

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.js (has our react javascript) and app.scss (has our app css/styling) as our main/entry files.

entry: {
    main: [
      ‘./_devapp/app.js’,
      ‘./_devapp/css/app.scss’
    ]
 },

We are defining the output of our compiled scripts which is assets/bundle folder.

output: {
   path: path.resolve(__dirname, ‘assets’, ‘bundle’),
   filename: ‘[name].bundle.js’
},

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 webpack.config.js file.

plugins: [
     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.

externals: {
     myApp: ‘myApp’,
},

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

plugins: [
   new webpack.DefinePlugin({
      ‘__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’;

Run 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 package.json file.

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.

Production

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 package.json

“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.