Skip to main content

Architecture Overview

Saucebase is a modular Laravel SaaS starter kit. The backend is Laravel 13 with Inertia.js — the frontend is your choice of Vue 3 or React, connected seamlessly through Inertia. Tailwind CSS 4 handles styling across both.

High-Level Architecture​

The flow:

  1. Browser requests a page
  2. Laravel routes to a controller
  3. Controller returns Inertia response (JSON with component name and props)
  4. Your frontend framework receives props and renders the appropriate page
  5. Subsequent navigation happens client-side without full page reloads

This architecture eliminates the need for a separate REST API while providing a modern SPA experience.

Core Concepts​

Modular by Design​

Saucebase uses modules to organize features. Each module is self-contained with its own:

  • Routes, controllers, and models
  • Frontend pages and components
  • Migrations and tests
  • Translations

Modules live in your repository (modules/<Name>/), not in external packages. You own the code and can modify it freely.

Learn more: Module System Architecture

Inertia.js: No API Required​

Traditional SPAs require building and maintaining API endpoints. Inertia.js eliminates this by allowing controllers to pass data directly to your frontend components as props.

// Controller
return Inertia::render('Dashboard', [
    'stats' => $stats,
    'user' => $user,
]);

Your components receive these props with full type safety — no API layer, no REST endpoints, no GraphQL schema.

Learn more: Frontend Architecture

Server-Side Rendering (Opt-In)​

SSR is available but disabled by default. Enable it per-route for pages that benefit from SEO:

// Public page with SEO benefits
return Inertia::render('Products/Index')->withSSR();

// Authenticated page without SSR
return Inertia::render('Dashboard')->withoutSSR();

This gives you control over when SSR overhead makes sense.

Learn more: SSR Guide

Type Safety End-to-End​

TypeScript flows from backend to frontend:

  • Controllers define data types
  • Inertia props are type-safe
  • Frontend components get autocomplete and type checking
  • Build-time validation catches errors early

This makes refactoring safe and development faster.

Copy-and-Own Philosophy​

When you install a module, its code is copied into your repository. You're not depending on external packages—you own the code.

Why? Full control, no version conflicts, easy customization, simplified debugging.

Trade-off? No automatic updates, but you gain complete ownership.

Learn more: Design Philosophy

Request Flow​

Initial Page Load​

  1. Browser requests /dashboard
  2. Nginx forwards to Laravel
  3. Route resolves to controller
  4. Controller returns Inertia response (JSON)
  5. Blade template renders with embedded JSON
  6. Frontend framework hydrates and displays the page

Subsequent Navigation (SPA)​

  1. User clicks a link
  2. Inertia intercepts and makes XHR request
  3. Laravel returns JSON (no full HTML)
  4. Frontend swaps page component
  5. URL updates, page renders instantly

This combines the best of traditional server-side apps (simple data flow) with modern SPAs (smooth navigation).

Next Steps​

Dive deeper into specific architectural areas:

Understanding the architecture helps you build features that feel natural in Saucebase and make the most of its design.