Laravel Inertia REact TypeScript
A batteries-included starter for Laravel apps.
git clone https://github.com/dotangad/liret new-project
composer && npm i
cp .env.example .env
./vendor/bin/sail up -d
./vendor/bin/sail artisan migrate:fresh --seed
./vendor/bin/sail artisan websockets:serve # Optional: not required if your app does not need websockets
npm run watch
Types for the app are defined in resources/js/lib/types.tsx
, this file has the interface IPageProps
, which is used with the usePage
hook from Inertia for typing shared data coming from the backend.
const { props: { user } } = usePage<IPageProps>();
This file also has IUser
, the interface for the User model.
resources/js/lib/use-title.tsx
contains the useTitle
hook, used to set the title from inside a React component. You could also use Inertia's Head
component for this.
php artisan make:page <PAGE NAME>
creates a page in resources/js/pages
using the template in resources/js/pages/template.tsx
.
LIRET supports authentication with email-password, Github and Google out of the box. Social authentication is implemented with Socialite, so it should be easy to add other providers. See app/Http/Controllers/SocialAuthController.php
for implementation.
Admin accounts have the admin
property on the User
model set to true. By default, all users who register via the /auth/register
route are not admins.
The database seeder creates an admin account with the following credentials:
Email: admin@example.com
Password: adminadmin
Two gates are defined in AppServiceProvider.php
, they're used for authorization in the controllers and routes.
Gate::define('admin', fn (User $user) => $user->admin);
Gate::define('user', fn (User $user) => !$user->admin);
resources/js/lib/authorization.tsx
contains the following components - Admin
, User
, Authenticated
and Guest
. These show/don't show the children passed to them based on the user and authentication state.
<Admin>
Only an admin can see this
</Admin>
<User>
Only a user who is not an admin can see this
</User>
<Authenticated>
Both users and admins can see this
</Authenticated>
<Guest>
Logged in users can not see this
</Guest>
A dashboard is available at /laravel-websockets
, clicking on Connect
establishes a websocket connection with the server.
Read the documentation [1] [2] for usage instructions.
This project comes with ESLint and Prettier setup out of the box, configs are in .eslintrc.js
and .prettierrc
respectively.
There's also husky and pretty-quick for pre-commit formatting.