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
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!