This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

✨ Vultr and Linode are back on Cloudways! VIEW PLANS→

How to Install React JS in Laravel on Cloudways

Updated on June 15, 2022

4 Min Read
laravel react

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

Nothing as Easy as Deploying Laravel Apps on Cloud

With Cloudways, you can have your Laravel apps up and running on managed cloud servers in just a few minutes.

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.

Cloudways Installation

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

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

react-ui

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

node-npm-versions

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

npm install

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.

react

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.

React Component in Laravel 8

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

npm run watch

npm-run

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

php artisan serve

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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

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 Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now