irsyadadl / inertia.ts

Inertia React with Typescript implementation.

tl;dr

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

This project using React v18 and Laravel v10

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 Password
• User Delete
• User Resources (--only=[index, show, edit, update, destroy])
• Pagination

Quick Login

This project has a feature to login quickly. You can use this feature by adding /dev/login/{user_id} to the url. For example: http://localhost:8000/dev/login/1. And then you can login as user with id 1. But this feature only works in development mode with APP_ENV=local in .env file. Make sure you have a user with id 1 in your database.

The default branch has been renamed!

9.x is now named laravel-9.x

If you have a local clone, you can update it by running the following commands.

git branch -m 9.x laravel-9.x
git fetch origin
git branch -u origin/laravel-9.x laravel-9.x
git remote set-head origin -a

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
bun run format

# Start development
bun run dev

# Build the app
bun run build

# Testing for SSR
bun run preview

Update profile information

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

Dashboard Layout

This project has 3 layout:

1. Guest Layout
2. App Layout (Default)
3. User Layout

User layout will make a layout side by side, it has a sidebar. So this is will be useful when you need an admin panel or something like that.

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

Learn More

Everything you need to understand is clearly can be found in: UI / UX with Laravel and React

Thanks to

• Laravel
• Inertia with React and Typescript
• Vite with Vite plugin and friends
• Tailwind CSS and friends
• Shadcn
• Paranoid
• parsinta.com
• irsyad.co
• karteil.com
• ayoseh.at

Premium Partners

• jetbrains.com