How to Use Laravel 10 Inertia React with Typescript

In this tutorial, we will see how to install laravel 10 inertia react with typescript. To use inertia react with typescript we need laravel breeze.

Step 1: Install Laravel App

Run below command to install laravel 10.

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  
❯ 0

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

add laravel 10 Inertia + react + typescript

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