README

A modern full-stack starter template combining Laravel, Angular, and Inertia.js for building fast, reactive web applications with server-driven component rendering. Built using Ng-inertia

About

Build modern web applications without the complexity of a separate API layer. This starter kit lets Laravel render Angular components directly, giving you the best of both worlds: server-side routing and database logic with client-side interactivity and dynamic page transitions.

Inertia.js eliminates the need for JSON APIs by sending component names and props directly from your server. Angular handles rendering, client-side navigation, form submissions, and state management—all while staying connected to your Laravel backend.

How it Works

The setup is intentionally minimal:

Server Response — Laravel returns an Inertia response with a component name and props.
Component Rendering — Angular resolves and renders the named component with those props.
Client Navigation — Links use inertiaLink to visit other pages without full reloads.
Page Layouts — Components decorated with @InertiaPage() can attach shared layouts.
Form Submissions — useForm() handles POST/PUT/PATCH/DELETE with validation and errors.

Tech Stack

Backend

Laravel 12 — Modern PHP framework with Eloquent ORM, migrations, and routing
Inertia Laravel — Server-side adapter that handles component/props serialization
Tailwind CSS — Utility-first styling framework
Pest — Expressive PHP testing framework

Frontend

Angular 21 — Modern TypeScript framework with RxJS
ng-inertia — Angular adapter that handles routing, page resolution, and form helpers
Vite — Lightning-fast build tool with HMR
RxJS — Reactive programming for async operations

Quick Start

laravel new your-project-name --using=ademking/laravel-angular-inertia-starter

Or you can clone and install:

1. Install Dependencies

composer install
npm install

2. Setup Environment

cp .env.example .env
php artisan key:generate
php artisan migrate
npm run build

3. Run Development Server

npm run dev

This starts:

Laravel on http://localhost:8000
Vite with HMR for instant frontend updates
Queue listener for background jobs

Creating Pages

Page components are Angular components marked with @InertiaPage(). Create them in resources/js/app/pages/:

import { Component } from "@angular/core";
import { InertiaPage, InertiaPageFields } from "ng-inertia";

@InertiaPage()
@Component({
    selector: "app-dashboard",
    standalone: true,
    template: `
        <section class="page">
            <h1>{{ title }}</h1>
            <p>Welcome, {{ userName }}!</p>
        </section>
    `,
})
export default class DashboardPage implements InertiaPageFields<{
    title: string;
    userName: string;
}> {
    title!: string;
    userName!: string;
}

On the server side, return the component from Laravel:

use Inertia\Inertia;

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard', [
        'title' => 'Dashboard',
        'userName' => auth()->user()->name,
    ]);
});

Project Structure

laravel-angular-inertia/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   ├── Middleware/
│   │   └── Requests/
│   ├── Models/
│   └── Providers/
├── database/
│   ├── migrations/
│   └── seeders/
├── resources/
│   └── js/
│       └── app/
│           ├── pages/           # Page components (*.page.ts)
│           ├── layouts/         # Shared layout components
│           ├── components/      # Reusable components
│           ├── services/        # Angular services
│           └── app.config.ts
├── routes/
│   └── web.php                 # Route definitions
├── tests/                       # Test suites
├── vite.config.js              # Build configuration
├── composer.json               # PHP dependencies
└── package.json                # Node dependencies

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

Credits

Built with:

License

This project is open-sourced software licensed under the MIT License.

ademking / laravel-angular-inertia-starter

Maintainers

Package info

Statistics

Security