Laravel Wayfinder is a recently introduced package designed to simplify the connection between Laravel backends and TypeScript frontends. By automatically generating fully-typed, importable TypeScript functions for controllers and named routes, Wayfinder enables developers to maintain a synchronized and type-safe workflow across the stack1.

Setting Up a New Laravel Project with Wayfinder

To get started, developers can create a new Laravel application with React support using the following command:

bashlaravel new wayfinder-blog --react

After navigating into the project directory and running the development server, the environment is ready for Wayfinder integration1.

Creating the Post Model and Migration

A Post model, along with its migration and factory, can be generated using:

bashphp artisan make:model Post -mf

The migration defines the structure of the posts table, including fields for user association, title, body, image, slug, excerpt, type, status, and SEO metadata. The factory is set up to generate sample post data, referencing the first user in the database1.

Running Migrations and Seeding Data

Before creating posts, a user must exist in the database. This can be accomplished with:

bashphp artisan tinker
App\Models\User::factory()->create()

Once a user is present, multiple posts can be generated:

bashApp\Models\Post::factory()->count(30)->create()

Building the Post Controller

A dedicated controller for posts is created with:

bashphp artisan make:controller PostController

This controller typically includes methods for listing all posts and displaying individual posts, returning JSON responses for API consumption1.

Defining Routes for Posts

Routes are added to the routes/web.php file to handle requests for listing and showing posts:

phpRoute::get('posts', [PostController::class, 'index'])->name('posts.index');
Route::get('posts/{post}', [PostController::class, 'show'])->name('posts.show');

Installing and Using Laravel Wayfinder

Wayfinder is installed via Composer:

bashcomposer require laravel/wayfinder

TypeScript definitions are generated with:

bashphp artisan wayfinder:generate

This process creates TypeScript files in the resources/js/actions directory, mapping backend controller methods to frontend functions. For example, the generated PostController.ts provides type-safe functions for fetching posts and individual post details1.

Integrating Wayfinder in the Frontend

Developers can import these generated functions directly into their React components. For instance, importing the show function from the PostController allows fetching a specific post by ID, ensuring the frontend always matches backend route definitions1.

If route patterns change, rerunning the Wayfinder generation command updates all TypeScript definitions automatically, eliminating manual adjustments and reducing the risk of mismatches.

Handling Forms with Wayfinder

Wayfinder also streamlines form handling. By generating form variants of controller actions, developers can easily bind form actions and methods in React components. For example, after adding a store method to the PostController and updating routes, running:

bashphp artisan wayfinder:generate --with-form

enables the use of store.form() to retrieve the correct form action and method for post creation forms. This approach ensures forms remain in sync with backend logic and routes1.

Example: Creating a Post from the Dashboard

A typical dashboard page can utilize the generated form helpers to create new posts. The form includes fields for title, body, and slug, and leverages CSRF protection. Validation errors and processing states are handled seamlessly within the React component, providing a smooth user experience1.

Conclusion

Laravel Wayfinder revolutionizes the way developers bridge backend and frontend code in full-stack applications. By automating the generation of fully-typed TypeScript functions for controllers and routes, it minimizes errors, accelerates development, and guarantees consistency between server and client. Whether building APIs or complex forms, Wayfinder delivers a robust, type-safe solution for modern Laravel projects

Read more such articles from our Newsletter here.