tl;dr

git clone https://github.com/irsyadadl/inertia.ts.git 'project'
cd project
composer install
cp .env.example .env
php artisan key:generate
npm i && npm run build

This project using React v18 and Laravel v9

Laravel Inertia React w/ Typescript

By default, if we use package like Laravel breeze, it'll use regular javascript react by default. But this project is for you who want to use inertia.js with typescript boilerplate.

This project has come with some features like:

• Authentication
• User Profile
• User Avatar
• User Password
• User Delete

About Laravel

Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling.

About Inertia.js

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

About Typescript

Typescript is a strict syntactical superset of JavaScript and adds optional static typing to the language.

Available scripts

Feel free to use someting like pnpm or yarn. It just node package manager I have, so make yours.

# Format with prettier
npm run format

# Start development
npm run dev

# Build the app
npm run dev

# Testing for SSR
npm run test-ssr

Components

This project has a few helpers available to you. You can use them in your components like this:

useRoute()

Gives you access to a typed version of ziggy-js's route() function.

import useRoute from '@/hooks/useRoute';

export default function SomeComponent() {
  const route = useRoute();

  return <a href={route('profile.edit')}>Edit profile</a>;
}

useTypedPage()

Gives you access to a typed version of usePage() from inertia.js

import useTypedPage from '@/hooks/useTypedPage';
export default function SomeComponent() {
    const { props } = useTypedPage<{ canViewThisPage: boolean; }>();
    const { canViewThisPage, user } = props;
}

Update profile information

Of course it is not just about authentication, but also about updating user profile information, password, and deleting account.

If you like making new features, feel free to make a pull request. I'll be happy to review it.

Thanks to

• Laravel
• Inertia with React and Typescript
• Vite with Vite plugin and friends
• Tailwind CSS and friends
• clsx

Premium Partners

• Parsinta
• Irsyad Notes