Laravel is a PHP backend framework that developers use to create their applications. Many software development companies have a stack for React JS as the front end and Laravel as the backend for apps.
Even though there are other options for the front end of a Laravel app there is an increasing demand for using React JS.
So before we start the tutorial for using React JS in Laravel, let us first look at why you should even use React JS with Laravel?
Benefits of Using React JS with Laravel
React JS takes care of your SEO so you don’t need to add features for this reason specifically when you use React JS in Laravel.
Laravel has an amazing built-in security system so your apps created with this PHP framework are safe from malware.
A great user experience, fast page loading and easy maintenance are some of the other benefits you will enjoy if you install React JS in Laravel.
Tutorial for Installing React JS in Laravel
You can use various methods to install React JS in Laravel.
The process you choose to follow depends on your programming knowledge and Laravel application development experience.
The React JS Laravel tutorial here follows the method where you create a React app with Laravel using the create-react-app code.
These are the steps required in the process:
- Build your Laravel application
- Create a React App
- The Laravel App Editor
- Changes in the json directory
- Compile the React app with Laravel mix
- Configure React app in the welcome blade
- Start Server
This is the code for the process we have explained below. So without further ado, here is how you can install React JS in Laravel:
1. Build your Laravel Application
Use Laravel Installer or Composer to build your Laravel application. You will need to set up a local PHP such as Valet or Homestead beforehand so that the Laravel application has its environment.
Also, make sure you have downloaded Node JS and installed a database.
Laravel & React Experts at ClickySoft!
2. Create a React App
You need to set up a new React app to integrate with Laravel.
Create the app in the Laravel root directory using npx create-react-app code followed by the name of your app. Type this in the command prompt window.
Once the app is created, a file by the name of React app will appear in the Laravel directory.
3. The Laravel App Editor
Here are the several steps you need to complete in the Laravel project window before using React JS with Laravel:
a. Open Your Laravel App Editor i.e. Your Main Laravel Project Window
On the left-hand side of your screen, you will see the resource file. Click on that to go into the React App.
Next, you will see a packages.json file under React app. Go inside it and move the packages from the react app file to the packages.json in the root directory of your Laravel app.
Then open the command prompt and type in npm install. This way, the node module directory is created at the root of your Laravel app.
b. Compile the React App with the Laravel Mix
Go to the mix.js tab [webpack.mix.js in the root directory of your Laravel app] to compile the JavaScript to Public (which is your React app in this case).
Once in webpack.mix.js, you may have to change a few things. Change the mix.options to postCss.
Then you need to confirm what your public path is. You have to make sure it is set to ‘public’ because all your resources for the React app should be compiled in the public directory of the Laravel app.
In the code on lines 35-36, you need to confirm the paths for your react app’s resources. Set that to public, and remove asset so that it is compiled in resources file 🡪 react.app 🡪 public.
Then type in the command npm run dev to compile all your assets and resources. At the end of this process, your resources are copied in the public directory and React JS app is compiled in the app.js directory.
c. Configure React App into the Welcome Blade
The next step is to configure the react app in the welcome blade. For that, go to resources 🡪 react.app 🡪 views 🡪 welcome.blade.php.
Now give IDs to index.html in the public directory by going in react.app 🡪 public 🡪 index.html.
Then you have to assign the id of the root to the div code, copy it from index.html to the welcome blade. This is where your application will load once it is up and running.
The last step is to manually adjust the code on line 106 of welcome.blade.php to specify the mix function and the paths of the app.js.
4. Start Server
Type in the command php artisan serve in the command prompt. And refresh the app page that you have opened in your browser.
Now your React app is installed in the Laravel application.
If you want to make changes in the React app while using React JS with Laravel go into the src/app.js directory.
Make the adjustments and then simply fire the command npm run dev and that will compile your changes. Then start the server again and you should see the changes in your web app in the browser.
Alternate Method to Create a React App With Laravel
As we mentioned above, there are a few different methods of using React JS with Laravel.
You can write the code from scratch and program the React JS front-end with the Laravel, or you can use the laravel/ui, which we will briefly cover below:
- Install Laravel using the Composer or the Installer.
- Open the command prompt and type in: composer create- laravel/ laravel project-name.
- Again, open the command prompt and now type in composer require laravel/ui to download and install the larval ui.
- Once completed, fire the command php artisan ui react 🡪 enter 🡪 npm install in the same window as the previous step.
- Type in php artisan serve in a new command terminal and copy the address that shows up to open your Laravel project in the browser.
- Open the Laravel project window. Your code for the React JS app is in the resources 🡪 js.
- You can rename the file example to index and also change the ID in the code lines as well. Then import the index components and the React-DOM in the app,js directory code.
- Go to the welcome blade in the Laravel root directory, delete the unnecessary code and add the <div id “app”>, script src and link to ./css/app.css.
- Type in npm run watch in the command window and refresh your browser page.
- The process is complete. Your screen should now show the message that you had typed in the index.js directory.
Final Words
Installing React JS in Laravel gives you a diverse UX along with other benefits of a robust application.
This tutorial is easy to follow for anyone who has a basic understanding of both these frameworks.
If you want your app to be developed professionally, then contact our team of expert React JS developers for creating with Laravel apps and making customized modifications as per your needs.
