An advanced guide on how to setup a React and PHP

A quick guide on setting up a React and PHP web. I love React and I still use PHP

Davison Pro
Jan 9, 2019 · 5 min read
Image for post
Image for post
PHP and React Js. I love React

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:

Image for post
Image for post

First, we need to create the root directory for now. This will hold all of our files. Next we have the folder that will contain our entire React application. I added an extra folder 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 I also have an folder which will contain our compiled react and css. The folder is self explanatory, but this will contain all of the NPM packages for our file. It will be created automatically when we install our NPM.

Getting Started with the Backend

create a new file called .

We are accessing our react app by adding this javascript line in our 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 file. Add the following configuration to it.

Important stuff to note

We are configuring webpack to use the (has our react javascript) and (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 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 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 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 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 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 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 .

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

“build”: “webpack — progress — env.NODE_ENV=production — mode production”,

Finally, we need to execute the command . 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.

Free Plagiarism Checker, Citation Generator/Bibliography Generator, Thesis Generator, GPA Calculator, Words To Pages Converter and Words To Minutes Converter for students.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store