How to Install React JS in Laravel on Cloudways

Laravel has come a long way. These days, developers have access to plenty of cutting-edge responsive web applications that utilize the framework – Inertia.js, Alpine.js, and Livewire, to name just a few.

But the framework hasn’t lost touch with its past. It’s still quite easy to set up Vue or React with a Laravel project, which is especially helpful for reactjs developers looking to work with frontend frameworks.

In this article, we’ll walk you through bootstrapping the latest Laravel project and integrating React with it, so all Laravel and React.js developers can continue with their projects.

React JS with Laravel

React is an open-source frontend Javascript library developed by Facebook. Laravel is a full-stack PHP framework following the MVC pattern.

Setting up React with a Laravel project is exceptionally simple. If you have an old website built in PHP and are looking to alter the frontend of the site with React, you can easily do so. We’ll show you how to go about this on the Cloudways Platform.

Install React JS in Laravel on Cloudways

Install Laravel Project

We’ll use Laravel 8 to demonstrate the method in this article (and we highly recommend the version for its excellent security features.)

First, install a brand new Laravel project. With Cloudways, you can install Laravel with one click.

Select your server and Laravel application. Select the PHP server size as per your website traffic, and location according to your preferred region.

After completing all these steps, you can navigate the application tab and select the Laravel application.

Next, launch the SSH terminal from the Master Credentials tab and log in using your credentials.

Update the Composer version by running the self-update command. It will replace your Composer.

Install laravel/ui

laravel/ui is an official package that offers a login and registration user interface scaffolding for React, Vue and jQuery in your Laravel project.

Run this command to install the laravel/ui composer package.

composer require laravel/ui

Install React in Laravel

Now that you’ve installed the composer UI package, you’ll run the command below to install React in Laravel.

php artisan ui react -- auth

Install the Required Packages

I assume you have the Node and NPM installed on your development machine.

You can check the Node and NPM installation using this command.

# for node
node -v

# for npm
npm -v

The following command installs all the javascript packages required for our project.

npm install

The command above creates a node_modules folder and automatically installs all the packages that are registered in the package.json file.

Set Up React Component in Laravel 8

If you run the Laravel app now, it won’t load and display the React component in the Laravel view yet.

So, I will create a React component inside the resource/js/User.js and paste the following code in it.

We have also defined a ROOT DOM element ‘user’ inside the React component. It will fetch any element into the browser’s document object model.

We have to register the React component inside the resources/js/app.js file.

require('./bootstrap');

require('./components/User');
require('./components/Example');

In this step, we will add the compiled CSS path, the React Root DOM and the compiled JavaScript files inside the Laravel layout. The div with the id=”user” is the same id that we have declared in the document.getElementById(‘user’).

Place the given code inside the views/welcome.blade.php template.

Finally, we have to run the command to compile the JavaScript and CSS files for Laravel and
React.js project.

npm run watch

Your code has been compiled. Now run this command to view your app in the browser.

php artisan serve

Conclusion

Laravel doesn’t require you to use any specific Javascript framework; as long as you’ve configured it properly, any framework should work. This article serves you as a quick guide on how to develop a fully functional React application so you can easily set up creative front-end applications in Laravel.

Inshal Ali

Inshal is a Content Marketer at Cloudways. With background in computer science, skill of content and a whole lot of creativity, he helps business reach the sky and go beyond through content that speaks the language of their customers. Apart from work, you will see him mostly in some online games or on a football field.

Get Connected on: Twitter Community Forum