DEV Community: Muhammed Elfeqy

A Practical Guide to Using ReactJS with Inertia.js 2 and Laravel 11

Muhammed Elfeqy — Mon, 20 Jan 2025 21:07:32 +0000

ReactJS and Laravel are among the most popular tools for modern web development. Combining React’s dynamic user interfaces with Laravel’s robust backend makes for a highly efficient and scalable stack. Inertia.js acts as the glue that connects the two, offering a smooth way to build single-page applications (SPAs) without sacrificing the simplicity of server-side routing. This guide will walk you through setting up this stack from scratch, creating a CRUD application with file uploads, and enabling advanced features like server-side rendering (SSR).

Why Use React, Inertia.js, and Laravel Together?

Benefits:

1- Seamless SPA Development: Inertia allows you to build SPAs without an API layer, reducing boilerplate and simplifying development.

2- Dynamic UI with React: React’s component-based architecture makes building complex user interfaces a breeze.

3- Laravel’s Backend Strength: Laravel’s robust ecosystem provides tools like Eloquent ORM, routing, and task scheduling.

4- Enhanced Developer Experience: Inertia bridges the gap between client-side React and server-side Laravel, enabling effortless data sharing and page navigation.

5- Flexibility with SSR: Inertia’s SSR support ensures faster page loads and improved SEO.

Setting Up Your Environment

Before we dive into building the application, ensure you have the following installed:

Node.js: Latest stable version.
Composer: To manage PHP dependencies.
PHP 8.2+: Required for Laravel 11.
Laravel Installer: Optional but recommended.
Database: MySQL or PostgreSQL.

Step 1: Create a New Laravel Project

Run the following command to create a new Laravel 11 project:

composer create-project laravel/laravel laravel-inertia-react --prefer-dist
cd laravel-inertia-react

Step 2: Install Inertia.js

Inertia.js has both a server-side adapter for Laravel and client-side adapters for JavaScript frameworks like React.

Install the Laravel Adapter:

composer require inertiajs/inertia-laravel

Install the React Client Adapter:

npm install @inertiajs/react

Step 3: Configure Inertia Middleware

In Laravel 11, Inertia middleware is automatically registered. However, you may customize the middleware if necessary by editing app/Http/Middleware/HandleInertiaRequests.php.

Make sure the middleware is included in the bootstrap/app.php withMiddleware method:

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->web(append: [
            \App\Http\Middleware\HandleInertiaRequests::class,
        ]);

    })

Step 4: Install React and Vite

Laravel uses Vite for modern frontend tooling. Install React and its dependencies:

npm install react react-dom
npm install @vitejs/plugin-react

Update your vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});

Create the entry file at resources/js/app.jsx:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';

createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    setup({ el, App, props }) {
        const root = createRoot(el);
        root.render(<App {...props} />);
    },
});

Update your resources/views/app.blade.php layout:

<!DOCTYPE html>
<html>
<head>
    @vite('resources/js/app.jsx')
</head>
<body>
    @inertia
</body>
</html>

Step 5: Enable SSR

Install the SSR adapter for Inertia: Server-side rendering (SSR) is particularly beneficial in this stack as it improves SEO by providing search engines with fully-rendered pages. Additionally, SSR enhances initial load times for users, creating a smoother experience.

npm install @inertiajs/server

Update your vite.config.js to enable SSR:

ssr: {
    noExternal: ['@inertiajs/server']
},

Run the server:

php artisan serve
npm run dev

Building a CRUD Application

Let’s create a CRUD (Create, Read, Update, Delete) application to manage "Posts," complete with file uploads and validation. CRUD operations form the backbone of most web applications, enabling essential data management workflows. File uploads are included to demonstrate how to handle media or document uploads, a common feature in modern applications.

Step 1: Create the Database and Models

Update your .env file with your database credentials. Then, create the migration for the posts table:

php artisan make:model Post -m

Edit the migration file in database/migrations:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->string('file_path')->nullable();
        $table->timestamps();
    });
}

Run the migration:

php artisan migrate

Step 2: Create a Controller

Generate the controller for posts:

php artisan make:controller PostController

In PostController, implement CRUD methods:

use App\Models\Post;
use Illuminate\Http\Request;
use Inertia\Inertia;

