Setting Up the App Itself
The Historical Bible App – Part 2
"By wisdom a house is built, and through understanding it is established." – Proverbs 24 : 3
Last time we scoped the entire Historical Bible App. You left with ideas, diagrams, and optimism… and an empty terminal. Let's fix that. This post shows exactly how to spin‑up a modern Laravel + React stack on your laptop so you can start shipping code instead of staring at your coffee.
1. Recap – Our Tech Stack
Layer Choice Why? Backend Laravel 12 Battle‑tested, expressive, PHP8‑friendly Frontend Inertia.js + React 19, TypeScript, Tailwind, shadcn/ui SPA‑like DX without an API gym‑routine Docs Scribe Auto‑generates beautiful API references
If those words look like alphabet soup, keep reading.
2. Web‑App Bedrock: Core Concepts
MVC – Model ∙ View ∙ Controller. Separate data, UI, and request logic. 2. Routes – URLs mapped to controllers (or directly to views). 3. Database & Migrations – Version‑controlled schema changes. 4. The Laravel "Magic" – Eloquent ORM, Service Container, Artisan CLI, Middleware, etc.
Understanding these four pillars makes every other tool feel tame.
3. Meet the Cast
Laravel 12 – Big‑Daddy PHP Framework Laravel gives you an MVC skeleton, routing, auth, queues, tests, & more out‑of‑the‑box so you don't reinvent wheels (or middleware).
Inertia.js – The Bridge Inertia uses existing Laravel routes but swaps Blade views for JavaScript components. No REST layer, no GraphQL, just props over the wire.
React 19 + TypeScript Declarative UI with compile‑time safety. Hot‑reload happiness.
Tailwind CSS & shadcn/ui Utility classes + pre‑built accessible components = pixel‑perfect speedruns.
Scribe Point it at your controllers → get Markdown & HTML docs. Done.
4. Why This Combo?
Fast local dev – One codebase, one language per layer. * Server‑Side Rendering (SSR) via Inertia's SSR‑driver gives us SEO without complexity. * Scales with you – Need a pure API later? Stub controllers, keep Eloquent.
5. Prerequisites (Install These First)
PHP 8.3+ – language runtime * Composer – PHP package manager * Node 18+ & npm – JS toolchain * Git – version control * MySQL 8 or MariaDB or Postgres – database (MySQL in examples) * A local dev environment * Laravel Herd (macOS) or * Laravel Sail (Docker) – works everywhere
Tip: Herd/Sail bundle PHP, MySQL & Redis so you don't go dependency‑diving.
6. Creating the Project
# 1 – Install the Laravel CLI
composer global require laravel/installer
# 2 – Scaffold a new app with the React starter kit
laravel new historical-bible-app --kit=react
# 3 – Install JS deps & build assets
cd historical-bible-app
npm install && npm run build # production npm run dev # hot‑reload during dev
# 4 – Boot the backend (Herd) php artisan serve # alt: sail up -d
Visit http://localhost:8000 – you should see Laravel's welcome page.
What Just Happened?
Composer downloaded PHP libraries into
vendor/. * npm pulled JS packages intonode_modules/and Vite built them. * The starter kit published Auth scaffolding, a React entrypoint, and Tailwind config.
For no one can lay any foundation other than the one already laid, which is Jesus Christ. – 1 Corinthians 3 : 11 > (A timely reminder that solid foundations matter, apps included.)
7. Tour de Folder
app/ # Controllers, Jobs, Models (logic)
bootstrap/ # App bootstrapping & caching
config/ # One file per concern (database.php, queue.php…)
database/ ├─ migrations/ # Version‑controlled schema └─ seeders/ # Sample or reference data
resources/ ├─ js/ # React + Inertia pages or components └─ views/ # Blade templates (minimal here)
routes/ ├─ web.php # Browser routes └─ api.php # JSON API routes (if you need them)
public/ # index.php + compiled assets
Memorise this map, future‑you will thank present‑you.
8. Hello, World (React Edition)
Add a route in routes/web.php:
Route::get('/', function () { return Inertia::render('Welcome', [ 'message' => 'Shalom, world!' ]);
});
Then create resources/js/Pages/Welcome.tsx:
export default function Welcome({ message }: { message: string }) { return ( <div className="min-h-screen flex items-center justify-center"> <h1 className="text-4xl font-bold">{message}</h1> </div> );
}
Run npm run dev, refresh the browser, and rejoice.
9. Next Up
Now that the skeleton breathes, we'll:
Design our database & migrations for People, Events, and Locations. 2. Wire up authentication and basic CRUD screens. 3. Sprinkle in Maps & Timelines.
Stay tuned, and keep your artisan migrate fingers warmed up.
Happy coding, and may your commits be blessed!