Install React JS with Laravel Breeze

Install Laravel Breeze, which offers React JS scaffolding via an Inertia frontend implementation to build modern React JS app.

In this React JS tutorial, we learn to install Laravel Breeze with React JS over Laravel Application. Laravel Breeze come equipped with out-of-the-box scaffolding for new Inertia applications, making them the quickest and easiest way to get your Inertia project off the ground with React Js.

For this post, we are using Laravel Breeze. This minimal implementation includes login, registration, password reset, email verification, password confirmation, and a basic “profile” page for updating user information.

Laravel Breeze comes equipped with simple Blade templates styled with Tailwind CSS. However, if you prefer to scaffold your application using React JS and Inertia JS, Laravel Breeze can do that too.

In addition to being an excellent starting point for a new Laravel project, Laravel Breeze is also a great choice for projects that want to elevate their Blade templates using Laravel Livewire.

Install laravel project and setup database

First install a fresh new Laravel application from the composer using the following command,

composer create-project laravel/laravel inertia-react

It will create the laravel project folder named inertia-react .

Now, you have to connect the laravel app to the database. Go inside this folder and open .env to change the database connection details as follows,

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_username
DB_PASSWORD=database_password

After changing the connection details, run all migrations for the project using the following command,

php artisan migrate

Install Laravel Breeze over Laravel

Once you ready with the Laravel installation, you can proceed with Laravel Breeze installation using Composer using the following command,

composer require laravel/breeze --dev

Once you’ve installed the Laravel Breeze package using Composer, it’s time to run the breeze:install Artisan command as follows,

php artisan breeze:install

This command will publish all the necessary authentication resources, including views, routes, controllers, and more, directly to your application.

Laravel Breeze publishes its code directly to your application, giving you complete control and visibility over its features and implementation. This allows you to easily customize and tailor the authentication experience to fit your unique needs.

If you want to use an Inertia stack with React JS in your Laravel Breeze application, simply specify “react” as your desired stack when running the breeze:install Artisan command as follows,

php artisan breeze:install -react

Once the scaffolding is installed, be sure to compile your application’s frontend assets to ensure proper functionality:

npm install && npm run dev

With the initial setup complete, it’s time to test your application’s authentication functionality. Simply navigate to the /login or /register URLs in your web browser to get started.

All of Laravel Breeze‘s routes are defined in the routes/auth.php file, making it easy to modify or customize the authentication routes as needed.

Getting started with ReactJS

Setting up a local environment is recommended way to learn ReactJS because the local setup allows you to complete the tutorial using your choice of editor, use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Setting up a local environment is recommended way to learn ReactJS because the local setup allows you to complete the tutorial using your choice of editor, use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

Let’s start with creating a new ReactJS application.

Create React App

Creating React App is a comfortable environment for learning and building an application in React.

There are few prerequisites for creating a React app as follows,

  • Node.js >= 14.0.0
  • npm >= 5.6

If above requirements are satisfied, you can run the following command to create a new react application,

npx create-react-app my-react-app

You can change my-react-app to anything you want to name your app.

The create-react-app command will set up everything you need to run a React application. Now you are ready to run your first real React application! Go to your application directory using the following command,

cd my-react-app

Now, run the following command inside your application directory to run your application,

npm start

It will compile your application and open it in the new browser window or tab. If not, you can open your browser and write localhost:3000 in the address bar. Your application will look like screenshot below,

If you check your command window, it will show the following output,

You can see that command window is also providing command to create a production build for your application.