PHP with ReactJs - End to end setup

Setting up ReactJs with PHP 7 using Laravel framework

tl;dr When I had published an article about setting up development workflow for ReactJs, it was just a basic introduction to production ready dev. In this article I’ll be discussing about setting up development enviournment with PHP, where I’ll be covering some basics which will be helpful in case you want to setup with any other language than PHP with ReactJs. As framework in PHP I’ve selected Laravel 5.1 to explain things in this article, but it’ll be applicable to all the frameworks.

Before we start, I would like to mention that all the steps mentioned here are tested on Ubuntu 14.04 server, but if you are using Mac OS or Windows I will suggest you to take a look at Vagrant if it helps, also take a look at VagrantFile in case you choose to install vagrant.

Before we start, we need LAMP stack running so that we can test our changes, here is an article by Justin Ellingwood which I would suggest to follow up for installing and setting up LAMP stack. Or if you would like to install and setup PHP 7, fire below commands in your terminal and follow the instructions-

Where you can replace the projcet name MyProject with desired name; after you run this command it will fetch all the dependency under the MyProject directory in our case. Once it is done, you can configure Laravel directory to be served by Apache by pointing to ~/MyProject/public directory. My sample apache configuraion looks like below snippet-

Few basic notes about client.js

On the top of client.js, if you will notice I have imported modules in which App, NotFound are the react components. If you are saving react components with .jsx extension then this will not work instead you need to import those modules by writing complete extension of the file. But if you want to avoid that, save file with .js extension.

Webpack provides require.ensure method, which can be used to split the code into chunks.

For handling 404 routes we have configured NotFound component, so basically using path="*" we can handle all the requests for which it didn’t matched with the above paths.

Since we have added package.json and webpack configuration, now we can install the dependency by running following command-

Once npm installs webpack globaly, we can use webpack command to bundle our components, and on successfull build it will generate two files shared.js and main.js. In laravel my layout file resources/views/layouts/main.blade.php contains following code-

Which can be used by any further blade files. Below are few basic problems what each React developers face initially-

SEO friendly React apps

Having SEO friendly app is the biggest issue when we use any javascript frameworks because all search engines doesn’t execute javascript after crawling(now a days few web-crawler does it, such as google).

There are two types of routing in React: push-state, and hash-based. Each of them have their strengths and weaknesses. Here is a good writeup by James about routing.

In case if you are using push-state routing, you’ll need to handle requests from server-side for all the URLs as well. And if your application is hidden behind login screen this’ll not be the perfect option to choose. But in such situation when your application content is live to public, then it makes sense to have pretty URLs.

Speed up loading of App

When we talk about loading a single page application without any delay, generally this issue is caused because we load our whole application at once. But if we divide our code in such a manner, such that if X component is required than only it should load X’s definition. This problem can be addressed by dividing build code into chunks, and it’s done effectively by webpack and react-router; which we have used.