A React app inside a Laravel project

Consider an existing Laravel 5 project setup with Laravel Elixir for client side assets (Javascript and LESS). Furthermore assume that the current JS setup does not use a specific JS framework (e.g., no Vue.js is used), but some of our pages need so many JS that it is time to use one.

In one of our existing Laravel 5 projects we used JS modules as described in a previous blogpost but we did not use a framework yet. However, since we jumped on the React train we investigated how to add an interactive piece of React code to this legacy codebase.

In this post I’ll walk through the steps we took to set things up.

List of requirements

Before we start, here is a list of requirements I made:

  • We like to use state of the art React with Webpack, ES6 syntax (including jsx) and Babel
  • We like to have a local development server to isolate the React app when developing
  • We like to have a seemless build-for-production process resulting in a single (minified) script that we could add to a specific Laravel view.

With the requirements ready, let’s go!

Setting up the development environment

Since this post is about including the React project inside a Laravel project I am not going to describe all the details about setting up a React app with Webpack, ES6 and Babel. First of all, many people already addressed this point and furthermore, there are a ton of starterkits available on Github.

So I think it is ok to assume you have your React app running locally. You also have a build command inside the package.json for a production build, right? Go ahead and run the build script which will likely create your single (minified) script in your /dist folder.

A project inside a project

Now it is time to put the script in the correct view. In my project, the current JS app (which is bundled via Elixir) is loaded in the main view. However, the React app is a standalone app that (in this case) only needs to run on a specific page. On this page we need to add the empty div in which the resulting HTML will be placed once the app starts running. Then we add the script tag to this view and voila, the app is running inside the Laravel project!

Improving our workflow

At first it was quite ok to only have the production build version of my app inside the Laravel project. But how do we manage the development code? Where to put it on my computer? What if we like to include more React apps on different pages?

My solution is outlined below.

Inside my Laravel project I created the folder /resources/assets/react-js (The already existing JS codebase that runs with Laravel Elixir is stored in /resources/assets/js). Here I created a new directory ‘test-react-project’ and I copied the entire react project folder to it, except for the .gitignore file and the .git folder. This way we have a React project inside a Laravel project that we can run in dev mode and we can easily add new projects to run on other pages.

Don’t forget to add the node_modules folder of the react app to your main .gitignore of the Laravel project. Using **/node_modules makes sure that all node_modules folders are ignored by Git.

Using data from Laravel Controller

In my example setup the endgoal was to visualize some data from the Laravel backend using Javascript. Using the PHP-Vars-To-Js-Transformer package for Laravel I was able to transport the data I needed from the Controller to JS in a specific namespace. However, this data is not available in dev mode as we are not connected to the Laravel app there. So I made a switch in my main component’s componentDidMount method to either use the data from Laravel if available, or read some sample data from file. Of course this is a small tradeoff we need to make this work.

Conclusion

When you have a legacy JS codebase inside a Laravel project that is using Laravel Elixir and you would like to integrate a React app inside it is possible with the steps outlined above. The one thing we can’t use however is client side routing as this is already managed by Laravel. 

I am very curious how other developers combine Laravel and React and if you have a different setup I will be glad to hear from you in the comments!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Latest post
Laravel-mix and the spread operator

Leave a Reply

Your email address will not be published. Required fields are marked *