How to Use Laravel 10 Inertia React with Typescript

In this tutorial, we will cover how to install Laravel 10 with Inertia.js, React, and TypeScript. To achieve this, we will use Laravel Breeze.

Step 1: Install Laravel App

Run below command to install laravel.

composer create-project laravel/laravel inertia-react-ts

Step 2: Connect Database

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 Breeze with Inertia + React + Typescript

Install laravel breeze via composer.

composer require laravel/breeze --dev

Next, run below command.

php artisan breeze:install

Give 1 number to start with inertia react.

 Which stack would you like to install?
 blade .............................................. 0  
 react .............................................. 1  
 vue ................................................ 2  
 api ................................................ 3  
❯ 1

Next, you need to add feature dark mode, and TypeScript support. Write yes to add this feature.

 Would you like to install dark mode support? (yes/no) [no]
❯ yes

 Would you like TypeScript support? (Experimental): (yes/no) [no]
❯ yes

 Would you like to install Inertia SSR support? (yes/no) [no]
❯ yes

 Would you prefer Pest tests instead of PHPUnit? (yes/no) [no]
❯ yes

After that you Laravel 10 + Inertia + React + Typescript app ready.

Laravel 10 + Inertia + React + Typescript folder

Step 4: Laravel Run Server with Vite

Run below command in terminal to serve laravel 10 app.

php artisan serve

Next, you need to open next terminal.

npm run dev
# or
npm run build

Step 1: Install Laravel App

Step 2: Connect Database

Step 3: Install Breeze with Inertia + React + Typescript

Step 4: Laravel Run Server with Vite

saim ansari