class PostController extends Controller
{
    public function index()
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::all(),
        ]);
    }

    public function create()
    {
        return Inertia::render('Posts/Create');
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'content' => 'required|string',
            'file' => 'nullable|file',
        ]);

        $filePath = $request->file('file')?->store('uploads', 'public');

        Post::create(array_merge($validated, [
            'file_path' => $filePath,
        ]));

        return redirect()->route('posts.index');
    }

    public function edit(Post $post)
    {
        return Inertia::render('Posts/Edit', [
            'post' => $post,
        ]);
    }

    public function update(Request $request, Post $post)
    {
        $validated = $request->validate([
            'title' => 'required|string|max:255',
            'content' => 'required|string',
            'file' => 'nullable|file',
        ]);

        $filePath = $request->file('file')?->store('uploads', 'public');

        $post->update(array_merge($validated, [
            'file_path' => $filePath,
        ]));

        return redirect()->route('posts.index');
    }

    public function destroy(Post $post)
    {
        $post->delete();
        return redirect()->route('posts.index');
    }
}

Step 3: Define Routes

Update your routes/web.php file:

use App\Http\Controllers\PostController;

Route::resource('posts', PostController::class);

Step 4: Create React Pages

resources/js/Pages/Posts/Index.jsx:

import React from 'react';
import { Link, usePage } from '@inertiajs/react';

