How to install Inertia js in Laravel with React JS, Tailwind CSS

In this section, we will install Inertia JS in Laravel with React JS, Tailwind CSS. Inertia JS use for create single page Application. You can use 3 types of JS front end in inertia JS Vue JS, react JS, svelte. But in this section we will install inertia JS with react JS, tailwind CSS with the help of Breeze package.

Breeze package is simpler thane Jetstream . Breeze come with tailwind CSS, Breeze is a minimal, simple implementation of all of Laravel's authentication features, including login, registration, password reset, email verification, and password confirmation.


How to install Inertia js in Laravel with React JS, Tailwind CSS


Step 1: Create Laravel Project

Setp 2: Set Up Database Details in ENV

Step 3: Install Laravel breeze

Step 4: Setup Breeze With React JS



Step 1: Create Laravel Project

Installing a fresh Laravel project, so head over to the terminal, type the command, and create a new Laravel app.

composer create-project --prefer-dist laravel/laravel project-name


Step 2: Set Up Database Details in ENV

Now, you have to connect the Laravel app to the database, hence open the .env configuration file and add the database credentials as suggested below.

.env

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


Step 3: Install Laravel breeze

Next, you need to run below command in your terminal

composer require laravel/breeze --dev


Note

Don't run the command below ❌

php artisan breeze:install

if you are run this command by mistake do not worry . then run follow the step 3 . it will replace your code how good is breeze package


Step 4: Setup Breeze With React JS

For react JS setup you need to run below command in your terminal if you want to install Vue JS you can use Vue modify command and write Vue. How simple it that.

php artisan breeze:install react

After run above the command run three basic command. or you can use simple npm install && npm run dev . single line code with run both command the migrate .

npm install
npm run dev
php artisan migrate

Congratulations 🎉 your setup is completed. just run the serve