Creating a Laravel Application with Inertia, React and Typescript

References:

Create a Inertia Route in routes/web.php

use Inertia\Inertia;

Route::get('/', fn() => Inertia::render('Home'));

Install laravel/ui to swap to React presets

composer require laravel/ui

php artisan ui react

Update webpack.mix.js to compile typescript

const mix = require("laravel-mix");

mix.ts("resources/js/app.tsx", "public/js");

Install react @types and typescript

npm i -D @types/react @types/react-dom ts-loader typescript

Generate tsconfig.json and choose react preset

npx tsconfig.json

Modify tsconfig.json

+ "allowSyntheticDefaultImports": true
+ "outDir": "public"
- "rootDir": "src"

Update app.js to app.tsx and add Inertia boilerplate

import { InertiaApp } from "@inertiajs/inertia-react";
import React from "react";
import { render } from "react-dom";

const app = document.getElementById("app");

render(
  <InertiaApp
    initialPage={JSON.parse(app!.dataset.page!)}
    resolveComponent={(name) =>
      import(`./Pages/${name}`).then((module) => module.default)
    }
  />,
  app
);

Create initial page in Pages directory Home.tsx

import React from "react";

export default function Home() {
  return <div>Home.</div>;
}

Compile assets

npm run dev