export default function Index() {
    const { posts } = usePage().props;

    return (
        <div>
            <Link href="/posts/create">Create Post</Link>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>
                        {post.title}
                        <Link href={`/posts/${post.id}/edit`}>Edit</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Other Components

For example, in resources/js/Pages/Posts/Create.jsx:

import React, { useState } from 'react';
import { useForm } from '@inertiajs/react';

export default function Create() {
    const { data, setData, post, errors } = useForm({
        title: '',
        content: '',
        file: null,
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        post('/posts');
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>Title</label>
                <input
                    type="text"
                    value={data.title}
                    onChange={(e) => setData('title', e.target.value)}
                />
                {errors.title && <div>{errors.title}</div>}
            </div>
            <div>
                <label>Content</label>
                <textarea
                    value={data.content}
                    onChange={(e) => setData('content', e.target.value)}
                ></textarea>
                {errors.content && <div>{errors.content}</div>}
            </div>
            <div>
                <label>File</label>
                <input
                    type="file"
                    onChange={(e) => setData('file', e.target.files[0])}
                />
                {errors.file && <div>{errors.file}</div>}
            </div>
            <button type="submit">Create</button>
        </form>
    );
}

Similarly, in resources/js/Pages/Posts/Edit.jsx:

import React, { useState } from 'react';
import { useForm } from '@inertiajs/react';

export default function Edit({ post }) {
    const { data, setData, put, errors } = useForm({
        title: post.title,
        content: post.content,
        file: null,
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        put(`/posts/${post.id}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>Title</label>
                <input
                    type="text"
                    value={data.title}
                    onChange={(e) => setData('title', e.target.value)}
                />
                {errors.title && <div>{errors.title}</div>}
            </div>
            <div>
                <label>Content</label>
                <textarea
                    value={data.content}
                    onChange={(e) => setData('content', e.target.value)}
                ></textarea>
                {errors.content && <div>{errors.content}</div>}
            </div>
            <div>
                <label>File</label>
                <input
                    type="file"
                    onChange={(e) => setData('file', e.target.files[0])}
                />
                {errors.file && <div>{errors.file}</div>}
            </div>
            <button type="submit">Update</button>
        </form>
    );
}

These examples provide basic forms for creating and editing posts, including error handling and file upload support.

Conclusion

This guide demonstrates how to set up a Laravel 11 and ReactJS application using Inertia.js 2. The stack simplifies SPA development, minimizes complexity, and allows for features like SSR. With this foundational setup, you can build dynamic and scalable web applications efficiently.

Streamlining Laravel Projects with Laravel Model Status

Muhammed Elfeqy — Sat, 18 Jan 2025 16:06:34 +0000

Managing user or model statuses is a common task in Laravel projects. Whether you're building a simple application or a large-scale system, adding and handling status columns often becomes repetitive and time-consuming. That's where Laravel Model Status comes in—a lightweight package designed to simplify this process and provide a seamless workflow for status management in Laravel models.

The Problem

In many Laravel projects, there’s often a need to manage the "status" of a model, such as marking users as active or inactive, or controlling whether certain entities are accessible. Typically, this involves:

Adding a status column to the database schema.
Writing scopes to filter models based on their status.
Adding middleware to restrict access for inactive users.
Repeating this logic across multiple projects.

This repetitive process consumes valuable development time and can introduce inconsistencies between projects.

The Solution: Laravel Model Status

Laravel Model Status was created to address this problem. The package provides a consistent and configurable way to manage statuses in Laravel models, while reducing redundancy and improving code readability.

Key Features

Configurable Status Column: Define the name, default value, and length of the status column via a configuration file.
Global Scope for Active Models: Automatically filter models to return only active records unless explicitly overridden.
Middleware for User Activity: Ensure only active users can access protected routes.
Activation and Deactivation Methods: Easily activate or deactivate models using built-in methods.
Custom Artisan Command: Create models and migrations with a status column and include the necessary trait automatically.

Installation

You can install the package via Composer:

composer require thefeqy/laravel-model-status

Configuration

After installation, publish the configuration file:

php artisan vendor:publish --tag=config

The configuration file allows you to customize the status column and its behavior:

return [
    'column_name' => 'status', // Name of the status column
    'default_value' => 'active', // Default value for the active state
    'inactive_value' => 'inactive', // Value for the inactive state
    'column_length' => 10, // Maximum length of the status column
];

Usage

Adding the Trait
To use the package, include the HasActiveScope trait in your model:

use Thefeqy\ModelStatus\Traits\HasActiveScope;

class ExampleModel extends Model
{
    use HasActiveScope;

    protected $fillable = ['name'];
}

Real-World Example: Product Management

Imagine you are building an e-commerce platform where products can be active or inactive, determining their visibility to customers. Let’s use the package to handle this efficiently.

Create the Model and Migration

Use the make:model-status command to create the Product model and migration with a status column:

php artisan make:model-status Product

This command will:

Create the Product model with the HasActiveScope trait.
Generate a migration with the configured status column.

Product Model

The generated model (app/Models/Product.php) will look like this:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Thefeqy\ModelStatus\Traits\HasActiveScope;

class Product extends Model
{
    use HasFactory, HasActiveScope;

    protected $fillable = ['name', 'price', 'description'];
}

Migration

The generated migration will include a status column:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->text('description')->nullable();
    $table->decimal('price', 10, 2);
    $table->string('status', 10)->default('active'); // Configurable status column
    $table->timestamps();
});

Run the migration:

php artisan migrate

Activating and Deactivating Products

The HasActiveScope trait provides methods to activate and deactivate models dynamically:

Activating a Product

$product = Product::find(1);
if ($product->activate()) {
    echo "Product activated successfully!";
} else {
    echo "Failed to activate product.";
}

Deactivating a Product

$product = Product::withoutActive()->find(1);
if ($product->deactivate()) {
    echo "Product deactivated successfully!";
} else {
    echo "Failed to deactivate product.";
}

Querying Products

Retrieve Only Active Products (Default Behavior)

$activeProducts = Product::all(); // Filters to only active products

Retrieve All Products (Including Inactive)

$allProducts = Product::withoutActive()->get();

Middleware Usage

The EnsureAuthenticatedUserIsActive middleware restricts access for inactive users. You can also use it to reactivate suspended accounts by guiding users to contact support.

Example Route Setup

Instead of registering a string alias, use the middleware class directly:

use Illuminate\Support\Facades\Route;
use Thefeqy\ModelStatus\Middleware\EnsureAuthorizedUserIsActive;

Route::middleware(['auth', EnsureAuthenticatedUserIsActive::class])->group(function () {
    Route::get('/dashboard', function () {
        return 'Welcome to your dashboard!';
    });
});

Behavior

Inactive users attempting to access routes:
- Are logged out.
- Receive a 403 Forbidden response with the message:

This account is suspended. Please contact the administrator.

Admin Panel Example: Managing Products

In the admin panel, administrators can view all products (including inactive ones) and toggle their status.

Controller Example:

namespace App\Http\Controllers;

use App\Models\Product;

class AdminProductController extends Controller
{
    public function index()
    {
        $products = Product::withoutActive()->get(); // Get all products
        return view('admin.products.index', compact('products'));
    }

    public function activate(Product $product)
    {
        if ($product->activate()) {
            return redirect()->back()->with('success', 'Product activated successfully!');
        }

        return redirect()->back()->with('error', 'Failed to activate product.');
    }

    public function deactivate(Product $product)
    {
        if ($product->deactivate()) {
            return redirect()->back()->with('success', 'Product deactivated successfully!');
        }

        return redirect()->back()->with('error', 'Failed to deactivate product.');
    }
}

GitHub Repository

The package is open-source and available on GitHub. Feel free to explore, contribute, or raise issues:
https://github.com/thefeqy/laravel-model-status

Conclusion

Laravel Model Status streamlines the process of managing model statuses in Laravel projects. Whether you’re working on an e-commerce platform, a user management system, or any other project requiring status handling, this package simplifies your workflow and ensures consistency across your applications.

Try it today and make status management effortless! 🚀