We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to build a fully-functional Medium clone using the Laravel PHP framework. Taught by The Codeholic, this in-depth, hands-on course takes you from setting up your Laravel environment to developing advanced features like user profiles, following/unfollowing other users, and managing blog posts. By the end, you'll not only understand Laravel's core features but also how to put them together to build a real-world social publishing platform.

The course kicks off with an introduction and a demo of the final app, then walks you through the entire development process. You'll learn how to set up a Laravel project, use Artisan (Laravel’s command-line tool), and configure your app. From there, you’ll implement user registration and login using Laravel Breeze, enable email verification, and work with Tinker to interact with your database.

Throughout the course, you'll explore key Laravel concepts such as models, migrations, factories, and seeders, and you'll make use of Blade templating, components, and layouts to build dynamic and reusable UI elements. You’ll also build critical features like post creation and editing, pagination, category filtering, image uploads and resizing, and user interactions such as liking posts and following other users.

By following along, you'll gain a deep understanding of Laravel’s MVC architecture, database relationships, form validation, and more.

Here is a list of sections in the course:

• Intro & Demo

• Setup Environment & Create Project

• Explore Directory Structure

• Introduce Artisan

• Laravel Configuration

• Create Basic Route

• Registration & Login (Laravel Breeze)

• Email Verification

• Tinker

• Models & Migrations

• Factories & Seeders

• Output Categories & Posts

• Pagination

• Blade Directives

• Components

• Layouts

• Create New Post

• Profile Update Page

• Post Details Page

• User's Public Profile Page

• Implement Follow/Unfollow

• Implement Like/Unlike Post

• Filtering posts by Category

• Show only posts from following users

• Image Resize

• Home Page Optimization

• Editing and Deleting Posts

• Make image optional during Update

• Show post owner in post item

• Use Published At field to publish posts

• Fix profile page avatar

• Conclusion

Check out the full course for free on the freeCodeCamp.org YouTube channel.

I created this course myself. I’ll teach you how to code a feature-rich Instagram clone from the ground up, leveraging the power of the Laravel framework and the flexibility of the MongoDB database.

Why Build an Instagram Clone?

Building a clone of a popular application like Instagram forces you to tackle real-world challenges: managing user accounts, handling media uploads, implementing social interactions like likes and comments, and structuring data efficiently. Completing such a project demonstrates a strong grasp of full-stack development principles and provides tangible proof of your abilities to potential employers or clients.

The Tech Stack

This tutorial pairs Laravel, a leading PHP framework, with MongoDB, a popular NoSQL database. This combination forms a very versatile technology stack for modern web development. It offers exceptional flexibility, scalability, and developer experience.

• Laravel: Laravel provides a robust structure for building web applications. It follows the Model-View-Controller (MVC) architectural pattern, promoting clean, organized, and maintainable code. Laravel significantly simplifies common web development tasks such as routing (directing web requests), authentication (handling user login and registration), and interacting with databases through its powerful Object-Relational Mapper (ORM), Eloquent.

• MongoDB: Unlike traditional SQL databases that use tables and predefined schemas, MongoDB is a document database. It stores data in flexible, JSON-like documents, making it incredibly adaptable. This is ideal for applications where data structures might evolve over time. MongoDB's schema-less nature allows you to easily add new fields (like adding a 'username' or 'bio' to a user profile after initial creation, as demonstrated in the tutorial) without complex database migrations.

Combining Laravel's structured development approach with MongoDB's flexible data storage provides the best of both worlds, especially for applications like an Instagram clone that manage diverse content types (profiles, posts, images, comments, likes) and their intricate relationships.

Key Concepts and Features

Throughout the tutorial, you will gain hands-on experience with:

1. Full-Stack Integration: Learn how the frontend (what the user sees and interacts with) and the backend (server-side logic and database) work together seamlessly.

2. Laravel Fundamentals: Master core Laravel concepts including the MVC pattern, defining routes (web.php), creating controllers to handle logic, building Eloquent models to interact with the database, and crafting user interfaces with the Blade templating engine.

3. MongoDB with Laravel: Discover how to configure Laravel to work with MongoDB, install necessary drivers and packages (like mongodb/laravel-mongodb), and utilize Eloquent models specifically adapted for MongoDB collections and documents. You'll learn how relationships (like a user having many posts, or a post having many comments) are handled in a NoSQL context within Laravel.

4. User Authentication & Profiles: Implement secure user registration and login functionality using Laravel's built-in features. Build user profiles, allowing users to update their information (name, username, bio) and upload profile pictures.

5. Core Social Features: Develop the essential functionalities of a social platform: creating posts with images and captions, displaying a feed of posts, implementing a like/unlike system, and adding/deleting comments on posts.

6. Image Handling: Learn how to manage file uploads, specifically storing user-uploaded images (for posts and profiles) using Laravel's file storage system, initially locally and understanding how to potentially extend this to cloud storage like AWS S3.

7. Database Management with MongoDB Atlas: Go beyond local development by learning how to set up a free cloud database cluster on MongoDB Atlas, configure security (users and network access), and connect your Laravel application to this cloud database – a crucial skill for deploying real-world applications.

8. Frontend Styling: Utilize Bootstrap 5 (via CDN) to style the application, creating a clean and responsive user interface that mimics the look and feel of Instagram.

Prerequisites

To get the most out of this tutorial, you should have a foundational understanding of:

• PHP basics

• Web fundamentals (HTML, CSS, basic JavaScript, HTTP concepts)

• Command-line usage

• You'll also need PHP, Composer (PHP package manager), and MongoDB installed on your local machine. The tutorial briefly covers installation pointers for different operating systems.

Ready to build your own Instagram clone and significantly boost your web development expertise? Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

Google Authentication is among the most trusted and convenient ways for users to log into a site using their Google account. And it means that they don’t have to remember yet another username and password.

Integrating Google OAuth into your Laravel application simplifies the login process, encourages user engagement, and boosts the credibility of your platform. In this tutorial, I’ll guide you through the steps of implementing Google Authentication in a Laravel application. We’ll go from setting up the Google API credentials to configuring Laravel’s Socialite package.

Table of Contents

• Prerequisites

• Benefits of Using Google Auth in a Laravel App

• How to Set Up Laravel Google Login

• Conclusion

Prerequisites

Before you begin, make sure you have the following prerequisites:

1. Laravel 11

2. A Google Developer account.

3. Basic knowledge of Laravel and authentication.

4. Composer for managing packages

Once you have these prerequisites ready, you’re all set to dive into integrating Google Authentication into your Laravel app.

Benefits of Using Google Auth in a Laravel App

There are many benefits to this set up. A few of them are:

• Simplified integration with Socialite

• Seamless user authentication

• Improved security

• Customizable user flow

• Improved scalability

• Solid ecosystem support

• Easier maintenance

How to Set Up Laravel Google Login

Whether you’re working on a personal project or a production-ready application, following these steps will help you smoothly integrate Google Authentication. Let’s get started.

Step 1: Set up a Google Cloud project

To use Google Authentication in your Laravel application, first you need to configure a Google Cloud project. Follow these steps to set up your project:

1. Visit the Google Cloud console and log in with your Google account.

   

2. Click on the “Select a Project” dropdown in the top navigation bar. In the popup, click on “New Project” to create a new project and provide the requested details. Then click on Create project.

   

3. Once you create the project, open the console’s left side menu and select APIs & Services > Credentials.

   

4. On the Credentials page, click Create Credentials > OAuth Client ID.

   

5. If this is your first time creating a client ID, it will ask you to configure the consent screen. You can configure your consent screen by clicking Configure Consent Screen. If you have already configured the consent screen, you can skip this step.

   • Select External if your app is for public use, or Internal if it’s limited to users within your Google Workspace organization.

     

   • Fill out the required details, like the app name, user support email, and any branding information. Click Save and Continue.

     

After configuring the consent screen, return to the Credentials page and select OAuth Client ID again.

6. Choose the Application Type as Web Application and provide a name for client credentials (for example, Laravel Social Login).

7. Under Authorized Redirect URIs, add the callback URL for your application:

   • Example: http://your-app-url.com/callback/google

   • If you're testing locally, use: http://127.0.0.1:8000/api/auth/google/callback

     

8. Click on Create, and Google will generate a Client ID and Client Secret for your project. Save these credentials, as they will be required in the next steps.

Step 2: Create a new Laravel project and Install the Laravel Socialite package

If you don’t have one ready, you can create a new Laravel project using the below command:

composer create-project --prefer-dist laravel/laravel social-auth-example

To integrate Google Authentication into a Laravel project, we’ll use Laravel Socialite. Socialite is a first-party Laravel package that simplifies OAuth authentication with popular services like Google, Facebook, Twitter, and more.

To install Socialite, open your terminal in the root directory of your Laravel project and run the following command:

composer require laravel/socialite

Step 3: Configure environment variables

In this step, we will configure our Laravel application to use the Google OAuth credentials that we collected in Step 1.

Locate your .env file in the root directory of your project and add the following environment variables:

GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
GOOGLE_REDIRECT_URL=http://your-domain.com/auth/google/callback

Go ahead and replace all placeholders with secrets.

Let's understand each environment variable one by one:

• GOOGLE_CLIENT_ID: A unique identifier for your app, provided by Google.

• GOOGLE_CLIENT_SECRET: A private key used by your app to authenticate itself securely with Google’s API.

• GOOGLE_REDIRECT_URL: The URL where Google redirects users after they log in. This should match the redirect URI you specified when creating the credentials in Step 1.

Step 4: Update the config files

To enable Laravel Socialite to use Google OAuth credentials, we need to configure the provider details in the config/services.php file.

In the services.php file, add the following configuration for the Google provider:

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),        // Your Google Client ID
    'client_secret' => env('GOOGLE_CLIENT_SECRET'), // Your Google Client Secret
    'redirect' => env('GOOGLE_REDIRECT_URL'),      // Your Google Redirect URL
]

Step 5: Create controllers and routes for authentication.

In this step, we will create a controller to handle Google OAuth redirection and callbacks and set up the necessary routes to trigger these methods.

Run the following Artisan command to generate the GoogleAuthController controller:

php artisan make:controller GoogleAuthController

This will create a controller at app/Http/Controllers/GoogleAuthController.php.

Replace the contents of the newly created GoogleAuthController.php with the following code:

<?php

namespace App\\Http\\Controllers;

use App\\Http\\Controllers\\Controller;
use App\\Models\\User;
use Laravel\\Socialite\\Facades\\Socialite;
use Illuminate\\Support\\Facades\\Auth;
use Illuminate\\Support\\Str;
use Throwable;

class GoogleAuthController extends Controller
{
    /**
     * Redirect the user to Google’s OAuth page.
     */
    public function redirect()
    {
        return Socialite::driver('google')->redirect();
    }

    /**
     * Handle the callback from Google.
     */
    public function callback()
    {
        try {
            // Get the user information from Google
            $user = Socialite::driver('google')->user();
        } catch (Throwable $e) {
            return redirect('/')->with('error', 'Google authentication failed.');
        }

        // Check if the user already exists in the database
        $existingUser = User::where('email', $user->email)->first();

        if ($existingUser) {
            // Log the user in if they already exist
            Auth::login($existingUser);
        } else {
            // Otherwise, create a new user and log them in
            $newUser = User::updateOrCreate([
                'email' => $user->email
            ], [
                'name' => $user->name,
                'password' => bcrypt(Str::random(16)), // Set a random password
                'email_verified_at' => now()
            ]);
            Auth::login($newUser);
        }

        // Redirect the user to the dashboard or any other secure page
        return redirect('/dashboard');
    }
}

This controller contains two functions:

1. Redirect: Redirects the user to Google’s OAuth Page.

2. Callback: Handles the callback from Google and redirects the user to the dashboard or any other secure page.

Let’s define the routes of redirect and callback in the routes/web.php file:

use App\\Http\\Controllers\\GoogleAuthController;

// Route to redirect to Google's OAuth page
Route::get('/auth/google/redirect', [GoogleAuthController::class, 'redirect'])->name('auth.google.redirect');

// Route to handle the callback from Google
Route::get('/auth/google/callback', [GoogleAuthController::class, 'callback'])->name('auth.google.callback');

Step 6: Test Laravel Google authentication in your project.

We’ve set up Google authentication, so now it’s time to test it to make sure it works seamlessly. In this step, we’ll use a login button that redirects the user to Google’s authentication page and returns them to a protected route upon successful login.

First, we will add the following button that gives users the option to Login With Google:

<a href="{{ route('auth.google.redirect') }}" class="btn bg-blue-100 p-3 shadow-sm border rounded-md text-blue-900">
    Login with Google 
</a>

For testing purposes, I have defined a protected route and a dashboard. This route will only be accessible to authenticated users. After logging in, we will redirect users to this page. Let’s define this route in web.php:

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth')->name('dashboard');

Next, create a blade view file for the dashboard at resources/views/dashboard.blade.php. Here’s the contents of the dashboard:

<html>
    <head>
        <title>Dashboard</title>
    </head>

    <body>
        <h1>Dashboard</h1>
        <p>Welcome to the dashboard, {{ auth()->user()->name }}!</p>
    </body>

</html>

Here, we’re using the auth()->user() helper to display the logged-in user’s name, which is fetched from the Google account they used to sign in.

Now, Let’s try to log in.

This is the login page:

Clicking on the button will redirect you to Google’s consent screen:

Click on the continue, and you should be logged in to the app. You will be redirected to a screen like below. You can see the welcome message with the user’s name.

That’s it! You’ve successfully implemented and tested Google Authentication in your Laravel project. Now your users can sign in using their Google accounts, enhancing both security and convenience.

To refer to the full implementation, you can find the complete source code for this project on GitHub here: Google Login Integration for Laravel - GitHub Repository

Conclusion

You’ve now set up Google authentication in your Laravel application using Socialite! You can extend this method to include other OAuth providers like Facebook, Twitter, or GitHub by adding additional configurations to the config/services.php file.

Google OAuth integration is a common feature for modern web applications, and Laravel Socialite makes it easy to implement.

In case you need more social login options like GitHub, Twitter, and Facebook, then you can consider ready-to-use Laravel SaaS boilerplates.

Most of the pre-built Laravel SaaS boilerplates offer seamless integration with popular platforms such as Google, GitHub, Facebook, and Twitter. For example, there are some premium and open source resources like:

• Laravel Starter Kit (Premium)

  • Based on Tailwind CSS

  • Comes with One Click Magic Link Setup

  • Supports various authentication methods including the traditional email/password login

  • 2FA Authentication

• SaaS Boilerplate (Open Source)

  • Single Database Multi-tenancy

  • Developer Panel

  • Manage Personal Access Tokens

• Laranuxt (Open Source)

  • Nuxt UI a collection of components built by the NuxtJS team, powered by Tailwind CSS

  • Authentication library to assist with user sessions and logging in/out

  • Example Authentication Middleware

• Laravel Vue Boilerplate (Open Source)

  • WebSockets with Laravel Echo and Pusher.

  • Workbox for better PWA development.

  • Laravel GraphQL

Using one of these Laravel SaaS boilerplates can speed up your workflows as you don’t need to set up everything from scratch.

Special thanks to Deep Kumbhare, an experienced Laravel Developer and enthusiast, who has helped me with preparing this article.

I hope this article helps you with setting up Google Login with Laravel.

We've seen Blitz for NextJS, Adonis for NodeJS, RedwoodJS, and more. All these frameworks tried to build a Laravel for JavaScript.

But none of them were really successful. Why? We'll figure it out in this article. It's worth going over because beginners learning JavaScript struggle to find an all-in-one solution.

This means it can be tough to choose a framework (or library) in JavaScript when you have so many choices – like React, Vue, Angular, Svelte, NextJS, Meteor, and more.

Meanwhile, PHP offers one simple solution: Laravel. It's a one-stop shop with many frameworks and libraries combined into one. But is it the right option for you?

In this article, I'll dive deeper into why the JavaScript ecosystem doesn't have a Laravel-like framework and whether you should switch to PHP for a one-stop solution like Laravel.

I will discuss the advantages and disadvantages of using JavaScript frameworks compared to a one-stop solution like Laravel and end it with a comparison table to help you decide.

What we'll cover in this article:

1. Why JavaScript vs Laravel

2. Why JavaScript lacks an all-in-one solution

3. Benefits of JavaScript frameworks and libraries

4. Benefits of Laravel

5. Differences between Laravel and JS tools

Why JavaScript vs Laravel

When beginners decide to learn Web Development, they often choose between JavaScript/TypeScript and PHP. Other solutions require more expertise, so most beginners gravitate towards these two languages.

Many JavaScript beginners eventually find its vast ecosystem overwhelming, whereas PHP learners often feel constrained by the limited frameworks and lack of advanced capabilities.

To deal with that confusion, I am comparing the tools available for JavaScript and PHP, not the languages directly. Since PHP has an all-in-one solution most developers use, I'll use Laravel for the comparison.

JavaScript lacks a single all-in-one solution or a specific representative framework. Therefore, I'll refer to tools like React, Vue, Angular, and so on as "JavaScript Frameworks."

Let's begin by understanding why the JavaScript ecosystem lacks a Laravel-like framework.

Why JavaScript Lacks an All-in-One Solution

I'll begin by acknowledging that JavaScript developers have tried in the past to make a Laravel for JavaScript.

Start with RedwoodJS. It's an open-source full-stack JavaScript framework started by Tom Preston-Werner, the co-founder and former CEO of GitHub. It helps developers build their applications and ship faster.

Redwood has many innovative solutions packed into one framework. Sounds familiar? That's precisely like Laravel. Do you see anyone shipping using Redwood? Most likely not.

The next option is Blitz. It makes the same promise as Redwood: a replacement for NextJS. Blitz is an all-in-one solution with custom built-in solutions for authentication, database, and so on.

But Blitz doesn't allow developers to choose what they want to use, like Laravel. It has custom solutions crafted by the core team. Developers cannot replace any solution piece with some other recommended solution.

Customization is a point worth noting in the JavaScript ecosystem, and I'll explain why as we uncover more frameworks. But Blitz didn't succeed either.

Then, there's AdonisJS. But, I think you get the point. Each all-in-one solution in JavaScript has tried to implement their version of Laravel – and none of them really took hold.

Blitz, Adonis, and Redwood followed a theme: a full-stack framework of ready-made non-customizable solutions for JavaScript developers to build applications.

These frameworks didn't gain popularity because they didn't meet the needs of the developers they aimed to serve.

The JavaScript ecosystem is unique, offering many solutions for the same problem. There's a reason for this diversity, and why those frameworks didn't succeed.

Let's discuss the reasons and benefits of the current popular JavaScript tools, as they directly impact the choice between JavaScript frameworks and Laravel. As I outline each benefit, consider whether it aligns with your needs.

Benefits of JavaScript Frameworks and Libraries

JavaScript frameworks and libraries are collections of pre-written resources, techniques, and functions created by developers to save time and effort.

These frameworks began emerging in the 2000s, with notable ones like React, Svelte, Angular, NextJS, and Vue standing out over time.

Source: Raygun

However, having more options doesn't necessarily mean greater effectiveness. Below, we’ll explore the benefits of using JavaScript frameworks and why all-in-one solutions haven't succeeded in the JavaScript ecosystem.

Versatility

It's easier to switch or choose one solution over the other in the JavaScript ecosystem. For example, to implement authentication, we have Clerk, Auth0, AuthJS, NextAuth, Supabase, and more.

The JavaScript ecosystem always had multiple options for a specific solution and startups dedicated to providing bespoke solutions. If you didn't like Clerk, you could use NextAuth for more customization.

JavaScript frameworks are highly versatile. When there are ten solutions for one problem, developers can easily switch and see what works for them.

Blitz and other frameworks couldn't succeed for this reason. If a developer disliked Blitz's approach to authentication, they would just switch to another solution.

NPM

Unlike JavaScript, other languages don't have an ecosystem around building tools for others, like libraries or packages. It's not as easy in those languages.

The JavaScript ecosystem has an entire registry filled with packages and libraries for the smallest solutions, like emails. JavaScript has many packages, frameworks, and libraries for each solution.

Source: Kinsta

Ironically, even the NPM registry has competitors. There are multiple other registries with unique packages and features. JavaScript follows the versatility rule everywhere, but does that indicate reliability? Maybe not.

Startups

Each solution for a specific problem is likely a startup funded by VC firms and Angel Investors.

JavaScript-based startups have the capital and the resources to conduct in-depth research and hire the best talent to build bespoke solutions for a targeted problem.

With unlimited resources allocated to a specific topic or problem, the solutions are specific and cater to different needs to their developers.

In return, JavaScript developers pay these startups for those solutions and startups are incentivised to create better solutions for the ecosystem.

The Common Dev

Any developer in the JavaScript ecosystem can identify a problem during their experience using a specific technology, build a solution, and offer it as a product.

JavaScript developers have the liberty to build and sell their solutions because startups push the idea of paying for bespoke solutions and developers have no problem doing that.

Take Marc Lou as an example. He built ShipFast and other products that churn over $100,000 per month. He is an example of the possibilities in the field.

But perhaps these benefits and reasons seem intangible to you. Don’t worry—the web development domain offers more than one alternative. Let’s explore Laravel.

Laravel

Laravel is a framework for the PHP programming language. Taylor Otwell introduced Laravel in 2011.

Source: Cloudways

Laravel offers many solutions packed into one tool, and can be a one-stop solution for everything. It offers authentication, debugging, serverless deployment, user-friendly form systems, starter kits, and so on.

The solutions provided by Laravel are many, but without the core language, they don't mean anything. Laravel is all about PHP.

PHP is a general-purpose scripting language. Rasmus Lardof introduced it to developers in the 1990s. Since then, the language has evolved with significant updates in 2004, 2015, and 2020.

Source: Gecko Dynamics

Before JavaScript frameworks had taken off, developers used PHP with JavaScript.

Laravel is a back-end framework and PHP focuses on the server-side. JavaScript without a framework is a client-side language at its core.

Developers traditionally used JavaScript on the client-side and PHP on the server-side to create full-fledged applications.

However, the tech stack landscape shifted when Laravel gained popularity and frameworks like React began to dominate the JavaScript ecosystem.

Many developers worldwide, especially from countries like India, are doubling down on PHP because of its robust and reliable nature.

Government websites and large infrastructures use Laravel (PHP) because it supports a variety of solutions in one place. Many developers don't want to combine and switch technologies.

Companies and individuals using PHP or Laravel want to ship quickly, make changes, and avoid learning a new library or technology at every step of the way like JavaScript.

PHP only has JavaScript as its direct rival that challenges its existence. However, JavaScript isn't the best for many situations. Let's see how Laravel performs better.

Benefits of Laravel

One-Stop Solution

Laravel is an all-in-one framework. It contains everything a developer would reasonably require to build compact, reliable, and robust solutions.

You don't need to spend time searching for various libraries and frameworks that may or may not integrate well with your foundational technology—it's all built-in for you.

If speed of deployment is your priority, Laravel is the ideal choice.

Moreover, for PHP developers using Laravel, there's less need to learn new libraries, syntax, and more because everything is integrated seamlessly.

Less Wasted Time

The PHP ecosystem has fewer solutions for specific problems. It's difficult to identify a specific solution for a specific problem.

Developers rather choose an all-in-one solution than invest time in finding bespoke solutions for specific problems.

That's where the PHP ecosystem shines because developers don't spend a lot of time trying out different options. They already have everything in one place.

If there's a new project, their go-to choice is Laravel. In the JavaScript land, if a developer isn't using an existing solution or tech stack, they are likely finding a new one or creating one.

Stable and Robust

Web Applications created using PHP are robust because the framework is battle-tested. You can create anything using it.

You could sabotage the entire application if you mess up with one choice of library or framework in a JavaScript project. But it's not the same with Laravel.

Since Laravel has fewer solutions, the chances of sabotaging are reduced to the bare minimum.

No Catching Up

With Laravel, you don't need to catch up with new technologies and frameworks frequently. You can learn one framework, library, or skill and consider it useful for a long time.

It's the opposite in JavaScript. Unlike JS, Laravel has more stable and less frequent updates.

The PHP ecosystem receives fewer updates so developers can reliably use the existing features without worrying about another framework or library providing a better solution or another version.

A new framework or library doesn't pop up each week. You don't need to follow up on versions frequently.

A Massive Community

Laravel was first launched a decade ago. It has gained popularity over time and invited many developers to create communities and share ideas.

Every PHP developer uses Laravel. If you ever need any help, you always have developers helping you.

Free Solutions

Most PHP frameworks and libraries are open-source and free to access. Startups are rare in the PHP ecosystem.

If a developer is offering any bespoke solutions, most are public, especially free.

Any PHP developer can refer to those open-source free solutions, contribute to them, and extend those solutions further.

Differences Between Laravel and JS Tools

You can create any type of application using both of these technologies. But the experience won't be exactly the same, of course. Here are some of the differences:

And that's it! I hope you enjoyed the article and learned something new. If you want, you can also follow me on Twitter (X) or LinkedIn. Also, I've built a Notion Dashboard for Software Engineers to ace their coding interviews.

Reverb is a separate open-source package that's a first-party WebSocket server for Laravel applications. It helps facilitate real-time communication between client and server.

Before this new package, Laravel had event broadcasting, but basically it didn't have a built-in way to set up a self-hosted WebSocket server. Fortunately, Reverb now gives us that option.

Laravel Reverb has a few key features: it's written in PHP, it's fast, and and it's scalable. It was developed in particular to be horizontally scalable.

Reverb basically allows you to run an application on a single server – but if the application starts to outgrow that server, you can add multiple additional servers. Then those servers can all communicate with each other to distribute the messages between themselves.

In this article you will learn how to build a real-time chat application using Laravel Reverb. This will let you easily implement WebSocket communications between your backend and frontend.

For a frontend technology, you can use anything you want – but in this case we'll use React.js with the Vite.js build tool.

By the end of this article, you'll have a full-stack, real-time app in your local machine, which will work like this:

Demo of the app showing messaging between two logged in users

Table of Contents

• Prerequisites
• General Steps
• How to Install Laravel
• How to Create the Model and Migration
• How to Add Authentication
• How to Set Up Routes
• How to Set Up a Laravel Event
• How to Set Up a Laravel Queue Job
• How to Write the Controller Methods
• How to Install Laravel Reverb
• How to Setup WebSocket Channels
• How to Customize Laravel Views
• Let's Work on the Front End
• Running the Application
• Useful Reverb Resources
• Conclusion

Prerequisites

You'll need the following tools for the app that we'll build in this article:

• PHP: version 8.2 or above (run php -v to check the version)
• Composer (run composer to check that it exists)
• Node.js: version 20 or above (run node -v to check the version)
• MySQL: version 5.7 or above (run mysql --version to check if it exists, or follow the docs to install it)

General Steps

The main steps in this article will be:

• Installing Laravel 11.
• Adding authentication flow to it (authentication scaffolding). Laravel provides a basic starting point for this using Bootstrap with React / Vue.
• Installing Reverb.
• React.js components and event listening in the frontend.

How to Install Laravel

To start, install Laravel 11 by using the composer command:

composer create-project laravel/laravel:^11.0 laravel-reverb-react-chat && cd laravel-reverb-react-chat/

At this point, you can check out the app by running the serve command:

php artisan serve

How to Create the Model and Migration

You can generate a model and a migration for the messages by using this single command:

php artisan make:model -m Message

Then you'll need to set up the Message's model with the following code:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Message extends Model
{
    use HasFactory;

    public $table = 'messages';
    protected $fillable = ['id', 'user_id', 'text'];

    public function user(): BelongsTo {
        return $this->belongsTo(User::class, 'user_id');
    }

    public function getTimeAttribute(): string {
        return date(
            "d M Y, H:i:s",
            strtotime($this->attributes['created_at'])
        );
    }
}

As you can see, there's a getTimeAttribute() accessor that will format the message creation timestamp into a human-readable date and time format. It will show it on the top of each message in the chat box.

Next, set up the migration for the messages database table with this code:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void {
        Schema::create('messages', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained();
            $table->text('text')->nullable();
            $table->timestamps();
        });
    }

    public function down(): void {
        Schema::dropIfExists('messages');
    }
};

This migration creates a messages table in the database. The table contains columns for an auto-incrementing primary key (id), a foreign key (user_id) referencing the id column of the users table, a text column for storing the message content, and timestamps to automatically track the creation and modification times of each record.

The migration also includes a rollback method (down()) to drop the messages table if needed.

In this article, we'll use the MySQL database, but you can go with SQLite as the default one if you prefer. Just make sure to set up your database credentials in .env file correctly:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=username
DB_PASSWORD=password

After setting up the environment variables, optimize the cache:

php artisan optimize

Run migrations to recreate the database tables as well as to add the messages table:

php artisan migrate:fresh

How to Add Authentication

Now, you can add authentication scaffolding to your app. You can use Laravel's UI package to import some asset files. First you'll need to install the appropriate package:

composer require laravel/ui

Then import the React-related assets into the application:

php artisan ui react --auth

It may ask to overwrite the app/Http/Controllers/Controller.php, and you can go ahead and allow it:

The [Controller.php] file already exists. Do you want to replace it? (yes/no) [no]

This will do all of the authentication scaffolding compiled and installed, including routes, controllers, views, vite configurations, and a simple React-specific sample.
At this point, you're just one step away from the app being ready to go.

NOTE: Make sure you have Node.js (with npm) version 20 or above installed. You can check that by running the node -v command. Otherwise, just go ahead and install it using the official page.

npm install && npm run build

The command above will install NPM packages and build frontend assets. Now you can start the Laravel application and check out your fully ready app sample:

php artisan optimize && php artisan serve

A screenshot of the Register page

It's also important to note that you can separately run the dev command instead of using build every time when you're making changes to frontend files:

npm run dev

See the details in the package.json file, in the scripts field.

How to Set Up Routes

In this real-time chat app, you'll need to have a few routes:

• home for the home page (already should be added)
• message for adding a new message
• messages to get all the existing messages

You'll have these kind of routes in the web.php file:

<?php

use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;

Route::get('/', function () { return view('welcome'); });

Auth::routes();

Route::get('/home', [HomeController::class, 'index'])
    ->name('home');
Route::get('/messages', [HomeController::class, 'messages'])
    ->name('messages');
Route::post('/message', [HomeController::class, 'message'])
    ->name('message');

After setting up those routes, let's use Laravel Events and Queue Jobs advantages.

How to Set Up a Laravel Event

You need to create a GotMessage event for listening for a specific event:

php artisan make:event GotMessage

Laravel's events provide a simple observer pattern implementation, allowing you to subscribe and listen for various events that occur within your application. Event classes are typically stored in the app/Events directory. (Docs)

Set up a private WebSocket channel in the broadcastOn method for all the authenticated users to receive messages in real time. In this case, we will call it "channel_for_everyone", but you can also make it dynamic, depending on the user, like "App.Models.User.{$this->message['user_id']}".

<?php

namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class GotMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(public array $message) {
        //
    }

    public function broadcastOn(): array {
        // $this->message is available here
        return [
            new PrivateChannel("channel_for_everyone"),
        ];
    }
}

As you can see, there's a public $massage property as a constructor argument, so you can get message infromation in the front end.

We've already used the channel name in the channels file, and we'll use it in the front end as well for real-time message updates.

Don't forget to implement the ShouldBroadcast interface in the event's class.

How to Set Up a Laravel Queue Job

Now it's time to create the SendMessage job for sending messages:

php artisan make:job SendMessage

Laravel allows you to easily create queued jobs that may be processed in the background. By moving time intensive tasks to a queue, your application can respond to web requests with blazing speed and provide a better user experience to your customers. (Docs)

<?php

namespace App\Jobs;

use App\Events\GotMessage;
use App\Models\Message;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;

class SendMessage implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public function __construct(public Message $message) {
        //
    }

    public function handle(): void {
        GotMessage::dispatch([
            'id' => $this->message->id,
            'user_id' => $this->message->user_id,
            'text' => $this->message->text,
            'time' => $this->message->time,
        ]);
    }
}

The SendMessage.php queue job is responsible for dispatching the GotMessage event with information about a newly sent message. It receives a Message object upon construction, representing the message to be sent.

In its handle() method, it dispatches the GotMessage event with details such as the message ID, user ID, text, and timestamp. This job is designed to be queued for asynchronous processing, enabling efficient handling of message sending tasks in the background.

As you can see, there's a public $massage property as a constructor argument, which we'll use to attach a message information to the queue job.

How to Write the Controller Methods

For the defined routes, here are the appropriate controller methods:

<?php

namespace App\Http\Controllers;

use App\Jobs\SendMessage;
use App\Models\Message;
use App\Models\User;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function __construct() {
        $this->middleware('auth');
    }

    public function index() {
        $user = User::where('id', auth()->id())->select([
            'id', 'name', 'email',
        ])->first();

        return view('home', [
            'user' => $user,
        ]);
    }

    public function messages(): JsonResponse {
        $messages = Message::with('user')->get()->append('time');

        return response()->json($messages);
    }

    public function message(Request $request): JsonResponse {
        $message = Message::create([
            'user_id' => auth()->id(),
            'text' => $request->get('text'),
        ]);
        SendMessage::dispatch($message);

        return response()->json([
            'success' => true,
            'message' => "Message created and job dispatched.",
        ]);
    }
}

• In the home method, we'll get the logged in user's data from the database using the User model and send it to the blade view.
• In the messages method, we'll retrieve all the messages from the database using the Message model, attach the user relationship data to it, append the time field (accessor) to each item, and send all that to the view.
• In the message method, a new message will be created in the database table by using the Message model, and the SendMessage queue job will be dispatched.

How to Install Laravel Reverb

Now we've come to the most important moment: it's time to install Reverb in your Laravel app.

It's so easy. All the necessary packaging and configuration setup can be done using this single command:

php artisan install:broadcasting

It will ask you to install Laravel Reverb as well as install and build the Node dependencies required for broadcasting. Just press enter to continue.

After the command execution, make sure you've automatically added reverb-specific environment variables to the .env file, like:

BROADCAST_CONNECTION=reverb

###

REVERB_APP_ID=795051
REVERB_APP_KEY=s3w3thzezulgp5g0e5bs
REVERB_APP_SECRET=gncsnk3rzpvczdakl6pz
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

You'll also have two new configration files in the config directory:

• reverb.php
• broadcasting.php

How to Setup WebSocket Channels

Lastly, you'll need to add a channel in the channels.php file. It should already be created after installing Reverb.

<?php

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('channel_for_everyone', function ($user) {
    return true;
});

You'll have only one channel. You can change the channel's name and make it dynamic – it's up to you. In the closure of the channel, we'll always return true, but you can modify it later to make some restrictions regarding the channel's subscription.

Optimize caches one more time:

php artisan optimize

How to Customize Laravel Views

Now your back end should be ready at this point, so you can switch to the front end.

Before working on the React stuff, you'll want to set up Laravel *.blade.php views. In the home blade view, make sure to have the root div with an ID of main to render all the React components there.

@extends('layouts.app')

@section('content')
    <div class="container">
        <div id="main" data-user="{{ json_encode($user) }}"></div>
    </div>
@endsection

The div with ID of main gets a data property for holding the $user info sent from the controller's home method.

I won't put the whole resources/views/welcome.blade.php content here, but you can just make the following small changes to it:

• Replace url('/dashboard') with url('/home');
• Replace Dashboard with Home;
• Remove main and footer sections.

Let's Work on the Front End

In Reverb, event broadcasting is done by a server-side broadcasting driver that broadcasts your Laravel events so that the front end can receive them within the browser client.

In the front end, Laravel Echo does that job under the hood. Echo a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by your server-side broadcasting driver.

You can find the WebSocket configurations setup with Echo in the rources/js/echo.js file, but you don't need to do anything there for this project.

Let's create a few React components so that we have a refactored and more readable project.

Create a Main.jsx component in the new components folder:

import React from 'react';
import ReactDOM from 'react-dom/client';
import '../../css/app.css';
import ChatBox from "./ChatBox.jsx";

if (document.getElementById('main')) {
    const rootUrl = "http://127.0.0.1:8000";

    ReactDOM.createRoot(document.getElementById('main')).render(
        <React.StrictMode>
            <ChatBox rootUrl={rootUrl} />
        </React.StrictMode>
    );
}

Here we'll check if there's an element with the id 'main'. If it exists, it proceeds with rendering the React application.

As you can see, there's a ChatBox component. We'll learn more about it soon.

Remove the resources/js/components/Example.jsx file, and import the Main.jsx component in the app.js:

import './bootstrap';
import './components/Main.jsx';

Create Message.jsx and MessageInput.jsx files so you can use them in the ChatBox component.

The Message component will get userId and message arguments (fields) to show each message in the chat box.

import React from "react";

const Message = ({ userId, message }) => {
    return (
        <div className={`row ${
        userId === message.user_id ? "justify-content-end" : ""
        }`}>
            <div className="col-md-6">
        <small className="text-muted">
                    <strong>{message.user.name} | </strong>
                </small>
                <small className="text-muted float-right">
                    {message.time}
                </small>
                <div className={`alert alert-${
                userId === message.user_id ? "primary" : "secondary"
                }`} role="alert">
                    {message.text}
                </div>
            </div>
        </div>
    );
};

export default Message;

The Message.jsx component renders individual messages within the chat interface. It receives the userId and message props. Based on whether the message sender matches the current user, it aligns the message to the appropriate side of the screen.

Each message includes the sender's name, timestamp, and the message content itself, styled differently based on whether the message is sent by the current user or another user.

The MessageInput component will care about creating a new message:

import React, { useState } from "react";

const MessageInput = ({ rootUrl }) => {
    const [message, setMessage] = useState("");

    const messageRequest = async (text) => {
        try {
            await axios.post(`${rootUrl}/message`, {
                text,
            });
        } catch (err) {
            console.log(err.message);
        }
    };

    const sendMessage = (e) => {
        e.preventDefault();
        if (message.trim() === "") {
            alert("Please enter a message!");
            return;
        }

        messageRequest(message);
        setMessage("");
    };

    return (
        <div className="input-group">
            <input onChange={(e) => setMessage(e.target.value)}
                   autoComplete="off"
                   type="text"
                   className="form-control"
                   placeholder="Message..."
                   value={message}
            />
            <div className="input-group-append">
                <button onClick={(e) => sendMessage(e)}
                        className="btn btn-primary"
                        type="button">Send</button>
            </div>
        </div>
    );
};

export default MessageInput;

The MessageInput component provides a form input field for users to type messages and send them in the chat interface. By clicking the button, it triggers a function to send the message to the server via an Axios POST request to the specified rootUrl that it got from the parent ChatBox component. It also handles validation to ensure that users cannot send empty messages. You can customize it later if you want.

Now create a ChatBox.jsx component to have the front end ready:

import React, { useEffect, useRef, useState } from "react";
import Message from "./Message.jsx";
import MessageInput from "./MessageInput.jsx";

const ChatBox = ({ rootUrl }) => {
    const userData = document.getElementById('main')
        .getAttribute('data-user');

    const user = JSON.parse(userData);
    // `App.Models.User.${user.id}`;
    const webSocketChannel = `channel_for_everyone`;

    const [messages, setMessages] = useState([]);
    const scroll = useRef();

    const scrollToBottom = () => {
        scroll.current.scrollIntoView({ behavior: "smooth" });
    };

    const connectWebSocket = () => {
        window.Echo.private(webSocketChannel)
            .listen('GotMessage', async (e) => {
                // e.message
                await getMessages();
            });
    }

    const getMessages = async () => {
        try {
            const m = await axios.get(`${rootUrl}/messages`);
            setMessages(m.data);
            setTimeout(scrollToBottom, 0);
        } catch (err) {
            console.log(err.message);
        }
    };

    useEffect(() => {
        getMessages();
        connectWebSocket();

        return () => {
            window.Echo.leave(webSocketChannel);
        }
    }, []);

    return (
        <div className="row justify-content-center">
            <div className="col-md-8">
                <div className="card">
                    <div className="card-header">Chat Box</div>
                    <div className="card-body"
                         style={{height: "500px", overflowY: "auto"}}>
                        {
                            messages?.map((message) => (
                                <Message key={message.id}
                                         userId={user.id}
                                         message={message}
                                />
                            ))
                        }
                        <span ref={scroll}></span>
                    </div>
                    <div className="card-footer">
                        <MessageInput rootUrl={rootUrl} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ChatBox;

The ChatBox component manages a chat interface within the application. It fetches and displays messages from a server using WebSocket and HTTP requests.

The component renders a list of messages, a message input field, and automatically scrolls to the bottom when new messages arrive.

It defines a WebSocket channel for real-time message updates. You need to set up that channel by using the same name as it was written in the routes/hannels.php and in the app/Events/GotMessage.php queue job.

Also, the leave() function is called within the useEffect cleanup function to unsubscribe from the WebSocket channel when the component unmounts. This prevents memory leaks and unnecessary network connections by stopping the component from listening to updates on the WebSocket channel after it's no longer needed.

Running the Application

Now, everything's ready and it's time to check out the app. Follow these instructions:

A screenshot from the terminal with all the necessary commands

• Build frontend assets (this is not a "forever" running command):
  npm run build
• Start listening to the Laravel events:
  php artisan queue:listen
• Start the WebSocket server:
  php artisan reverb:start
• Start the server (you may use an alternative for your app like a local running server):
  php artisan serve

After all the necessary commands are running, you can check out the app by visiting the default URL: http://127.0.0.1:8000.

For testing, you can register two different users, have those users log in, send messages from each of them, and see the chat box.

Useful Reverb Resources

Now that we've reached the end of this article, it's worth listing some useful resources about Reverb:

• Laravel Broadcasting (official documentation)
• Taylor Otwel - Laravel Update (talk on Laracon EU 2024)
• Joe Dixon on X (creator of Reverb)
• Laracast episode (practical example with Reverb)

Conclusion

Now you know how to build real-time applications with Laravel Reverb in the new version of Laravel. With this, you can implement WebSocket communications in your full-stack app and avoid using any additional 3rd-party services (like Pusher and Socket.io).

If you want to have a clear idea of how to integrate React.js into your Laravel app without using any additional Laravel tools (like Inertia), you can read through my previous freeCodeCamp article, where you can build a single-page, full-stack Tasklist app.

The complete code for this article is here on my GitHub⭐, where I actively publicize much of my work about various modern technologies.

For more information, you can visit my website: boolfalse.com

Feel free to share this article. 😇

Laravel is built upon PHP, a popular web programming language that’s used in over 75% of websites on the web. So knowing how to use a framework like Laravel can help make you a sought-after developer – and it also makes building websites and applications more seamless.

Nuxt is a Vue.js framework used for building rich and interactive web applications. It lets you choose between different rendering modes depending on the application requirements you want to build. You can choose between building a fully server-rendered app or client-rendered app. Nuxt also offers a mixture of both rendering modes, making applications much more powerful, efficient, and interactive.

In this article, you'll learn how to build full-stack applications using Nuxt and Laravel by building a Book Library App. The app will comprise a library API that we'll build using Laravel and a frontend using Nuxt.

We’ll talk about:

• Installing and setting up Laravel
• Creating database models
• Migrations
• Controllers
• API Testing
• Form Validations
• Data Fetching in Nuxt

And more. Get ready, and let's dive in.

Table of Contents:

• Prerequisites
• How to set up Laravel on your machine

• How to build the Book Library API

  • Setting up our database
  • Creating our Book Model
  • Creating our Book Controller
  • Defining our API Routes
  • Testing our API
    • Creating a new book
    • Getting our list of books
    • Editing our book

• How to Build the Nuxt Frontend

• How to Integrate the Laravel API in the Frontend
  • Getting all books in our library
  • Creating a new book
  • Editing a book
  • Deleting a book
• Conclusion
• Resources

Prerequisites

1. PHP and Composer are installed on your local machine.
2. Node.js is installed on your local machine.
3. yarn or npm installed on your local machine (npm comes pre-installed with Node).
4. A text editor installed, like VSCode.
5. Basic knowledge of HTML, CSS, JavaScript, and the terminal.
6. Basic knowledge of PHP, Vue.js, and TypeScript.

How to Set Up Laravel on Your Machine

To begin the Laravel installation, open your terminal and bootstrap a new Laravel project using the command below:

composer create-project laravel/laravel library-api && cd library-api && code .

This command creates a new Laravel project in your directory. cd's into it, and open up VSCode using the code . command. (If you happen to be using a different editor, you can remove that command and open the directory manually).

To test your Laravel server and ensure everything works, let’s test the server by using the php artisan serve command in the terminal. This should make your API available on port 8000 and accessible in your browser.

Laravel Starter Application

How to Build the Book Library API

We will be creating a simple CRUD endpoint for our book library, that is the API should be able to achieve the following:

• Create new book entries
• Get a list of all the book entries in the database
• Edit previously added book entries
• Delete book entries from the database

Setting up the database

Laravel comes with a variety of databases you can use during development. By default, it automatically creates a configuration setup for MySQL. But for simplicity, we’ll be making use of a SQLite database in this tutorial.

Open the .env file in your root directory, change the DB_CONNECTION value from mysql to sqlite, and comment the remaining database configurations as you can see below:

Environmental Variables (available in .env file)

Laravel automatically helps create the SQLite database when the migrations command is run. We’ll do that in a bit after creating our database models.

Creating the Book model

When you're building backend APIs, a model acts as a template that’s used to set up your database tables. It contains high-level instructions for how the tables and columns should be created.

In Laravel, you can use the command below to create a Book model:

php artisan make:model Book -m

This creates your Book model in the app/models directory and also creates a new migration file for you in the database/migrations directory.

Navigate to the migrations directory and open the newly created migrations file. It should be in the format current_date_create_books_table.php like you can see below:

Default Migrations

Edit the up function and add the following content:

$table->string('title');
$table->string('author');
$table->string('isbn');
$table->date('published_date');
$table->text('cover_image')->nullable();
$table->foreignIdFor(User::class);

Your migrations file should look like this now:

Updated Migrations

In summary, you added new fields to be created for the Book tables. Title, author, and isbn all have a data type of string, while published_date and cover_image have data types of date and text, respectively.

You also made the cover_image nullable, that is the field can be left out whenever a new book entry is created.

Lastly, you imported the User class and made it a foreign key to your Book table, creating a many-to-one relationship with the User table.

Now, let’s create your tables by running the migrations file with the command below:

php artisan migrate

You should get a prompt in the terminal asking if you want to create your SQLite database before the migrations. Select yes and press enter to proceed with the migrations.

Once the migration has been run successfully, navigate to the Book model and paste in the following code:

 /**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/

protected $fillable = [
    'user_id',
    'title',
    'author',
    'isbn',
    'published_date',
    'cover_image'
];

This will allow mass assignment when passing data into the model (passing the data as a whole instead of individually). Your Book model should look like this now:

Updated Book Model

Creating the Book controller

The controller is responsible for housing the business logic for any API being created. The implementation logic for how we want to perform any CRUD operations with the library API will live here.

Laravel also provides a command for you to make this easier for developers. Paste the command below in your terminal to create our book controller:

php artisan make:controller BookController

This should be accessible at app\Http\Controllers\BookController.php. Replace the content of your BookController class with the code snippet below:

<?php

namespace App\Http\Controllers;

use App\Models\Book;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Storage;


class BookController extends Controller
{
    public function store(Request $request)
    {
        $data = $request->validate([
            'title' => 'required|string',
            'author' => 'required|string',
            'isbn' => 'required|string|unique:books',
            'published_date' => 'required|string',
            'cover_image' => 'nullable|image|max:2048',
        ]);

        try {
            $published_date = Carbon::parse($data['published_date'])->toDateString();
            $data['published_date'] = $published_date;
            $data['user_id'] = 1; // Making the assumption the id of the user is 1 
        } catch (\Exception $e) {
            return response()->json(['Error' => 'Bad Request'], 400);
        }

        $book = new Book($data);

        if ($request->hasFile('cover_image')) {
            $coverImage = $request->file('cover_image');
            $coverImageName = time() . '.' . $coverImage->getClientOriginalExtension();
            $coverImage->move(public_path('images'), $coverImageName);
            $book->cover_image = $coverImageName;
        }

        $book->save();

        return response()->json(['message' => 'Book added successfully'], 201);
    }

    public function index()
    {
        $books = Book::all();

        return response()->json(['books' => $books], 200);
    }

    public function update(Request $request, $id)
    {
        $book = Book::findOrFail($id);
        $data = $request->all();

        try {
            $published_date = Carbon::parse($data['published_date'])->toDateString();
            $data['published_date'] = $published_date;
            $data['user_id'] = $book->user_id;
        } catch (\Throwable $th) {
            Log::error('Error ', $th);
            return response()->json(['Error' => 'Bad Request'], 400);
        }

        $book->update($data);

        if ($request->hasFile('cover_image')) {
            // Delete the previous cover image if it exists
            if ($book->cover_image) {
                Storage::delete('public/images/' . $book->cover_image);
            }

            $coverImage = $request->file('cover_image');
            $coverImageName = time() . '.' . $coverImage->getClientOriginalExtension();
            $coverImage->storeAs('public/images', $coverImageName);
            $book->cover_image = $coverImageName;
            $book->save();
        }

        return response()->json(['message' => 'Book updated successfully'], 200);
    }

    public function destroy($id)
    {
        $book = Book::findOrFail($id);

        // Delete the cover image if it exists
        if ($book->cover_image) {
            Storage::delete('public/images/' . $book->cover_image);
        }

        $book->delete();

        return response()->json(['message' => 'Book deleted successfully'], 200);
    }
}

Defining the API Routes

Routing is one of the most important parts of building an API. Routes serve as access points through which developers, clients, or any other services can access an API.

The Laravel router allows you to register any routes that correspond to any HTTP verb being requested.

Route::get($uri, $callback);
Route::post($uri, $callback);
Route::put($uri, $callback);
Route::patch($uri, $callback);
Route::delete($uri, $callback);
Route::options($uri, $callback);

Navigate to the routes/api.php file and create the following routes for your API:

Route::post('/books', [BookController::class, 'store']);
Route::get('/books', [BookController::class, 'index']);
Route::put('/books/{id}', [BookController::class, 'update']);
Route::delete('/books/{id}', [BookController::class, 'destroy']);

Testing the API

Now, it’s time to test your API and ensure all your endpoints are accessible and working as expected.

Run the Laravel server using the command below:

php artisan serve

You can test the API using any API client of your choice. We have quite a number of popular options to choose from – Postman, Insomnia, Thunder Client, and so on. I’ll be using Thunder Client here.

We’ll test for all CRUD operations in your API client by confirming if all your objectives for your API are met.

Creating a new book

Create book endpoint

Getting a list of books

Get books endpoint

Editing a book

Edit book endpoint

How to Build the Nuxt Frontend

Setting up a new Nuxt app is as simple as running the command below:

npx nuxi@latest init nuxt-library-frontend

Open the newly created project when you’re done installing all the dependencies and start the development server using this command:

npm run dev

Your Nuxt app should now be accessible on port 3000:

Nuxt Starter Page

This is what your frontend should look like at the end of the tutorial:

Sample of our completed application

I’ve created some boilerplate code to help with the Nuxt frontend setup. This will enable us to focus on the implementation logic for consuming the Laravel API rather than spending time setting things up and styling.

For knowledge's sake, I created the UI components for the app using shadcn-vue. It consists of an amazing collection of accessible, reusable UI components that you can customize to your taste. Check out the installation steps for more details on how easy it was to set up for the Nuxt app.

It also comes with an installation of the Tailwind CSS utility library that’ll we'll use for styling in this tutorial.

Clone the boilerplate setup from the GitHub repo here so we can get started.

Navigate to pages/index.vue and replace the content of the index page with this:

<template>
 <main class="bg-white p-10 min-h-screen">
   <div class="max-w-4xl mx-auto">
     <header class="flex justify-between items-center mb-20">
       <h1 class="font-semibold text-4xl">My Library</h1>
       <Button>Add New Book</Button>
     </header>


     <div v-if="isLoading">
       <p class="italic text-2xl font-medium text-center">Loading...</p>
     </div>
     <div class="mt-8">
       <div class="flex flex-col gap-8">
         <div class="flex gap-4" v-for="book in books">
           <div
             v-if="book.cover_image"
             class="rounded-lg w-32 h-44 flex items-center justify-center"
           >
             <NuxtImg
               :src="`${API_BASE_URL}/images/${book.cover_image}`"
               :alt="book.title"
               class="w-full h-auto"
             />
           </div>
           <div v-else class="bg-slate-300 rounded-lg w-32 h-44"></div>
           <div class="flex items-center justify-between flex-1">
             <div>
               <h3 class="font-medium text-xl mb-4">{{ book.title }}</h3>
               <p class="mb-2">
                 <span>by:</span>
                 <span class="italic"> {{ book.author }} </span>
               </p>
               <p>
                 <span>Published:</span>
                 {{ book.published_date }}
               </p>
             </div>
             <div class="actions flex gap-4">
               <Button>Edit</Button>
               <Button variant="destructive"> Delete </Button>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </main>
</template>


<script lang="ts" setup>
import { API_BASE_URL } from "@/utils/constants";
import type { BookProps } from "@/utils/types";


const isLoading = ref(false);
const books = ref<BookProps[]>([]);
</script>

We’ll need to create a new folder called utils in your root project which will contain two files: constants.ts and types.ts. Paste the following code snippet in your constants.ts file:

export const API_BASE_URL = "http://localhost:8000";

And the following in your types.ts:

export interface BookProps {
     id?: number;
     title: string;
     author: string;
     isbn: string;
     published_date: string;
     cover_image?: string;
     user_id?: number;
     created_at?: string;
     updated_at?: string;
}

Save the pages/index.vue file. You should be able to see this result in your browser:

Scaffolding the library frontend with Nuxt

Now, we need to create a side drawer and a dialog for adding new books and deleting added books from the database, respectively.

Create a new file called BookDrawer.vue in the component's root and add the following code in there:

<script setup lang="ts">
import type { BookProps } from "@/utils/types";


type PickedProps = "title" | "author" | "isbn" | "published_date";
interface CustomBookProps extends Pick<BookProps, PickedProps> {
 cover_image?: string;
}


const props = defineProps<{ open: boolean; book?: BookProps }>();
const emit = defineEmits(["update:open", "refresh-data"]);


const isSubmitting = ref(false);
let form = reactive<CustomBookProps>({
 title: "",
 author: "",
 isbn: "",
 published_date: "",
 cover_image: undefined,
});


const onFileChange = async (e: any) => {
 form.cover_image = e.target.files[0];
};


const onSubmit = async () => {};


const closeDrawer = (openState: boolean) => emit("update:open", openState);
</script>


<template>
 <Sheet :open="open" @update:open="closeDrawer">
   <SheetContent class="w-full bg-white">
     <SheetHeader>
       <SheetTitle>
         <template v-if="book"> Edit Book </template>
         <template v-else>Add New Book</template>
       </SheetTitle>
       <SheetDescription>
         Make changes to your profile here. Click save when you're done.
       </SheetDescription>
     </SheetHeader>
     <div class="grid gap-4 py-4">
       <div class="grid grid-cols-4 items-center gap-4">
         <Label for="bookTitle" class="text-right"> Book Title </Label>
         <Input
           v-model:model-value="form.title"
           type="text"
           id="bookTitle"
           class="col-span-3"
           required
         />
       </div>
       <div class="grid grid-cols-4 items-center gap-4">
         <Label for="author" class="text-right"> Author </Label>
         <Input
           v-model:model-value="form.author"
           type="text"
           id="author"
           class="col-span-3"
           required
         />
       </div>
       <div class="grid grid-cols-4 items-center gap-4">
         <Label for="isbn" class="text-right"> ISBN </Label>
         <Input
           v-model:model-value="form.isbn"
           type="text"
           id="isbn"
           class="col-span-3"
           required
         />
       </div>
       <div class="grid grid-cols-4 items-center gap-4">
         <Label for="published_date" class="text-right">
           Published Date
         </Label>
         <Input
           v-model:model-value="form.published_date"
           type="date"
           id="published_date"
           class="col-span-3"
           required
         />
       </div>
       <div class="grid grid-cols-4 items-center gap-4">
         <Label for="cover_image" class="text-right"> Book Cover </Label>


         <Input
           type="file"
           @change="onFileChange"
           id="cover_image"
           class="col-span-3"
           required
         />
       </div>
     </div>
     <SheetFooter>
       <Button type="submit" @click="onSubmit">
         <template v-if="isSubmitting">Saving...</template>
         <template v-else> Save changes </template>
       </Button>
     </SheetFooter>
   </SheetContent>
 </Sheet>
</template>

Create another file called DeleteBookDrawer.vue and add the following code content to it:

<script lang="ts" setup>
const emit = defineEmits(["refresh-data", "update:open"]);
const props = defineProps<{ open: boolean; book?: BookProps }>();
</script>


<template>
 <AlertDialog
   :open="open"
   @update:open="(openState) => $emit('update:open', openState)"
 >
   <AlertDialogContent>
     <AlertDialogHeader>
       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
       <AlertDialogDescription>
         This action cannot be undone. This will permanently delete your book
         and remove your data from the server.
       </AlertDialogDescription>
     </AlertDialogHeader>
     <AlertDialogFooter>
       <AlertDialogCancel @click="$emit('update:open', false)"
         >Cancel</AlertDialogCancel
       >
       <AlertDialogAction>Continue</AlertDialogAction>
     </AlertDialogFooter>
   </AlertDialogContent>
 </AlertDialog>
</template>

Import the newly created files in your index page as you can see below:

<template>
 <main class="bg-white p-10 min-h-screen">
    ...

   <BookDrawerDialog
     v-if="isBookDrawerOpen"
     :open="isBookDrawerOpen"
     @update:open="(open: boolean) => isBookDrawerOpen = open"
     :book="currentBook"
     @refresh-data="fetchBooks"
   />
   <DeleteBookDialog
     v-if="isDeleteBookDialogOpen"
     :open="isDeleteBookDialogOpen"
     @update:open="(open: boolean) => isDeleteBookDialogOpen = open"
     :book="currentBook"
     @refresh-data="fetchBooks"
   />
 </main>
</template>

Now, we need to create a system for opening and closing the drawer and dialog, respectively. We’ll be creating a ref to track the open/closed state for the drawer and dialog components in your index page. Paste the following code content in the script stage to enable that:

<script lang="ts" setup>

...

const currentBook = ref<BookProps>();


const isBookDrawerOpen = ref(false);
const isDeleteBookDialogOpen = ref(false);


const toggleAddBookDrawer = () => {
 isBookDrawerOpen.value = !isBookDrawerOpen.value;
};


const toggleEditBookDrawer = (book: BookProps) => {
 currentBook.value = book;
 isBookDrawerOpen.value = !isBookDrawerOpen.value;
};


const toggleDeleteDialog = (book: BookProps) => {
 currentBook.value = book;
 isDeleteBookDialogOpen.value = !isDeleteBookDialogOpen.value;
};
</script>

Update the Edit and Delete buttons in your index page to include the toggle handler:

    ...

             <div class="actions flex gap-4">
               <Button @click="toggleEditBookDrawer(book)">Edit</Button>
               <Button @click="toggleDeleteDialog(book)" variant="destructive">
                 Delete
               </Button>
             </div>

           ...

Include the toggleAddDrawer in your Add Book button too:

<Button @click="toggleAddBookDrawer">Add New Book</Button>

Save the file changes and view in your browser. You should have the drawer active now:

Add New Book Drawer

Moving on, we need to be sure the EditDrawer and Delete Dialog work. We’ll create a temporary array of mock book data to test that so you can see the result on your page. Update the value of the books ref to the data you have below (and don’t forget to update the books ref value to an empty array – that is books = ref<BookProps>([])):

const books = ref<BookProps[]>([
     {
       title: "Atomic Habits",
       author: "James Clear",
       isbn: "XYEOUIUEHEJ2902",
       published_date: "2020-09-01",
       cover_image: "",
     },
     {
       title: "The Power of Habits",
       author: "Charles Duhigg",
       isbn: "WIUIQUEWHSDBSD28",
       published_date: "2012-02-28",
       cover_image: "",
     },
]);

Save the changes and check out the EditDrawer and DeleteDialog in action:

Delete dialogue

EditDrawer

How to Integrate the Laravel API in the Frontend

Getting all books in the library

So far, we only have the UI of our frontend working, and the data being displayed is not from the API. To make the app fully dynamic, you'll need to make an HTTP request to the server to get all the data you need for your page.

Update the body of the fetchBooks function in the index page to the following code:

const fetchBooks = async () => {
 try {
   isLoading.value = true;
   const response = await $fetch<{ books: BookProps[] }>(
     `${API_BASE_URL}/api/books`
   );


   books.value = response.books.sort(
     (a, b) =>
       Number(new Date(b.created_at as string)) -
       Number(new Date(a.created_at as string))
   );


 } catch (error) {
   console.log(error);
 } finally {
   isLoading.value = false;
 }
};


onMounted(() => {
 fetchBooks();
});

Basically, you're calling your fetchBooks function when the page mounts using one of the lifecycle hooks available in Vue.js. When the function is called, it executes the instruction you created in the body:

• Set the loading state of the app to true.
• Make a GET HTTP request to the books endpoint of your API and set the response to the books ref you created earlier.
• When the request-response has been completed, set the loading state of the app back to false to indicate to the user the process has been completed.

Save the changes, and you should see the results in the browser:

Fetching the book list

Creating a new book

For your book creation to be successful, you need to include the logic for creating a book in your BookDrawer. Add the following code in the BookDrawer.vue file:

...

const isSubmitting = ref(false);


const addNewBook = async (data: any) => {
 const response = await $fetch(`${API_BASE_URL}/api/books`, {
   method: "POST",
   body: data,
   headers: {
     Accept: "application/json",
   },
 });
 return response;
};


const onSubmit = async () => {
 try {
   const formData = new FormData();
   Object.keys(form).forEach((key) => {
     // @ts-ignore
     if (form[key]) {
       formData.append(key, form[key as never]);
     }
   });
   isSubmitting.value = true;
   const data = await addNewBook(formData);
   closeDrawer(false);
   emit("refresh-data");
 } catch (error) {
   console.log(error);
 } finally {
   isSubmitting.value = false;
 }
};

...

Similar to the implementation for fetching your books, the only difference here is that you're making a POST HTTP request instead. You use this method whenever you need to mutate data on the server.

Creating a new book

Editing a book

Update your BookDrawer with the following code to enable editing of the books that have been added:

<script setup lang="ts">

...

onMounted(() => {
 if (props.book) {
   form = props.book;
 }
});


const editBook = async () => {
 try {
   isSubmitting.value = true;
   const resp = await $fetch(`${API_BASE_URL}/api/books/${props?.book?.id}`, {
     method: "PUT",
     body: formData,
   });
   closeDrawer(false);
   emit("refresh-data");
 } catch (error) {
   console.log(error);
 } finally {
   isSubmitting.value = false;
 }
};

...
</script>

Update the save button with the toggle handler also:

<Button
  type="submit"
  @click="() => (book?.id ? editBook() : onSubmit())"
>
  <template v-if="isSubmitting">Saving...</template>
  <template v-else> Save changes </template>
</Button>

And here's the result:

Updating a book

Deleting a book

Paste the following in the DeleteBookDialog.vue file:

const refreshData = () => emit("refresh-data");
const closeDialog = () => emit("update:open", false);


const deleteBook = async () => {
 await $fetch(`${API_BASE_URL}/api/books/${props?.book?.id}`, {
   method: "DELETE",
 });
 closeDialog();
 refreshData();
};

This works fine also:

Deleting a book

Conclusion

Building full-stack web apps with Laravel and Nuxt is a very rewarding experience as you can enjoy the benefits and rewards from the best of both worlds.

Since Laravel is a feature-rich backend framework, it comes with many modules and packages that you can install whenever a feature or implementation needs to be worked on.

And Nuxt, as a Vue framework, gives you the superpower of building single-page applications that are fast, accessible, and responsive, giving end-users a delightful experience.

In this tutorial, we went over how we can build full-stack applications using Nuxt and the Laravel framework. I hope you were able to learn something new and are excited to explore this further. Feel free to reach out if you have any questions or ideas.

The full code for the tutorial can be found in the GitHub repo here.

Resources

• Laravel Docs
• Nuxt Documentation
• Shadcn-vue, ready-made UI components that can be copy-pasted anytime
• Vue Docs

As a backend framework, Laravel actually offers a tool to help you do this, called Inertia. Here's what the docs say about it:

It bridges the gap between your Laravel application and your modern Vue or React frontend, allowing you to build full-fledged, modern frontends using Vue or React while leveraging Laravel routes and controllers for routing, data hydration, and authentication — all within a single code repository.

But what if you don't want to use such a tool? And instead, you just want to use React.js as a frontend library and have a simple Laravel-powered backend?

Well, in this article, you will learn how to use React.js with Laravel as a backend by building a draggable tasklist app.

For this full-stack single-page app, you'll use Vite.js as your frontend build tool and the react-beautiful-dnd package for draggable items.

By the end of this article, you will have a single-page app for managing tasks, which will look like this:

Captured from a local working project

In this article, we'll create a dynamic page that will have a list of tasks, each of which will belong to a specific project. This way, the user will be able to select a project, and only the tasks of the selected project will be shown on the page. The user can also create a new task for the current project, as well as edit, delete and reorder tasks by dragging and dropping them.

Table of Contents:

• Prerequisites
• The Backend: How to Install Laravel
• How to Create Models and Migrations
• How to Create Seeders
• How to Connect to the MySQL Database
• Service Injection
• Web and API Routes in Laravel
• Validation Requests in Laravel
• How to Write a Controller that Uses Services
• How to Test the API Routes
• The Frontend: How to Install the Packages
• How to Configure Vite.js
• React.js – Initial Integration
• How to Add CSS
• A Service for the API requests
• React.js Components
• Final Results
• Conclusion

Prerequisites

Before following along, it would be helpful to have a basic understanding of React.js, Laravel, and familiarity with fundamental web development concepts.

You'll need the following tools for the app that we'll build in this article:

• PHP 8.1 or above (run php -v to check the version)
• Composer (run composer to check that it exists)
• Node.js 18 or above (run node -v to check the version)
• MySQL 5.7 or above (run mysql --version to check if it exists, or follow the docs)

Additional (optional) tools that you can use:

• Postman – a program with a UI for testing the API routes
• curl – a CLI command for testing the API routes

We'll start by building out the backend, and then move to the frontend.

The Backend: How to Install Laravel

First, if you don't have it already, you'll need to install the Laravel framework on your local machine.

One way to install Laravel is by using a popular dependency manager for PHP called Composer. Here's the command to do so:

composer create-project laravel/laravel tasklist

This will install the latest stable version of Laravel in your local machine (currently it's version 10).

The tasklist in the command is the app's root folder name, which you can set to whatever you want.

At this point, you can cd into the project's folder and run the backend app without needing to have a virtual server set up:

cd tasklist/ && php artisan serve

The artisan in the above command is a CLI tool included in Laravel. It exists at the root of your Laravel application as the artisan script file, which provides a number of helpful commands that can assist you while you build your application.
We'll use it in this article often.

Visit http://127.0.0.1:8000 in your browser to see the default page. It should look like this:

Laravel welcome page

How to Create Models and Migrations

Now, let's create Project and Task models, as well as migrations for them.

Models are the way your app entities should be defined, and migrations are like schema definitions for storing the records of those entities in the database.

You can create model and migration files manually as well as generate them using the artisan command:

php artisan make:model Project -m
php artisan make:model Task -m

The -m argument will automatically generate a migration file using the provided model name.

Keep the command execution sequence as it is, so the Project's migration later can run before the Task's migration.

This is important, because the projects and tasks tables should have a one-to-many relationship (1-N): each task will refer to a single project, or, in other words, each project can have multiple tasks.

Set the Project model's $fillable fields and the task() relationship method as below:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;

class Project extends Model
{
    use HasFactory;

    protected $table = 'projects';
    public $timestamps = false;
    protected $fillable = [
        'id', // primary key, auto-increment, integer
        'name', // string
    ];

    // a project can have multiple tasks
    public function tasks(): HasMany
    {
        return $this->hasMany(Task::class);
    }
}

By default, the $timestamps public property has a true value, which is coming from the parent Model class. This means that the created_at and updated_at columns in your database table will be maintained automatically by Eloquent (the ORM included in Laravel).

But you can customize it by changing its value to false. We don't need to have created_at and updated_at fields in the projects table, so we'll set the $timestamps to false.

Set the Task model's $fillable fields, project() relationship method, and created accessor. An accessor in Laravel is like a function between the database and your code, that can access the already fetched database record and modify it.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\SoftDeletes;

class Task extends Model
{
    use HasFactory, SoftDeletes;

    protected $table = 'tasks';
    protected $fillable = [
        'id', // primary key, auto-increment, integer
        'project_id', // foreign key, integer

        'priority', // integer
        'title', // string
        'description', // text
    ];
    protected $appends = [
        'created',
    ];

    // each task belongs to a single project
    public function project(): BelongsTo
    {
        return $this->belongsTo(Project::class);
    }

    public function getCreatedAttribute()
    {
        return $this->created_at->diffForHumans();
    }
}

Above, in the Task model, there is an accessor called created. For having an accessor, we have the created field in the $appends array, and also a public function getCreatedAttribute().

In get**<WordsInCamelCase>**Attribute() function there is logic that will run to modify the already fetched database record.

In our case the getCreatedAttribute() function will return a human-friendly and readable time difference between the current time and the given time. For example, "3 mins ago" or "4 months ago".

Now that the models are ready, let's set up the migrations.

First, set up a migration for the projects table:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('projects', function (Blueprint $table) {
            $table->id();
            $table->string('name');
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('projects');
    }
};

Then set up a migration for the tasks table:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();

            $table->foreignId('project_id')->nullable()->constrained();

            $table->integer('priority');
            $table->string('title');
            $table->text('description')->nullable();

            $table->timestamps();
            $table->softDeletes();
        });
    }

    public function down(): void
    {
        // drop existing foreign keys
        Schema::table('tasks', function (Blueprint $table) {
            if (Schema::hasColumn('tasks', 'project_id')) {
                $table->dropForeign(['project_id']);
            }
        });

        // drop the table
        Schema::dropIfExists('tasks');
    }
};

The tasks table has a foreign key project_id, which is a reference to the projects table. So it's a good practice to update the down() method too, to be sure that the project_id foreign will be dropped before dropping the actual projects table.

There is also a priority field, which will be a non-nullable natural number for ordering the tasks. And optionally, you can add a soft deletion feature to the Task model.

How to Create Seeders

Now we need to add dummy data to the projects and tasks tables. To seed some data in the database, you can use Laravel seeders. This allows you to create dummy data to use in your database.

If you want to read more about how this works, you can check out the docs here.

Laravel provides a way to generate those files by using make:seeder artisan command:

php artisan make:seeder ProjectsSeeder
php artisan make:seeder TasksSeeder

So with the above commands, you'll have database/seeders/ProjectsSeeder.php and database/seeders/TasksSeeder.php files created.

At first, you'll need to set up the ProjectsSeeder to add a few projects to the projects table. Then you can set up the TasksSeeder to add tasks to the tasks table.

As I mentioned at the beginning, each task will belong to a specific project. From a relational database perspective, this means that each entry in the tasks table will link to a specific entry in the projects table. Here's the importance of having a project_id foreign key in the tasks table to be able to relate each task to a specific project as well as retrieve the specific project's tasks.

You can imagine the database structure by looking at the following visuals:

generated by PHPStorm IDE

Using the example below, you can generate 3 projects:

<?php

namespace Database\Seeders;

use App\Models\Project;
use Illuminate\Database\Seeder;

class ProjectsSeeder extends Seeder
{
    public function run(): void
    {
        for ($i = 1; $i <= 3; $i++) {
            Project::create([
                'name' => "Project $i",
            ]);
        }
    }
}

Next, set up TasksSeeder. You'll run all the seeder files after setting them up, and they will run one by one. That being said, at this point your ProjectsSeeder is ready to create a few projects.

By imagining it, the next step will be generating the tasks, each of them will have a reference to one of the already existing projects by its project_id field.

Using the example below, you can generate 10 projects:

<?php

namespace Database\Seeders;

use App\Models\Project;
use App\Models\Task;
use Illuminate\Database\Seeder;

class TasksSeeder extends Seeder
{
    public function run(): void
    {
        $project_ids = Project::all()->pluck('id')->toArray();

        $now = now();
        $tasks = [];
        $project_priorities = [];
        foreach ($project_ids as $project_id) {
            $project_priorities[$project_id] = 0;
        }

        for ($i = 1; $i <= 10; $i++) {
            $project_id = $project_ids[array_rand($project_ids)];
            $project_priorities[$project_id]++;

            $tasks[] = [
                'project_id' => $project_id,
                'priority' => $project_priorities[$project_id],
                'title' => "Task " . $project_priorities[$project_id],
                'description' => "Description for Task " . $project_priorities[$project_id],

                'created_at' => $now,
                'updated_at' => $now,
            ];
        }

        Task::insert($tasks);
    }
}

The above code just grabs all the project IDs, then randomly chooses a project for each task. In the end, it inserts all the tasks into the tasks table.

As you may have noticed, we're inserting $tasks into the tasks table using the insert() static function, which allows us to insert all the items into the database table with a single query.

But it has a downside as well: it doesn't manage created_at and updated_at fields. That's why there's a need to set up those fields manually by assigning them the same $now timestamp.

Now, when you have all the seeders ready, you need to register them into the DatabaseSeeder.

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    public function run(): void
    {
        $this->call([
            ProjectsSeeder::class,
            TasksSeeder::class,
        ]);
    }
}

How to Connect to the MySQL Database

Before running migrations and seeds, create a MySQL database and set up the appropriate credentials in the .env file. If there is not a .env, then create it and paste the .env.example file's content into it.

After setting up the database credentials, you'll have these kinds of environment variables:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE="<DATABASE_NAME>"
DB_USERNAME="<USERNAME>"
DB_PASSWORD="<PASSWORD>"

After setting up environment variables, optimize the cache:

php artisan optimize

Now you'll be able to create projects and tasks tables in the MySQL database, setup their structure, and add initial records with a single command:

php artisan migrate:fresh --seed

In the above command, the migrate:fresh argument will drop all tables from the database. Then it will execute the migrate command, which will run your migrations to create projects and tasks tables appropriately.

With the --seed argument, it will run ProjectsSeeder and TasksSeeder after the migrations. That being said, it will empty your database for you, and will create all the tables and fill all the necessary dummy data.

After running the command, you'll have these kinds of database records:

A screenshot from the PHPStorm IDE

Service Injection

Now let's create a controller and a service classes to manage all the task features, such as listing, creating, updating, deleting, and reordering the tasks.

At first, use the below command to generate a controller.

php artisan make:controller TaskController

In order not to place all the code in the controller, you can keep only the main logic in it, and move the other logic implementations to another class file.

Those classes are generally called services, and using service implementations in a controller method is called service injection (it comes from the term dependency injection).

One of the main advantages of using services is that it helps you create a maintainable codebase.

You can inject your service class into the controller's construction method as an argument, so after each controller execution (when a controller's __construct() method runs) you can initialize an object of service. This means that you can access your service's functions right in your controller.

Now, let's create two separate service classes, which will be used in the TaskController.

Manually create a app/Services/ProjectService.php service class, which will be responsible for the project-related logic.

<?php

namespace App\Services;

use App\Models\Project;
use Illuminate\Database\Eloquent\Collection;

class ProjectService
{
    public function getAll(): Collection
    {
        return Project::all();
    }
}

The second service class will be the app/Services/TaskService.php, which will be responsible for doing task manipulations:

<?php

namespace App\Services;

use App\Models\Task;
use Illuminate\Support\Facades\DB;

class TaskService
{
    public function list(int $projectId)
    {
        return Task::with('project')->where('project_id', $projectId)
            ->orderBy('priority')->get();
    }

    public function getById(int $id)
    {
        return Task::where('id', $id)->with('project')->first();
    }

    public function store($data): void
    {
        $count = Task::where('project_id', $data['project_id'])->count();
        $data['priority'] = $count + 1;

        Task::create($data);
    }

    public function update(int $id, array $data): void
    {
        $task = $this->getById($id);
        if (!$task) { return; }

        $task->update($data);
    }

    public function delete(int $id): void
    {
        $task = $this->getById($id);
        if (!$task) { return; }

        $task->delete();

        $tasks = Task::where('project_id', $task->project_id)
            ->where('priority', '>', $task->priority)->get();
        if ($tasks->isEmpty()) {
            return;
        }

        $when_then = "";
        $where_in = "";
        foreach ($tasks as $task) {
            $when_then .= "WHEN ".$task->id
                ." THEN ".($task->priority - 1)." ";
            $where_in .= $task->id.",";
        }

        $table_name = (new Task())->getTable();
        $bulk_update_query = "UPDATE `".$table_name
            ."` SET `priority` = (CASE `id` ".$when_then."END)"
            ." WHERE `id` IN(".substr($where_in, 0, -1).");";

        // there is no way to be SQL injected here
        // because all the values are not provided by the user
        DB::update($bulk_update_query);
    }

    public function reorder(int $project_id, int $start, int $end): void
    {
        $items = Task::where('project_id', $project_id)
            ->orderBy('priority')->pluck('priority', 'id')->toArray();

        if ($start > count($items) || $end > count($items)) {
            return;
        }

        $ids = [];
        $priorities = [];
        foreach ($items as $id => $priority) {
            $ids[] = $id;
            $priorities[] = $priority;
        }

        $out_priority = array_splice($priorities, $start - 1, 1);
        array_splice($priorities, $end - 1, 0, $out_priority);

        $when_then = "";
        $where_in = "";
        foreach ($priorities as $out_k => $out_v) {
            $id = $ids[$out_v - 1];
            $when_then .= "WHEN ".$id." THEN ".($out_k + 1)." ";
            $where_in .= $id.",";
        }

        $table_name = (new Task())->getTable();
        $bulk_update_query = "UPDATE `".$table_name
            ."` SET `priority` = (CASE `id` ".$when_then."END)"
            ." WHERE `id` IN(".substr($where_in, 0, -1).")"
            ." AND `deleted_at` IS NULL;"; // soft delete

        DB::update($bulk_update_query);
    }
}

In the above TaskService class, you'll use the following functions in the TaskController.

• list: fetches tasks for a given project ID, including the related project, and orders them by priority.
• getById: retrieves a specific task by its ID, including the related project.
• store: stores a new task, calculating the priority based on existing tasks for the same project.
• update: updates an existing task by its ID.
• delete: deletes a task by its ID and adjusts the priorities of remaining tasks in the same project.
• reorder: changes the priorities of tasks within a project, (handles soft delete as well with deleted_at IS NULL).

Web and API Routes in Laravel

Now you can add routes to test the methods you've already written. In this project, we have a stateless app on the frontend which requests API routes for getting JSON data, so it will follow RESTful principles (GET, POST, PUT, DELETE methods). Only the initial HTML page will be retrieved as a whole web page.

So now, set up a route in routes/web.php for the initial single-page:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;

Route::group(['prefix' => '/', 'as' => 'tasks.'], function () {
    Route::get('/', [TaskController::class, 'index'])->name('index');
});

Set up API routes in routes/api.php like this:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;

Route::group(['prefix' => '/tasks', 'as' => 'tasks.'], function () {
    Route::get('/', [TaskController::class, 'list']);
    Route::get('/{id}', [TaskController::class, 'get'])
        ->where('id', '[1-9][0-9]*');
    Route::post('/', [TaskController::class, 'store']);
    Route::put('/{id}', [TaskController::class, 'update'])
        ->where('id', '[1-9][0-9]*');
    Route::delete('/{id}', [TaskController::class, 'delete'])
        ->where('id', '[1-9][0-9]*');
    Route::put('/', [TaskController::class, 'reorder']);
});

We have all the API routes in the routes/api.php instead of the routes/web.php because in the web.php file, all the routes by default are CSRF protected. So, in a stateless app, usually you won't need that – that's why api.php was invented in Laravel.

As you can see, there is a "task" prefix for all API routes. It's optional to have a prefix, but it's just a good practice. And for the specific API routes, there are regex validations for accepting only natural numbers as project IDs.

Don't forget to refresh route caches after the above changes. It's important to remember that Laravel (version 10 in this case) reads routes from the cached bootstrap/cache/routes-v7.php file, and they won't be updated automatically right after your changes. It just generates one if it hasn't cached yet.

Use the below command to refresh Laravel caches as well as the route caches:

php artisan optimize

Validation Requests in Laravel

Before writing controller methods, you'll need to add some validation request files. You can do that manually or by just using the artisan command:

php artisan make:request Task/CreateTaskRequest
php artisan make:request Task/ListTasksRequest
php artisan make:request Task/ReorderTasksRequest
php artisan make:request Task/UpdateTaskRequest

After creating them, you'll need to set up validation rules for each request.

Validation rules in Laravel are a way to describe how to expect to get incoming HTTP data. If the data matches the rules, then it passes the validation – otherwise, Laravel will return a failure.

Laravel provides a set of rules you can use to check incoming data. A field of the incoming request can have multiple rules.

One way to write validation rules for a single field is concatenating those rules by a "|" character.

Below are the validation rules for creating a new task:

return [
    'project_id' => 'required|integer|exists:projects,id',
    'title' => 'required|string|max:255',
    'description' => 'nullable|string',
];

Below is the validation rule for listing project tasks:

return [
    'project_id' => 'required|integer|exists:projects,id',
];

Below are the validation rules for tasks reordering:

return [
    'project_id' => 'required|integer|exists:projects,id',
    'start' => 'required|integer',
    'end' => 'required|integer|different:start',
];

Below are the validation rules for updating a task:

return [
    'title' => 'required|string|max:255',
    'description' => 'nullable|string',
];

Don't forget to return true in the authorize() method in all validation classes:

public function authorize(): bool
{
    return true;
}

This function is usually designed to determine if the user is authorized to make the request. As we don't use authentication as well as authorization stuff in the app, it should return true for all the cases.

How to Write a Controller that Uses Services

As the last step in the backend part, it's time to write controller methods for each API route, which will use service functions.

<?php

namespace App\Http\Controllers;

use App\Http\Requests\Task\CreateTaskRequest;
use App\Http\Requests\Task\ListTasksRequest;
use App\Http\Requests\Task\ReorderTasksRequest;
use App\Http\Requests\Task\UpdateTaskRequest;
use App\Services\ProjectService;
use App\Services\TaskService;
use Illuminate\Http\JsonResponse;

class TaskController extends Controller
{
    protected ?TaskService $taskService = null;

    public function __construct(TaskService $taskService)
    {
        $this->taskService = $taskService;
    }

    public function index()
    {
        $projects = (new ProjectService())->getAll();

        return view('tasks.index', [
            'projects' => $projects,
        ]);
    }

    public function list(ListTasksRequest $request): JsonResponse
    {
        $tasks = $this->taskService->list($request->get('project_id'));

        return response()->json([
            'success' => true,
            'tasks' => $tasks,
            'message' => "Tasks retrieved successfully.",
        ]); // 200
    }

    public function store(CreateTaskRequest $request): JsonResponse
    {
        $this->taskService->store($request->all());

        return response()->json([
            'success' => true,
            'message' => "Task created successfully.",
        ], 201);
    }

    public function get(int $id): JsonResponse
    {
        $task = $this->taskService->getById($id);

        if ($task) {
            return response()->json([
                'success' => true,
                'task' => $task,
                'message' => "Task retrieved successfully.",
            ]); // 200
        } else {
            return response()->json([
                'success' => false,
                'message' => "Task not found!",
            ], 404);
        }
    }

    public function update(UpdateTaskRequest $request, int $id): JsonResponse
    {
        $this->taskService->update($id, $request->all());

        return response()->json([
            'success' => true,
            'message' => "Task updated successfully.",
        ], 201);
    }

    public function delete(int $id): JsonResponse
    {
        $this->taskService->delete($id);

        return response()->json([
            'success' => true,
            'message' => "Task deleted successfully.",
        ], 201);
    }

    public function reorder(ReorderTasksRequest $request): JsonResponse
    {
        $this->taskService->reorder(
            $request->get('project_id'),
            $request->get('start'),
            $request->get('end')
        );

        return response()->json([
            'success' => true,
            'message' => "Tasks reordered successfully.",
        ], 201);
    }
}

As you can see in the TaskController:

• TaskService is injected into the constructor method as an argument. In the constructor body, an instance of the TaskService class is created, and the $taskService property is initialized. So in the custom methods, you'll be able to access that $taskService and its functions.
• The index method is for returning the HTML.
• All the other custom methods ( list, store, get, update, delete, reorder) are using the TaskService functions through the already initialized $taskService property. So, all the logic implementation goes to the service, and this way, you just call a service function and return the response.

How to Test the API Routes

At this point, you can test the API routes by requesting them via Postman or any similar tool. Just run (or rerun) the backend:

php artisan serve

Here's the published Postman collection with all the requests.

Instead of using Postman, you can use a command line tool such as curl right from your terminal.

Below are all the sample commands that you can run to test out the API routes:

• Create a new task for a specific project:

curl --location '127.0.0.1:8000/api/tasks?project_id=1' \
--header 'Content-Type: application/json' \
--data '{
    "title": "Title",
    "description": "Description"
}'

• List project tasks:

curl --location 'http://127.0.0.1:8000/api/tasks?project_id=1'

• Get a task by ID:

curl --location 'http://127.0.0.1:8000/api/tasks/1'

• Update a task by ID:

curl --location --request PUT 'http://127.0.0.1:8000/api/tasks/11' \
--header 'Content-Type: application/json' \
--data '{
    "title": "Title edited",
    "description": "Description edited"
}'

• Reorder project tasks:

curl --location --request PUT 'http://127.0.0.1:8000/api/tasks' \
--header 'Content-Type: application/json' \
--data '{
    "project_id": "1",
    "start": "1",
    "end": "2"
}'

• Delete a task by ID:

curl --location --request DELETE 'http://127.0.0.1:8000/api/tasks/11'

In the below screenshot, there is an example of getting project tasks by its ID using the curl command (at the bottom right):

An example of using curl command to retrieve the existing tasks from the database

The Frontend: How to Install the Packages

Now it's time to switch to the frontend. We'll use TypeScript for React.js. After completing this part, you'll be able to integrate React.js (with Vite) in your Laravel app.

First, make sure you have Node.js version 18 or above by using this command:

node -v

Install these necessary npm packages:

npm i react-dom dotenv react-beautiful-dnd react-responsive-modal react-toastify @vitejs/plugin-react

• react-dom is a library from the React team for rendering React components in the DOM (Document Object Model)
• dotenv is for loading environment variables from the .env file into the process environment
• react-beautiful-dnd is a library from Atlassian for creating drag-and-drop interfaces with animations
• react-responsive-modal is for creating simple and responsive modal dialogs
• react-toastify is for displaying notifications or toasts
• @vitejs/plugin-react is a plugin for the Vite build tool that enables seamless integration of React with fast development and optimized production builds

Install the development dependencies with this command:

npm i -D @types/react-dom @types/react-beautiful-dnd

• @types/react-dom is TypeScript type definitions for the react-dom package
• @types/react-beautiful-dnd is TypeScript type definitions for the react-beautiful-dnd package

How to Configure Vite.js

As Laravel v10 already has vite.config.js, you'll want to set up any React-related stuff there. Or if you still don't have this file, create one like this:

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

export default defineConfig({
    build: {
        minify: process.env.APP_ENV === 'production' ? 'esbuild' : false,
        cssMinify: process.env.APP_ENV === 'production',
    },
    plugins: [
        laravel({
            input: ['resources/react/app.tsx'],
            refresh: true,
        }),
        react(),
    ],
});

As you can see in the Vite configuration file, there is a reference to the resources/react/app.tsx, which will be the entry point for Laravel to use React resources.

For the initial HTML page, create a resources/views/tasks/index.blade.php blade file, so all the frontend assets will be injected there in the div with ID app:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config("app.name") }}</title>
    <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    @viteReactRefresh
    @vite('resources/react/app.tsx')
</head>
<body>
<div id="app" data-projects="{{ json_encode($projects) }}"></div>
</body>
</html>

As you can see in the blade file, there is a $projects variable passed from the backend. It's the whole project data that will be used to filter tasks in the frontend.

React.js – Initial Integration

In this article, we'll just have a basic React.js app working with Laravel.

At first, it's a good idea to delete unnecessary resources, like default resources/css and resources/js directories.

Create a resources/react/app.tsx file like this:

import ReactDOM from 'react-dom/client';
import Main from "./Main";
import './index.css'

ReactDOM.createRoot(document.getElementById('app')).render(
    <Main />
);

So, the resources/react folder will be the root directory for all the upcoming React stuff.

Create an index.css with some temporary content:

.test-class {
  color: red;
}

Also create a Main.tsx with some temporary content:

function Main() {
    return (
        <div>
            <h2 className="test-class">React App</h2>
        </div>
    );
}

export default Main;

To check the result in the browser, make sure you have backend running and build the assets via the vite tool:

npm run build

Or, if you want to watch React file changes and automatically build assets, you can keep this command running:

npm run dev

The two npm run commands above refer to vite, which builds the assets.
You can see this by checking the package.json file, "scripts" field:

"scripts": {
    "dev": "vite",
    "build": "vite build"
}

Now you can open http://localhost:8000 to see the initial rendered view:

Screenshot from browser

How to Add CSS

Now, once you've set up Vite and have React integrated into your Laravel app, you can work on the React part.

We won't spend too much time on styles, so you can paste this CSS into your index.css:

body { background-color: whitesmoke; color: rgba(255, 255, 255, 0.7); font-family: "Montserrat", sans-serif; cursor: default; margin: auto 0; }

/* MODAL start */
.modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; width: 500px; color: #2d3748; }
.modal-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; }
.modal-input-header { font-weight: 600; margin-bottom: 10px; }
.modal-input { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; }
.modal-textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 20px; resize: vertical; }
.modal-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.modal-btn { padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.modal-btn-cancel { background-color: #e53e3e; color: #fff; border: none; }
.modal-btn-cancel:hover { background-color: #c53030; }
.modal-btn-submit { background-color: #2d3748; color: #fff; border: none; }
.modal-btn-submit:hover { background-color: #4a5568; }
.modal-question { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }
/* MODAL end */

/* LEFT & RIGHT SIDE start */
.left-side { width: 50%; float: left; }
.right-side { width: 50%; float: left; }
/* LEFT & RIGHT SIDE end */

/* LEFT SIDE start */
.left-side .no-tasks { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; text-align: center; color: #2d3748; }
.left-side .task-item { padding: 10px; margin: 10px; min-height: 20px; min-width: 200px; color: #2d3748; list-style-type: none; }
.left-side .task-item-content { display: flex; justify-content: space-between; align-items: center; }
.left-side .task-project { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px; }
.left-side .task-project-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; }
.left-side .task-time { font-size: 0.8rem; }
.left-side .task-title { font-size: 1.2rem; }
.left-side .task-actions { display: flex; justify-content: space-between; align-items: center; }
.left-side .task-edit-btn { background-color: #2d3748; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin: 0 5px; }
.left-side .task-edit-btn:hover { background-color: #4a5568; }
.left-side .task-delete-btn { background-color: #e53e3e; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin: 0 5px; }
.left-side .task-delete-btn:hover { background-color: #c53030; }
/* LEFT SIDE end */

/* RIGHT SIDE start */
.right-side .projects { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.right-side .projects-select { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; }
.right-side .no-project-selected { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }
.right-side .right-side-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; color: #2d3748; }
.right-side .add-task-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; }
.right-side .add-task-input-header { font-weight: 600; margin-bottom: 10px; }
.right-side .add-task-input { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; }
.right-side .add-task-textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 20px; resize: vertical; }
.right-side .add-task-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.right-side .add-task-btn { padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.right-side .add-task-btn-cancel { background-color: #e53e3e; color: #fff; border: none; }
.right-side .add-task-btn-cancel:hover { background-color: #c53030; }
.right-side .add-task-btn-submit { background-color: #2d3748; color: #fff; border: none; }
.right-side .add-task-btn-submit:hover { background-color: #4a5568; }
/* RIGHT SIDE end */

Later you'll attach the index.css file in your main component.

A Service for the API Requests

As you did in backend, here in the frontend you also can move all the logic implementations into a different file, so your code will be more readable and maintainable. We can name that file utils.ts, as there will be utilities in it we need.

Before that, just create axiosConfig.ts for the global Axios configuration, which you'll use in utils.ts.

import axios from 'axios';

export default axios.create({ baseURL: '/api' });

Using the above setup, you can be sure that all the HTTP requests will have the /api prefix.

For example, if you use axiosConfig.get('/example'), it will send a GET request to the /api/example. This is an optional configuration, but it's a recommended way to have non-repetitive code.

As you'll have a few use cases for sending HTTP requests to the server, you can have separate utilities file for those operations:

• Create a new task for a project
• Update a task
• List project's tasks
• Delete a task
• Reorder project's tasks

So below is the utils.ts file:

import axiosConfig from './axiosConfig';
import { toast } from 'react-toastify';

export const getErrorMessage = (error: unknown) => {
    if (error instanceof Error) return error.message;
    return String(error)
}

export const getTasks = async (projectId) => {
    if (!projectId) {
        toast.error("Project is required!");
        return;
    }

    try {
        const response = await axiosConfig.get(`/tasks?project_id=${projectId}`);
        const { success, tasks, message } = response.data;

        if (success) {
            return tasks;
        } else {
            toast.error(message);
            return [];
        }
    } catch (err) {
        toast.error(getErrorMessage(err));
        return [];
    }
}

export const reorderTasks = async (projectId, start, end) => {
    try {
        const response = await axiosConfig.put('/tasks', {
            project_id: projectId,
            start,
            end,
        });
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

export const editTask = async (task) => {
    if (!task.id) return;
    if (!task.title) {
        toast.error("Title is required!");
        return;
    }

    try {
        const response = await axiosConfig.put(`/tasks/${task.id}`, {
            title: task.title,
            description: task.description,
        });
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

export const deleteTask = async (id) => {
    if (!id) {
        toast.error("Invalid task!");
        return;
    }

    try {
        const response = await axiosConfig.delete(`/tasks/${id}`);
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

export const createTask = async (task, projectId) => {
    if (!projectId) {
        toast.error("Project is required!");
        return;
    }
    if (!task.title) {
        toast.error("Title is required!");
        return;
    }

    try {
        const response = await axiosConfig.post(`/tasks?project_id=${projectId}`, {
            title: task.title,
            description: task.description,
        });
        const { success, message } = response.data;

        toast[success ? 'success' : 'error'](message);
    } catch (err) {
        toast.error(getErrorMessage(err));
    }
}

In the above file, you'll find the following functions:

• getErrorMessage: Returns the error message if the input is an instance of Error – otherwise, converts it to a string.
• getTasks: Retrieves tasks for a given project ID using Axios. Displays an error toast if the project ID is missing or if the API request is unsuccessful.
• reorderTasks: Sends a PUT request to reorder tasks within a project based on start and end positions. Displays a success or error toast based on the API response.
• editTask: Sends a PUT request to update task information. Validates that the task has an ID and a title before making the request. Displays a success or error toast based on the API response.
• deleteTask: Sends a DELETE request to delete a task by its ID. Displays a success or error toast based on the API response.
• createTask: Sends a POST request to create a new task for a given project ID. Validates that the project ID is present, and the task has a title before making the request. Displays a success or error toast based on the API response.

React.js Components

Now, since you have utilities ready, in the resources/react/components folder, you can create the components you need to use in your Main.tsx.

First, create SelectProject.tsx, which will be responsible for choosing the current project:

import {getTasks} from "../utils";

function SelectProject({projectId, projects, setProjectId, setTasks}) {
    const selectProject = (e) => {
        const value = e.target.value;
        setProjectId(value);
        if (value === '') {
            setTasks([]);
        } else {
            getTasks(value).then((tasksData) => setTasks(tasksData));
        }
    };

    return (
        <div className="projects">
            <select className="projects-select"
                    value={projectId}
                    onChange={selectProject}>
                <option value="" defaultValue>Choose a project</option>
                {projects.map((project) => (
                    <option key={project.id}
                            value={project.id}>{project.name}</option>
                ))}
            </select>
        </div>
    );
}

export default SelectProject;

The SelectProject component renders a dropdown menu allowing the user to select a project. When a project is selected, it updates the state with the selected project ID, fetches tasks for that project using the getTasks utility function, and updates the state with the retrieved tasks, providing dynamic interaction with project selection and task loading.

Then create TaskList.tsx, which will be responsible for rendering the project's tasks and for their drag and drop manipulations:

import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
import Task from "./Task";
import {reorderTasks} from "../utils";

const getItemStyle = (isDragging, draggableStyle) => ({
    background: isDragging ? 'lightgreen' : 'grey',
    ...draggableStyle,
});

function TaskList({ tasks, setIsModalEditOpen, setModalEditTask, setIsModalDeleteOpen, setModalDeleteTaskId, projectId, setTasks })
{
    const handleDragEnd = (result) => {
        if (!result.destination || result.destination.index === result.source.index) {
            return;
        }

        const items = Array.from(tasks);
        const [reorderedItem] = items.splice(result.source.index, 1);
        items.splice(result.destination.index, 0, reorderedItem);
        reorderTasks(projectId, result.source.index + 1, result.destination.index + 1);

        setTasks(items);
    };

    return (
        <DragDropContext onDragEnd={handleDragEnd}>
            <Droppable droppableId="droppable">
                {(provided) => (
                    <ul {...provided.droppableProps} ref={provided.innerRef}>
                        {tasks.map((task, index) => (
                            <Draggable key={task.id.toString()} draggableId={task.id.toString()} index={index}>
                                {(provided, snapshot) => (
                                    <li ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                        className="task-item"
                                        style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
                                    >
                                        <Task task={task}
                                              setIsModalEditOpen={setIsModalEditOpen}
                                              setModalEditTask={setModalEditTask}
                                              setIsModalDeleteOpen={setIsModalDeleteOpen}
                                              setModalDeleteTaskId={setModalDeleteTaskId}
                                        />
                                    </li>
                                )}
                            </Draggable>
                        ))}
                        {provided.placeholder}
                    </ul>
                )}
            </Droppable>
        </DragDropContext>
    );
}

export default TaskList;

The TaskList component utilizes the react-beautiful-dnd library to implement a draggable task list. It renders a list of tasks, allowing users to drag and drop tasks to reorder them, with drag-and-drop functionality triggering a function (handleDragEnd) that updates the task order both visually and in the backend using the reorderTasks utility function.

Now, create Task.tsx, which will be responsible for a single Task from a list:

function Task({ task, setIsModalEditOpen, setModalEditTask, setIsModalDeleteOpen, setModalDeleteTaskId })
{
    const handleEdit = () => {
        setModalEditTask(task);
        setIsModalEditOpen(true);
    };

    const handleDelete = () => {
        setModalDeleteTaskId(task.id);
        setIsModalDeleteOpen(true);
    };

    return (
        <div className="task-item-content">
            <span className="task-project">
                <span className="task-project-name">
                    {task.project.name}
                </span>
                <span className="task-time">
                    Created {task.created}
                </span>
               </span>
            <span className="task-title">{task.title}</span>
            <div className="task-actions">
                <button className="task-edit-btn"
                    onClick={handleEdit}>Edit</button>
                <button className="task-delete-btn"
                    onClick={handleDelete}>Delete</button>
            </div>
        </div>
    );
}

export default Task;

The Task component represents a single task item. It displays task details including the project name, creation time, and title, and provides buttons to trigger actions such as editing and deleting the task, with corresponding handlers (handleEdit and handleDelete).

Next, create AddTaskForm.tsx, which will be responsible for the task form for adding tasks to the current selected project:

import {createTask} from "../utils";

function AddTaskForm({newTask, setNewTask, projectId, reloadTasks })
{
    const clearTaskCreate = () => {
        setNewTask({title: '', description: ''});
    };
    const submitTaskCreate = () => {
        createTask(newTask, projectId).then(() => {
            setNewTask({title: '', description: ''});
            reloadTasks();
        });
    };

    return (
        <>
            <h2 className="add-task-header">Add Task</h2>

            <h3 className="add-task-header">Title</h3>
            <input type="text"
                   className="add-task-input"
                   onChange={(e) => setNewTask({
                       ...newTask,
                    title: e.target.value
                   })}
                   value={newTask.title}
            />
            <h3 className="add-task-input-header">Description</h3>
            <textarea className="add-task-textarea"
                      onChange={(e) => setNewTask({
                          ...newTask,
                        description: e.target.value
                      })}
                      value={newTask.description || ''}
            />
            <div className="add-task-actions">
                <button className="add-task-btn add-task-btn-cancel"
                        onClick={clearTaskCreate}>Clear
                </button>
                <button className="add-task-btn add-task-btn-submit"
                        onClick={submitTaskCreate}>Add</button>
            </div>
        </>
    );
}

export default AddTaskForm;

The AddTaskForm component provides a form for adding new tasks. It includes input fields for the task title and description, with buttons to clear the form or submit the task creation, and it utilizes the createTask utility function to handle the task creation process, triggering a reload of tasks upon success.

Then, create ModalEdit.tsx, which will be responsible for the modal popup for editing and submitting changes to a task:

import {Modal} from "react-responsive-modal";
import React from "react";
import {editTask} from "../utils";

function ModalEdit({
    isModalEditOpen, setIsModalEditOpen, setModalEditTask,
    modalEditTask, reloadTasks
}) {
    const submitTaskEdit = () => {
        setIsModalEditOpen(false);
        editTask(modalEditTask).then(() => {
            reloadTasks();
        });
    };

    return (
        <Modal open={isModalEditOpen} center
            onClose={() => setIsModalEditOpen(false)}>
            <div className="modal-content">
                <h2 className="modal-header">Edit Task</h2>
                <h3 className="modal-input-header">Title</h3>
                <input type="text" value={modalEditTask.title}
                       className="modal-input"
                       onChange={(e) => setModalEditTask({
                           ...modalEditTask,
                        title: e.target.value
                       })}
                />
                <h3 className="modal-input-header">Description</h3>
                <textarea className="modal-textarea"
                          onChange={(e) => setModalEditTask({
                              ...modalEditTask,
                            description: e.target.value
                          })}
                          value={modalEditTask.description || ''}
                />
                <div className="modal-actions">
                    <button className="modal-btn modal-btn-cancel"
                            onClick={() => setIsModalEditOpen(false)}
                    >Close
                    </button>
                    <button className="modal-btn modal-btn-submit"
                            onClick={submitTaskEdit}
                    >Save</button>
                </div>
            </div>
        </Modal>
    )
}

export default ModalEdit;

The ModalEdit component displays a modal for editing task details. It includes input fields for modifying the task title and description, and buttons to close the modal or save the changes, using the editTask utility function to handle the task editing process and triggering a reload of tasks upon successful editing.

Next, create ModalDelete.tsx, which will be responsible for submitting a task deletion:

import {Modal} from "react-responsive-modal";
import {deleteTask} from "../utils";

function ModalDelete({
    isModalDeleteOpen, setIsModalDeleteOpen,
    modalDeleteTaskId, reloadTasks
}) {
    const submitTaskDelete = () => {
        setIsModalDeleteOpen(false);
        deleteTask(modalDeleteTaskId).then(() => {
            reloadTasks();
        });
    };

    return (
        <Modal open={isModalDeleteOpen} onClose={() => setIsModalDeleteOpen(false)} center>
            <div className="modal-content">
                <h2 className="modal-header">Delete Task</h2>
                <p className="modal-question">
                    Are you sure you want to delete this task?
                </p>
                <div className="modal-actions">
                    <button className="modal-btn modal-btn-cancel"
                            onClick={() => setIsModalDeleteOpen(false)}
                    >Cancel</button>
                    <button className="modal-btn modal-btn-submit"
                            onClick={submitTaskDelete}
                    >Yes</button>
                </div>
            </div>
        </Modal>
    );
}

export default ModalDelete;

The ModalDelete component displays a modal for confirming the deletion of a task. It provides options to either cancel the deletion or proceed with deleting the task, utilizing the deleteTask utility function and triggering a reload of tasks upon successful deletion.

And lastly, set up the Main.tsx by using the above-defined components.

import { useState } from 'react';
import {getTasks} from "./utils";
import "react-responsive-modal/styles.css";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ModalEdit from "./components/ModalEdit";
import ModalDelete from "./components/ModalDelete";
import TaskList from "./components/TaskList";
import SelectProject from "./components/SelectProject";
import AddTaskForm from "./components/AddTaskForm";

function Main () {
    const [projectId, setProjectId] = useState('');
    const projectsData = document.getElementById('app').getAttribute('data-projects');
    const projects = JSON.parse(projectsData);
    const [tasks, setTasks] = useState([]);
    const [isModalEditOpen, setIsModalEditOpen] = useState(false);
    const [modalEditTask, setModalEditTask] = useState({id: '', title: '', description: ''});
    const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
    const [modalDeleteTaskId, setModalDeleteTaskId] = useState('');
    const [newTask, setNewTask] = useState({title: '', description: ''});

    const reloadTasks = () => {
        getTasks(projectId).then((tasksData) => setTasks(tasksData));
    };

    return (
        <div>
            <ToastContainer autoClose={2000} />
            <ModalEdit isModalEditOpen={isModalEditOpen}
                       setIsModalEditOpen={setIsModalEditOpen}
                       modalEditTask={modalEditTask}
                       setModalEditTask={setModalEditTask}
                       reloadTasks={reloadTasks}
            />
            <ModalDelete isModalDeleteOpen={isModalDeleteOpen}
                         setIsModalDeleteOpen={setIsModalDeleteOpen}
                         modalDeleteTaskId={modalDeleteTaskId}
                         reloadTasks={reloadTasks}
            />
            <div className="left-side">
                {tasks.length > 0 ? (
                    <TaskList tasks={tasks}
                              setIsModalEditOpen={setIsModalEditOpen}
                              setModalEditTask={setModalEditTask}
                              setIsModalDeleteOpen={setIsModalDeleteOpen}
                              setModalDeleteTaskId={setModalDeleteTaskId}
                              projectId={projectId}
                              setTasks={setTasks}
                    />
                ) : (
                    <div className="no-tasks">
                        {projectId === '' ? (
                            <p>Choose a project to see its tasks.</p>
                        ) : (
                            <p>This project has no tasks.</p>
                        )}
                    </div>
                )}
            </div>
            <div className="right-side">
                <div className="right-side-wrapper">
                    <SelectProject projectId={projectId}
                                   projects={projects}
                                   setProjectId={setProjectId}
                                   setTasks={setTasks}
                    />
                    {projectId === '' ? (
                        <div className="no-project-selected">
                            <p>Please select a project.</p>
                        </div>
                    ) : (
                        <AddTaskForm newTask={newTask}
                                     setNewTask={setNewTask}
                                     projectId={projectId}
                                     reloadTasks={reloadTasks}
                        />
                    )}
                </div>
            </div>
        </div>
    );
}

export default Main;

The Main component is a central component that managing project and task-related functionalities. It includes modals for editing and deleting tasks, a task list with dynamic updates, a project selection dropdown, and a form for adding new tasks, leveraging state management and utility functions for smooth user interaction.

Final Results

At this point, all the components are ready to interact with each other. So you can build the frontend assets and run the server:

npm run build && php artisan serve

By visiting http://127.0.0.1:8000 you'll get this kind of result:

GIF generated from a local working project

That's it!

Now you can easily integrate React.js into your Laravel app without using any additional Laravel tools (like Inertia). And as a result, you can continue to maintain your Laravel app to build more scalable APIs with its authentication and other stuff.

So, this can be just an example app for your next full-stack Laravel and React.js project.

Conclusion

With this article, you built a single-page, full-stack Tasklist app using React.js (with TypeScript) with Vite.js as frontend technologies, Laravel as a backend framework, and react-beautiful-dnd package for having draggable items.
Now you know how to manually integrate React.js in your Laravel app and maintain it.

You can find the complete code of the project here on my GitHub⭐, where I actively publicize much of my work about various modern technologies.
For more information, you can visit my website: boolfalse.com

Feel free to share this article. 😇

We just published a 14-hour course on the freeCodeCamp.org YouTube channel that will teach you how to build and deploy a feature-rich file manager application using Laravel (the PHP framework), Inertia, and Vue.js.

This comprehensive course was created by experienced developer Zura Sekhniashvili, also known as The Codeholic. He has created many popular courses. By the end of this course, you'll be equipped with the skills and knowledge to tackle a range of file management challenges, all while harnessing the potential of Laravel, PHP, Inertia, and Vue.js.

What You'll Learn

While building a file management application, you will gain expertise in various functionalities, including:

• Creating folders to maintain a structured hierarchy.
• Seamlessly uploading files and folders to the application.
• Efficiently deleting and downloading files as needed.
• Implementing robust search capabilities for locating files quickly.
• Enabling file sharing to collaborate with others effectively.
• Integrating Amazon Web Services (AWS) S3 for secure file storage.
• Deploying your finished project on a custom domain for the world to see.

Here are all the sections in the course:

• Project Setup
• Install Laravel Breeze
• Email Verification
• DB Overview, Models & Migrations
• Explore Intertia Folder Structure
• Authentication Layout
• Define Main Routes
• Create Root Folder On User Registration
• Creating Folder
• Save Folder Path
• Show Files into table
• Navigate into Second Level of Folders
• Create Folders Inside Subfolder
• Implement Breadcrumbs
• Uploading Files
• Show Human Readable File size
• Show File Icons
• Show File Progress
• Display Error When File Already Exists
• Implement Load More
• Increase max_file_uploads
• Deleting Files
• Implement Downloading Files
• Show Success Notifications
• Implement Trash
• Implement Favourites
• Sharing Files to Others
• Implement Shared With Me Page
• Implement Shared By Me Page
• Searching for Files
• Connect to AWS S3
• Download Files from S3
• Project Deployment & Bug Fixing

Whether you're a seasoned developer looking to expand your skill set or a beginner eager to dive into the world of web development, this course has something for everyone. You can watch the full course on the freeCodeCamp.org YouTube channel (14-hour watch).

Laravel is the most popular PHP framework, with its elegant syntax, extensive feature set, and developer-friendly environment. And it's gained significant traction in recent years.

The Laravel ecosystem is constantly being updated with new features. Laravel 10 is exciting!

Among its many strengths is the robust support for APIs (Application Programming Interfaces). This enables seamless communication and integration between different software applications.

In this article, we will delve deeper into the world of Laravel APIs. We'll explore their capabilities, benefits, and how to leverage Laravel's features to build powerful and secure APIs.

What is an API?

To understand Laravel's API capabilities, you'll want to make sure you know what APIs are really all about and why they're so important.

APIs serve as a connector or a bridge that lets one application communicate with the other and exchange data with each other.

There are rules and protocols that govern how these applications interact. The API provider sets some rules and the Developer (API consumer) sets their own rules.

How Do APIs Work?

Paystack, for example, has what they call a Paystack gateway. It provides this as an API (that is, the interface to interact with. Remember the acronym for API?) that developers can integrate into their website.

When a user tries to make a purchase on the website, the website tells the gateway to handle the payment and the Paystack gateway process the payment. It then tells the site that the user has paid, and the site will allow the users to complete and receive their purchase.

Why are APIs Important?

The vital role APIs play is that they let developers leverage the functionalities of a different application without having to build those features themselves.

APIs also make it possible for two independent applications to interact and exchange data. You can think of it as two applications chatting 😀. Irrespective of the software system they operate on, APIs let them communicate.

The entire web today operates through various chains of communication. They power everything from social media login mechanisms to payment gateways, geolocation services, and much more.

APIs offer some advantages, such as:

1. Modularity: APIs promote modularity by allowing applications to be built in separate components that can be developed, tested, and maintained independently.
2. Reusability: APIs enable code and functionality to be reused, saving development time and effort.
3. Scalability: APIs allow applications to scale by handling increased traffic and distributing tasks across multiple systems.
4. Integration: APIs facilitate integration with external services, enabling developers to leverage the power of other applications and services.
5. Flexibility: APIs provide the flexibility to adapt and evolve applications by adding new features and integrating them with emerging technologies.

Now that you hopefully understand the significance of APIs, let's explore how Laravel simplifies the process of building APIs with its elegant syntax and powerful features.

APIs in Laravel

Laravel has expressive syntax, powerful tools, and comprehensive support for building robust APIs.

It's routing system makes it easier for developers to expose their application's functionalities and data to other applications. You can enable interactions and still preserve security.

Laravel's powerful routing system lets developers easily define routes that are exclusive to APIS, permitting them to handle incoming requests and give proper responses with data.

These routes are configured to reply using request methods called HTTP methods that specify the action to be performed. These Methods (GET, POST, PUT, and DELETE) let developers create RESTful APIs that follow the principles of resource-based routing.

In order to handle these API requests, Laravel's controllers contain the logic for processing these requests. Controllers serve as intermediaries between the routes and the underlying application.

Controllers allow developers to organize and structure their API logic effectively. Laravel's controllers can fetch data from databases, perform business logic operations, and return responses in a specified format, such as JSON or XML.

Authentication and Security Concerns

Ensuring the security of your APIs is very important as it helps protect sensitive data and limit user access based on their level of authorization.

Laravel provides various systems for authentication through tokens or API keys. Authenticating API requests ensures that only authorized users utilize certain API endpoints and Laravel's robust mechanisms makes this easy.

Laravel's middleware adds another layer of security. It serves as a series of filters that intercept requests and responses. These interceptions are ways of performing various validations, checks, and transformations.

You can use middleware to enforce rate limiting, validate incoming data, or modify the response format.

Common API Features

Laravel simplifies the implementation of common API features, making it easier for developers to build robust and scalable APIs. Let's explore some of these features:

Rate Limiting

API rate limiting allows you to control the number of requests that can be made to your API within a specific time frame.

This helps you prevent abuse and ensure fair usage of your API resources. Laravel provides built-in rate limiting capabilities, enabling you to define rate limits based on IP addresses, authenticated users, or other criteria.

Caching

Caching is a technique that can significantly improve the performance of your API by storing the responses to frequently requested data.

Laravel offers powerful caching mechanisms that allow you to cache API responses, reducing the load on your server and enhancing the overall user experience.

With Laravel's caching capabilities, you can store the responses to API requests in memory or on disk.

API Versioning

API versioning is a crucial aspect of API development, as it allows you to manage changes to your API over time while ensuring backward compatibility for existing consumers.

Laravel offers tools and conventions for versioning your APIs, enabling you to introduce changes and enhancements without breaking the existing functionality for your API consumers.

By incorporating versioning into your API development workflow, you can effectively manage and control the evolution of your API, provide stability to existing consumers, and introduce new features or improvements in a controlled manner.

How to Extend Laravel's API Support

There are some third-party packages available within the Laravel ecosystem that allow you to extend and enhance Laravel's API capabilities.

These packages provide additional functionality, such as advanced authentication mechanisms, request validation, API documentation generation, and more.

One such popular package is Laravel Passport, which simplifies the implementation of OAuth2 authentication for your API.

OAuth2 is a heavily adopted authentication protocol that enables secure authorization and authentication between applications.

Laravel Passport seamlessly integrates with Laravel's authentication system, making it a breeze to add OAuth2 authentication to your API and integrate with external applications that rely on OAuth2.

Another notable package is DingoAPI, which provides a robust set of tools for building RESTful APIs in Laravel.

DingoAPI offers features like request and response transformation, API versioning, rate limiting, and error handling that complements Laravel's existing capabilities.

It provides additional flexibility and control over your API development process.

By leveraging these third-party packages, you can extend Laravel's API support according to your specific project requirements, saving development time and effort while benefiting from the expertise and contributions of the Laravel community.

Conclusion

Laravel's API support makes it an exceptional choice for developing robust and secure APIs in PHP.

You can leverage Laravel's powerful routing system, expressive controllers, and built-in authentication mechanisms to create APIs that seamlessly integrate with other applications and services.

Whether you are building a web application that requires integration with external services or developing a standalone API for others to consume.

Laravel provides the necessary tools, conventions, and ecosystem support to create robust, secure, and highly functional APIs.

Embrace Laravel's API capabilities, and unlock the potential to build powerful and interconnected web applications.

Laravel's simplicity and MVC architecture make it an ideal PHP framework for building web applications.

In this article, I will show you how to set up Laravel on your Windows machine and configure it to run on a custom domain name.

This guide is best suited for a beginner trying to get Laravel up and running quickly and easily. But even as an advanced programmer, you'll likely find fresh insights into how you can simplify the process of configuring a Laravel project. So let's dive in!

How to Install and Start Xampp

Xampp is an open-source tool that allows you to run an Apache server, MySQL database, and other tools from a single interface for development.

You can download and install Xampp from here: https://www.apachefriends.org/download.html.

First, launch your Xampp Interface and start your Apache and MySQL Server.

The Xampp Interface

Next, click on Explorer to launch your Xampp htdocs folder. Delete the files and folders inside the folder. Now you can setup your Laravel application.

How to Set Up Laravel

Inside the htdocs folder, you can clone your existing Laravel application or set up a fresh installation using composer create-project laravel/laravel example-app. In this case, "example-app" is your project name but you can replace it with your preferred name for the project.

The Laravel Directory Structure on htdocs

Open the htdocs folder in your preferred code editor. I will be using VScode for my example.

Replace the APP_URL value in the .env file of your Laravel project with the custom domain name:

APP_URL=https://project.test

You can replace "project.test" with your prefered test domain name.

How to Configure Your Hosts File

In your Windows file explorer, navigate to the "hosts" file located at C:\Windows\System32\drivers\etc\hosts and open it with VSCode (or whatever editor you're using). I'd advise that you use VSCode with admin privileges.

etc directory containing the hosts file and other files

Add the following line to the file:

127.0.0.1 project.test

This will map the hostname "project.test" to the local IP address "127.0.0.1".

Now, if you launch your Apache server and visit project.test on your browser, it loads the "index of" project.

Index of' The Laravel Directory on Browser

This is because for your Laravel application to work, it needs to load the public folder. If you can load public.test/public on your browser, you will be redirected to the Laravel project. To fix that, you can configure the Apache root directory.

How to Configure Your Apache Root Directory

In your Windows file explorer, navigate to and open the "httpd.conf" file which contains the Apache configuration. It's located at C:\xampp\apache\conf\httpd.conf . You should also use VSCode with admin privileges in this case.

Right below # Virtual hosts, add the following:

<VirtualHost *:80>
    ServerName project.test
    DocumentRoot "C:/xampp/htdocs/project/public"
    <Directory "C:/xampp/htdocs/project/public">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Note: Replace project.test with your custom domain name and C:/xampp/htdocs/project/public with the path to your public folder.

Stop and restart the Apache server from your Xampp interface and try visiting "http://project.test" on your browser to see the Laravel project's homepage.

Conclusion

You can have multiple projects with their own custom domains by setting them up in different directories inside the htdocs directory and specifying their individual Apache configurations.

If this article was helpful to you. Share it with friends or drop me a shout out on Twitter @adebowale1st.

I wondered if it was an M1 issue or because I had yet to shut the machine down. I shut down, and the problem persisted. And I couldn't find anything online indicating that it was an issue with M1. So how could I fix it?

In this tutorial, you'll learn:

• Why does the Error 504 occur?
• What is Laravel Valet and how does it work?
• Valet commands you should know
• How to fix the 504 error and speed up performance in Valet

Why does the Error 504 occur?

Error 504 Nginx

Error 504, also known as "Gateway timeout", is an error that occurs when a server takes longer than usual to respond to an HTTP request. This makes it unable to complete the request cycle.

The Gateway timeout is a server-side error caused by several things. It can result from network connectivity issues when the server exceeds the default limit of 256M or an execution time of 60 seconds, an overloaded server, firewall, and so on.

This error happens with local servers, too, such as XAMPP, WAMP and Valet, during the local development lifecycle.

This article will help you fix this problem on Valet by adding some configurations to speed up the server request lifecycle.

What is Laravel Valet and How Does It Work?

Laravel Valet is a development environment for macOS, Windows, and other operating systems. Once installed, Valet runs Nginx processes in the background when your laptop comes on.

Unlike other development environments like XAMPP and WAMP, you'll have to manually start your server each time you set out to work. Valet then uses DnsMasq to proxy all parked applications to a .test domain.

So, for instance, you would access on XAMPP server http://localhost/application but on valet, you would do http://application.test, and it will point to where the application is installed.

Working with Valet means you don't have to put all applications in an htdocs or www directory. Instead, any random directory you create will work just perfectly in Valet.

Helpful Valet Commands You Should Know:

• valet park: Registers all applications/sites in a directory and exposes them with the .test domain.

cd ~/project_directory
valet park

• valet parked: Gives a tabular breakdown of all registered sites. Information like site name, SSL, URL, and path is available.

cd ~/project_directory
valet parked

• valet secure: Secures your application with an SSL certificate and makes the site accessible over HTTPS.

cd ~/project_directory/site
valet secure

• valet unsecure: Use this command to unsecure your site and revert to serving over HTTP.

cd ~/project_directory/site
valet unsecure

• valet isolate: Isolates a particular site and makes it run on a different PHP version that's not the globally installed version. You can run php -v on the terminal to see the version. But if some of your applications want to downgrade or upgrade, you should use the isolate command and specify the version you need. The isolate command below, enforce the site to use PHP version 7.4:

cd ~/project_directory/site
valet isolate @php7.4

• valet unisolate: Reverts a site back to the globally installed PHP version.

cd ~/project_directory/site
valet unisolate

• valet restart: The restart command ensures all valet services are restarted. It's useful when configurations are modified, updated, and installed.

cd ~/project_directory/site
valet restart

• valet -v: This command helps check the the current Valet version. Not only that, but the command also shows a list of all available commands and descriptions of what they do in Valet.

~/project_directory/site
valet -v

Valet available commands

How to Speed Up Performance in Valet

Over in the terminal, we will need to create a file www.conf in a directory and then add the configuration settings we need.

Get your PHP global version and copy it like this:

php -v

Navigate to the directory and replace the 7.4 with the PHP version you copied earlier.

cd /opt/homebrew/etc/php/7.4/php-fpm.d

Create a www.conf file like this:

touch www.conf

Open the file so you can add the valet configuration settings:

open -a TextEdit www.conf

The command opens up the www.conf file in your text editor and you can update the file with these settings:

pm.max_children = 200
pm.start_servers = 20
pm.min_spare_servers = 10
pm.max_spare_servers = 20
pm.process_idle_timeout = 10s
pm.max_requests = 500

Save and close the file from the text editor.

Let's go through each line we added to the www.conf file:

• pm is an acronym for process manager, and the setting will impact how the process manager controls every child process. The possible values available to us include static, on-demand, and dynamic.
• pm.max_children is a static option, indicating the maximum number of the child processes, which we have set to 200.
• pm.start_servers, pm.max_spare_servers and pm.min_spare_servers: These are dynamic values, and the child processes are set dynamically based on the server directives – that is, start_servers = 20, min_spare_servers = 10 and max_spare_servers = 20.
• pm.process_idle_timeout: the total time taken for an idle request not processed to be killed/terminated is set to a default value of 10 seconds (s). Other units can be estimated in minutes (m), hours (h) or days (d).
• pm.max_requests: This refers to the maximum number of requests a child process can handle at a given time before it's killed/terminated. If the request executes the maximum, it becomes idle, and the pm gets rid of it.

Finally, restart all services from the terminal using the sudo brew command. Notice again the 7.4 – that's because of my global PHP version.

sudo brew services restart php@7.4

You can now say bye-bye to the 504 error and slow Valet performance in your local environment.

Wrapping up

In this article, you have learned about working with Laravel Valet and how to get all Valet configurations set up. You also learned how to ensure a fast development environment and get rid of persistent 504 gateway timeout errors.

Keep learning and Happy Coding!

You can find me on LinkedIn and Twitter.

CSRF is a malicious activity that involves an attacker performing actions on behalf of an authenticated user. Fortunately, Laravel provides out-of-the-box measures to prevent this type of vulnerability.

In this tutorial, you'll learn:

• What is CSRF?
• How to prevent a CSRF request
• How and where CSRF verification happens

What is CSRF?

CSRF attacks hijack user sessions. They do this by tricking a user into sending a request through hidden form tags or malicious URLs (images or links) without the user's knowledge.

This attack leads to a change in the state of the user session, data leaks, and attackers can sometimes manipulate end-users data in an application.

CSRF Explainer

The image above illustrates this scenario where an Actor (User) sends a request from malicious.xyz through the webserver to application.xyz. They then realize that their information has been manipulated by updating their password.

How to Prevent CSRF Requests

For each user session, Laravel generates secured tokens that it uses to ensure that the authenticated user is the one requesting the application.

Since this token changes each time a user session is regenerated, a malicious attacker can not access it.

Each time there’s a request to modify user information on the server-side (back end) like POST, PUT, PATCH, and DELETE, you need to include a @csrf in the HTML form request. The @csrf is thus a Blade directive used to generate a hidden token validated by the application.

Blade directive is the syntax used within the Laravel templating engine called Blade. To create a blade file you give it a name – in our case form – followed by the blade extension. This means that the file will have the name form.blade.php.

You use the blade file to render views to users on the webpage. There are a couple of default directives or blade shorthand syntaxes you can use. For example, @if checks if a condition is met, @empty checks if records are not empty, @auth checks if a user is authenticated, and so on.

But here we are more interested with the @csrf directive. Here's how you use it:

<form method="POST" action="{{route('pay')}}">

    @csrf

</form>

Earlier Laravel releases used to look somewhat like this – both work and do the same thing behind the scenes.

<form method="POST" action="{{route('pay')}}">

    <input type="hidden" name="_token" value="{{ csrf_token() }}" />

</form>

When the CSRF token is not present in the form request that gets sent or if it appears invalid, Laravel throws an error message "Page Expired" with a status code 419.

Laravel 419 Page Expired

How and Where CSRF Verification Happens

The VerifyCsrfToken middleware handles CSRF verification within the Laravel application. The middleware is registered in the Kernel.php, and found within the application's web route middleware group. This means the middleware is triggered for requests within the Web, not related to APIs.

protected $middlewareGroups = [
        'web' => [
           .
           .
           .
           .
           .
            \App\Http\Middleware\VerifyCsrfToken::class,
        ],
    ];

The VerifyCsrfToken middleware extends the Illuminate\Foundation\Http\Middleware\VerifyCsrfToken class. This means that the CSRF verification is housed within the class.

Let's dive deeper to learn how Laravel handles the CSRF verification.

Within the class, we have the tokensMatch function.

protected function tokensMatch($request)
    {
        $token = $this->getTokenFromRequest($request);

        return is_string($request->session()->token()) &&
               is_string($token) &&
               hash_equals($request->session()->token(), $token);
    }

The function does two things:

1. $this->getTokenFromRequest gets the token from the incoming request attached via a hidden field or the request's header. The token is decrypted and then returned to the token variable.

protected function getTokenFromRequest($request)
    {
        $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');

        if (! $token && $header = $request->header('X-XSRF-TOKEN')) {
            try {
                $token = CookieValuePrefix::remove($this->encrypter->decrypt($header, static::serialized()));
            } catch (DecryptException $e) {
                $token = '';
            }
        }

        return $token;
    }

2. Cast both request token and session to a string and then use the PHP built-in hash_equals to compare if both strings are equal using the same time. The result of this operation is always a bool (true) or (false).

Wrapping up

In this article, you have learned about CSRF, how to handle and protect against it, and the behind-the-scenes of how Laravel does the verification.

You can read more about this in the Laravel documentation. And you can read more about PHP hash equals in the docs here.

Happy Coding!

In this tutorial, you will learn how to build a single page application. I'll take you through the process step by step, using cutting edge technologies like Laravel 9, Jetstream, Vuejs, Inertiajs, MySQL, Tailwind CSS, and Docker.

Let's get started.

What you need to follow this guide:

To follow along you will need:

• a computer
• to know how to install software
• a basic understanding of HTML, CSS, JavaScript, and PHP
• knowledge of at least one JavaScript framework and an understanding of the MVC design pattern.

This guide is organized into 10 chapters and is based off a live coding series that I record. The live coding series is completely unscripted, so there will be bugs and gotchas there that you won't find in this guide.

You can find the complete playlist at the end of this article.

Everything here should just work, but if it doesn't feel free to ask for help by joining my community on Slack. There you can share code snippets and chat with me directly.

Table of Contents

• What Tech Are We Using?
• How to Setup Your Machine
• How to build the app with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3
• How to Refactor the Admin Dashboard and Create New Admin Pages
• How to Submit Forms with Files
• How to Add the Form to the Component
• How to Store Data
• How to Update Operations
• How to Delete a Resourse
• Wrap up and what's next
• Conclusion

What Tech Are We Using?

First, let's go over the different tools we'll be using in this project.

Docker

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

To simplify this concept, Docker lets you package applications and dependencies in a container.

A containerized application allows you to have a flexible development environment so that you can run different applications without worrying about dependencies, their requirements, and conflicts between different versions. You can easily run applications that, for instance, require two different versions of PHP and MySQL.

Each team member can quickly reproduce the same environment of your application by simply running the same container's configuration.

If you want to learn more about Docker, its Documentation is a great place to start.

Here's a Handbook on Docker essentials, as well, so you can practice your skills.

Mysql

MySQL is an open-source relational database management system. You can use it to organize data into one or more tables with data that may be related to each other.

We need to store data somewhere and here is where MySQL comes into play.

Here are the Docs if you want to read up more. Here's a full free course on MySQL if you want to dive deeper.

Laravel

Laravel is a free, open-source PHP web framework that helps you develop web applications following the model–view–controller architectural pattern.

Laravel is an amazing PHP framework that you can use to create bespoke web applications.

Here's the Laravel Documentation for more info, and here's a full project-based course to help you learn Laravel.

Laravel Sail

Laravel Sail is a lightweight command-line interface for interacting with Laravel's default Docker development environment.

Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

Usually, creating a development environment to build such applications means you have to install software, languages, and frameworks on your local machine – and that is time-consuming. Thanks to Docker and Laravel Sail we will be up and running in no time!

Laravel Sail is supported on macOS, Linux, and Windows via WSL2.

Here's the Documentation if you want to read up on it.

Laravel Jetstream

When building web applications, you likely want to let users register and log in to use your app. That is why we will use Jetstream.

Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application.

It uses Laravel Fortify to implement all the back end authentication logic. Here are the Docs.

Vuejs

Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications.

Vue is a fantastic framework that you can use as a stand-alone to build single-page applications, but you can also use it with Laravel to build something amazing.

Here's the Vue Documentation if you want to read up. And here's a great Vue course to get you started.

Inertia JS

Inertia is the glue between Laravel and Vuejs that we will use to build modern single-page applications using classic server-side routing.

You can learn more about it in the Documentation here.

Tailwind

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that you can use to build any design, directly in your markup

We'll use it in this project to build our design. Here's a quick guide to get you up and running if you aren't familiar with Tailwind.

How to Set Up Your Machine

To follow along with my live coding (and this tutorial), you will need to install Docker desktop on your machine. If you are using Windows, you will also need to enable WSL in your system settings.

Visit the Docker getting started page to install Docker Desktop.

If you are on Windows, enable WSL2 by following the steps here.

If you have any trouble, feel free to reach out or join my community on Slack to get help.

Laravel Installation with Sail

If you have successfully installed Docker Desktop on your machine, we can open the terminal and install Laravel 9.

Open a terminal window and browse to a folder where you want to keep your project. Then run the command below to download the latest Laravel files. The command will put all files inside a folder called my-example-app, which you can tweak as you like.

# Download laravel
curl -s "https://laravel.build/my-example-app" | bash
# Enter the laravel folder
cd my-example-app

Deploy Laravel on Docker using the sail up command

With Docker Desktop up and running, the next step is to start Laravel sail to build all the containers required to run our application locally.

Run the following command from the folder where all Laravel files have been downloaded:

vendor/bin/sail up

It will take a minute. Then visit http://localhost and you should see your Laravel application.

If you run sail up and you get the following error, it is likely that you need to update Docker Desktop:

ERROR: Service 'laravel.test' failed to build:

How to Build the App with Laravel 9, Laravel Sail, Jetstram, Inertia and Vue3

In this section, we will define a basic roadmap, install Laravel 9 with Laravel Sail, Run sail, and build the containers.

I will also take you on a tour of Laravel Sail and the sail commands.

Then we will install Jetstream and scaffold Vue and Inertia files and have a look at the files and available features.

Next, we will populate our database and add the front end provided by Jetstream to register an account and log into a fresh Laravel application.

Finally, we will have a look at the Jetstream dashboard, and the Inertia/Vue Components and then start playing around.

Along the way, we'll disable the registration, enable the Jetstream user profile picture feature, and then add our first Inertia page where we'll render some data taken from the database.

Here's the live coding video if you want to follow along that way:

And if you prefer following along in this written tutorial, here are all the steps.

Just a reminder – you should have Laravel installed with Sail and have Docker set up on your machine. You can follow the steps above to do so if you haven't already.

Laravel Sail Overview – Sail Commands

With Laravel Sail installed, our usual Laravel commands have sligtly changed.

For instance, instead of running the Laravel artisan command using PHP like php artisan, we now have to use Sail, like so: sail artisan.

The sail artisan command will return a list of all available Laravel commands.

Usually, when we work with Laravel, we also have to run the npm and composer commands.

Again, we need to prefix our commands with sail to make them run inside the container.

Below you'll find a list of some commands you will likely have to run:

# Interact with the database - run the migrations
sail artisan migrate # It was: php artisan migrate
# Use composer commands
sail composer require <packageName> # it was: composer require <packageName>
# Use npm commands
sail npm run dev # it was: npm run dev

You can read more in the Sail documentation.

Install Jetstream and Scaffold Vue and Inertia

Let's now install the Laravel Jetstream authentication package and use the Inertia scaffolding with Vue3.

cd my-example-app
sail composer require laravel/jetstream

Remember to prefix the composer command with sail.

The command above has added a new command to Laravel. Now we need to run it to install all the Jetstream components:

sail artisan jetstream:install inertia

Next we need to compile all static assets with npm:

sail npm install
sail npm run dev

Before we can actually see our application, we will need to run the database migrations so that the session table, required by Jetstream, is present.

sail artisan migrate

Done! Jetstream is now installed in our application. If you visit http://localhost in your browser you should see the Laravel application with two links at the top to register and log in.

Populate the Database and Create a User Account

Before creating a new user, let's have a quick look at the database configuration that Laravel Sail has created for us in the .env file.

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=my-example-app
DB_USERNAME=sail
DB_PASSWORD=password

As you can see, Laravel Sail configures everything we need to access the database container that is running on Docker. The DB_DATABASE is the name of the database and it is the same as the project folder. This is why in the previous step we were able to run the migrate command without issues.

Since we already migrated all database tables, we can now use the Laravel built-in user factory to create a new user then use its details to log in our user dashboard.

Let's open artisan tinker to interact with our application.

sail artisan tinker

The command above will open a command line interface that we can use to interact with our application. Let's create a new user.

User::factory()->create()

The command above will create a new user and save its data in our database. Then it will render the user data onto the screen. Make sure to copy the user email so we can use it later to log in. Then exit by typing exit;.

The default password for every user created with a factory is password.

Let's visit the login page and access our application dashboard.

Jetstream Dashboard

After login you are redirected to the Jetstream dashboard, which looks amazing by default. We can customize it as we like, but it is just a starting point.

Jetstream/Vue Components and Inertia Overview

The first thing you may notice after installing Jetstram is that there are a number of Vue components registered in our application. Not only that, also Inertia brings in Vue components.

To use Inertia, we need to get familiar with it when defining routes.

When we installed Jetstream, it created inside the resources/js directory a number of subfolders where all our Vue components live. There are not just simple components but also Pages components rendered by inertia as our Views.

The Jetstream inertia scaffolding created:

• resources/js/Jetstream Here we have 27 components used by Jetstream, but we can use them in our application too if we want.
• resources/js/Layouts In this folder there is the layout component used by inertia to render the dashboard page
• resources/js/Pages This is where we will place all our Pages (views) components. You will find the Dashboard page as well as the Laravel Welcome page components here.

The power of Inertia mostly comes from how it connects Vue and Laravel, letting us pass data (Database Models and more) as props to our Vue Pages components.

When you open the routes/web.php file you will notice that we no longer return a view but instead we use Inertia to render a Page component.

Let's examine the / homepage route that renders the Welcome component.

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

It looks like our usual Route definition, exept that in the closure we are returning an \Inertia\Response by calling the render method of the Inertia class Inertia::render().

This method accepts two parameters. The first is a component name. Here we passed the Welcome Page component, while the second parameter is an associative array that will turn into a list of props to pass to the component. Here is where the magic happens.

Looking inside the Welcome component, you will notice that in its script section, we simply define four props matching with the keys of our associative array. Then inertia will do the rest.

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },
        // 👇 Define the props 
        props: {
            canLogin: Boolean, 
            canRegister: Boolean,
            laravelVersion: String,
            phpVersion: String,
        }
    })
</script>

We can then just call the props inside the template. If you look at the template section you will notice that laravelVersion and phpVersion are referenced in the code as you normally would do with props in Vuejs.

<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
  Laravel v{{ laravelVersion }} (PHP v{{ phpVersion }})
</div>

The dashboard component is a little different. In fact it uses the Layout defined under Layouts/AppLayout.vue and uses the Welcome component to render the Dashboard page content, which is the same as the laravel Welcome page.

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                    <welcome /> 
                </div>
            </div>
        </div>
    </app-layout>
</template>

Inside the layout component you will notice the two inertia components Head and Link.

We can use the Head component to add head elements to our page, like meta tags, page title, and so on. The Link component is a wrapper aroud a standard anchor tag that incercepts click events and prevents full page reload as you can read in the Inertia documentation.

Link Component Head Component

Disable the Registration Feature

If you are following along, the next step I'll take is to disable one on the features Jetstream provides – register an account.

To do that, we can navigate to config/fortify.php and comment out line 135 Features::registration() from the features array.

'features' => [
        //Features::registration(),
        Features::resetPasswords(),
        // Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

If we visit the welcome page we will notice that the register link is gone. Also, the route is no longer listed when we run sail artisan route:list.

Enable Jetstream User Profile Picture

Now let's try to enable the Jetstream feature called ProfilePhotos. As you can guess, this will allow the user to add a profile picture.

To do that we need to visit config/jetstream.php and uncomment line 59 Features::profilePhoto.

    'features' => [
        // Features::termsAndPrivacyPolicy(),
        Features::profilePhotos(), // 👈
        // Features::api(),
        // Features::teams(['invitations' => true]),
        Features::accountDeletion(),
    ],

If you log in you will see that in the user profile, a new section is available to upload a profile picture.

But before doing anything else we need to run sail artisan storage:link so that Laravel creates a symlink to the storage/app/public folder where we will save all user profile images.

Now try to visit the user profile and update the profile picture. If you get a 404 on the image this is because by default Laravel sail assumes we are using Laravel valet and sets the app URL like so APP_URL=http://my-example-app.test in the .env file. Let's change it and use localhost instead.

APP_URL=http://localhost

Now we should be good to go and be able to see and change our profile image!🥳

How to Add our First Inertia Page and Render Records from the DB

Since we are rendering Vue components instead of blade views, it is wise to start sail npm run watch to watch and recompile our Vue components as we create or edit them. Next let's add a new Photos page.

I will start by creating a new Route inside web.php:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos');
});

In the code above I defined a new GET route and then rendered a component that I will place inside the resources/js/Pages/Guest and call Photos. Let's create it.

Create a Guest folder:

cd resources/js/Pages
mkdir Guest
cd Guest
touch Photos.vue

Then let's define a basic component:

<template>
  <h1>Photos Page</h1>
</template>

If we visit http://localhost/photos/ we will see our new page, cool! Let's copy over the page structure from the Welcome page so that we get the login and dashboard links as well.

The component will change to this:

<template>
    <Head title="Phots" />

    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
        <div v-if="canLogin" class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
            <Link v-if="$page.props.user" :href="route('admin.dashboard')" class="text-sm text-gray-700 underline">
                Dashboard
            </Link>

            <template v-else>
                <Link :href="route('login')" class="text-sm text-gray-700 underline">
                    Log in
                </Link>

                <Link v-if="canRegister" :href="route('register')" class="ml-4 text-sm text-gray-700 underline">
                    Register
                </Link>
            </template>
        </div>

        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <h1>Photos</h1>

        </div>
    </div>
</template>

<script>
    import { defineComponent } from 'vue'
    import { Head, Link } from '@inertiajs/inertia-vue3';

    export default defineComponent({
        components: {
            Head,
            Link,
        },

        props: {
            canLogin: Boolean,
            canRegister: Boolean,

        }
    })
</script>

The next step is to render a bunch of data onto this new page. For that we will build a Model and add some records to the database.

saild artisan make:model Photo -mfcr

This command creates a Model called Photo, plus a database migration table class, a factory, and a resource controller.

Now let's define the database table inside the migration we just creted. Visit the database/migrations folder and you should see a file with a name similar to this: 2022_02_13_215119_create_photos_table (yours will be sligly different).

Inside the migration file we can define a basic table like the following:

 public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('path');
            $table->text('description');
            $table->timestamps();
        });
    }

For our table we defined just two new columns, path and description, plus the id, created_at and updated_at that will be created by the $table->id() and by the $table->timestamps() methods.

After the migration we will define a seeder and then run the migrations and seed the database.

At the top of the database/seeders/PhotoSeeder.php file we will import our Model and Faker:

use App\Models\Photo;
use Faker\Generator as Faker;

Next we will implement the run method using a for loop to create 10 records in the database.

    public function run(Faker $faker)
    {
        for ($i = 0; $i < 10; $i++) {
            $photo = new Photo();
            $photo->path = $faker->imageUrl();
            $photo->description = $faker->paragraphs(2, true);
            $photo->save();
        }
    }

We are ready to run the migrations and seed the database.

sail artisan migrate
sail artisan db:seed --class PhotoSeeder

We are now ready to show the data on the Guest/Photos page component. First update the route and pass a collection of Photos as props to the rendered component:

Route::get('photos', function () {
    //dd(Photo::all());
    return Inertia::render('Guest/Photos', [
        'photos' => Photo::all(), ## 👈 Pass a collection of photos, the key will become our prop in the component
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
    ]);
});

Second, pass the prop to the props in the script section of the Guest/Photos component:

props: {
    canLogin: Boolean,
    canRegister: Boolean,
    photos: Array // 👈 Here
}

Finally loop over the array and render all photos in the template section, just under the h1:

<section class="photos">
    <div v-for="photo in photos" :key="photo.id" class="card" >
        <img :src="photo.path" alt="">
    </div>
</section>

Done! if you visit the /photos page you should see ten photos. 🥳

How to Refactor the Admin Dashboard and Create New Admin Pages

In this chapter we will Re-route the Jetstream dashboard and make a route group for all admin pages.

Then we will see how to add a new link to the dashboard and add a new admin page.

Finally we will take a collection of data from the db and render them in a basic table. The default table isn't cool enough, so for those reading this article, I decided to add a Tailwind table component.

Re-route the Jetstream Dashboard

If we look at the config/fortify.php file we can see that around line 64 there is a key called home. It is calling the Home constant of the Route service provider.

This means that we can tweek the constant and redirect the authenticated user to a different route.

Lets go through it step-by-step:

• update the HOME Constant
• make a route group and redirect logged in users to admin/ instead of '/dashboard'

Our application will have only a single user, so once they're logged in it is clearly the site admin – so makes sense to redirect to an admin URI.

Change the HOME constant in app/Providers/RouteServiceProvider.php around line 20 to match the following:

public const HOME = '/admin';

How to Add an Admin Pages Route Group

Next let's update our route inside web.php. We will change the route registered by Jetstream from this:

Route::middleware(['auth:sanctum', 'verified'])->get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

To this:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // other admin routes here
});

The route above is a route group that uses the auth:sanctum middleware for all routes within the group, a prefix of admin, and adds a admin suffix to each route name.

The end result is that we will be able to refer to the dashboard route by name, which now will be admin.dashboard. When we log in, we will be redirected to the admin route. Our dashboard route will respond since it's URI is just / but the goup prefix will prefix every route in the group and make their URI start with admin.

If you now run sail artisan route:list you will notice that the dashboard route has changed as we expected.

Before moving to the next step we need to update both the /layouts/AppLayout.vue and /Pages/Welcome.vue components.

Do you remeber that the dashboard route name is now admin.dashboard and not just dashboard?

Let's inspect the two components and update every reference of route('dahsboard') to this:

route('admin.dahsboard')

and also every reference of route().current('dashboard') to this:

route().current('admin.dashboard')

After all the changes, make sure to recompile the Vue components and watch changes by running sail npm run watch. Then visit the home page to check if everything is working.

How to Add a New Link to the Dashboard

Now, to add a new admin page where we can list all photos stored in the database, we need to add a new route to the group we created earlier. Let's hit the web.php file and make our changes.

In the Route group we will add a new route:

Route::middleware(['auth:sanctum', 'verified'])->prefix('admin')->name('admin.')->group(function () {

    Route::get('/', function () {
        return Inertia::render('Dashboard');
    })->name('dashboard');

    // 👇 other admin routes here 👇

    Route::get('/photos', function () {
        return inertia('Admin/Photos');
    })->name('photos'); // This will respond to requests for admin/photos and have a name of admin.photos

});

In the new route above we used the inertia() helper function that does the same exact thing – returns an Inertia/Response and renders our Page component. We placed the component under an Admin folder inside Pages and we will call it Photos.vue.

Before we create the component, let's add a new link to the dashboard that points to our new route.

Inside AppLayout.vue, find the Navigation Links comment and copy/paste the jet-nav-link component that is actually displaing a link to the dashboard and make it point to our new route.

You will end up having something like this:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <jet-nav-link :href="route('admin.dashboard')" :active="route().current('admin.dashboard')">
        Dashboard
    </jet-nav-link>
    <!-- 👇 here it is our new link -->
      <jet-nav-link :href="route('admin.photos')" :active="route().current('admin.photos')">
        Photos
    </jet-nav-link>
</div>

Our link above uses route('admin.photos') to point to the correct route in the admin group.

If you visit localhost/dashboard and open the inspector, you should see an error:

Error: Cannot find module `./Photos.vue`

It is fine – we haven't created the Photos page component yet. So let's do it now!

How to Add a New Admin Page Component

Make a file named Photos.vue inside the Pages/Admin folder. Below are the bash commands to create the folder and the file via terminal, but you can do the same using your IDE's graphical interface.

cd resources/js/Pages
mkdir Admin
touch Admin/Photos.vue

To make this new page look like the Dashboard page, we will copy over its content. You should end up having something like this:

<template>
  <app-layout title="Dashboard"> <!-- 👈 if you want you can update the page title -->
    <template #header>
      <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
    </template>

    <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
          <!-- 👇  All photos for the Admin page down here -->
          <h1 class="text-2xl">Photos</h1>

        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
});
</script>

I removed a few pieces from the Dashboard template so make sure to double check the code above. The welcome component was removed from the template as it is not required in this page, and also its reference in the script section. The rest is identical.

Feel free to update the page title referenced as prop on the <app-layout title="Dashboard">.

Now when you visit localhost/admin you can click on the Photos menu item and see our Photos page component content. It's not much for now, just an h1.

How to Render Records in the Admin Page as a Table

Now it's time to render the data onto a table. To make things work let's first add our markup and fake that we already have access to as an array of objects and loop over them inside our table. Than we will figure out how to make things work for real.

 <table class="table-auto w-full text-left">
  <thead>
    <tr>
      <th>ID</th>
      <th>Photo</th>
      <th>Desciption</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="photo in photos">
      <td>{{ photo.id }}</td>
      <td><img width="60" :src="photo.path" alt="" /></td>
      <td>{{photo.description}}</td>
      <td>View - Edit - Delete</td>

    </tr>
  </tbody>
</table>

Ok, since we assumed that our component has access to a list of Photos, let's pass a new prop to the component from the Route.

Update the route in web.php and pass to the inertia() function a second argument that will be an associative array. It will have its keys passed as props to the Vue Page component.

In it we will call Photo::all() to have a collection to assign to a photos key, but you can use other eloquent methods if you want to paginate the results, for example.

Route::get('/photos', function () {
    return inertia('Admin/Photos', [
        'photos' => Photo::all()
    ]);
})->name('photos');

To connect the prop to our Page component we need to define the prop also inside the component.

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },
  /* 👇 Pass the photos array as a props 👇 */
  props: {
    photos: Array,
  },
});
</script>

Extra: How to use a Tailwind table component

Tailwind is a CSS framework similar to Bootstrap. There are a number of free to use components that we can grab from the documentation, tweak, and use.

This table component is free and looks nice:https://tailwindui.com/components/application-ui/lists/tables.

We can tweek the Photos page template and use the Tailwind table component to get a nice looking table like so:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                              <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                              View - Edit - Delete
                                              </a>
                                          </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

How to Submit Forms with Files

For the next section we will look into how to submit a form so that we can add a new photo to the database.

• Add a create button
• Add a create route
• Define the PhotosCreate component
• Add a form
• Validate data
• Show validation errors
• Save the file to the filesystem
• Save the model

How to Create a New Photo

Add a link that points to a create route:

<a class="px-4 bg-sky-900 text-white rounded-md" :href="route('admin.photos.create')">Create</a>

Create the route within the admin group:

Route::get('/photos/create', function () {
    return inertia('Admin/PhotosCreate');
})->name('photos.create');

Let's add also the route that will handle the form submission for later:

Route::post('/photos', function () {
    dd('I will handle the form submission')   
})->name('photos.store');

Create the Admin/PhotosCreate.vue component:

    <template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <h1 class="text-2xl">Add a new Photo</h1>
                <!-- 👇 Photo creation form goes here -->

            </div>
        </div>
    </app-layout>
</template>


<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";

export default defineComponent({
  components: {
    AppLayout,
  },

});
</script>

How to Add the Form to the Component

The next step is to add the form to the page and figure out how to submit it.

If you hit the Inertia documentation you will find out that there is a useForm class that we can use to simplify the process.

First, import the module inside the script tag of the Admin/PhotosCreate.vue component:

import { useForm } from '@inertiajs/inertia-vue3';

Next we can use it in the setup function (Vue 3 composition API):

setup () {
    const form = useForm({
      path: null,
      description: null,
    })

    return { form }
  }

In the code above we defined the function called setup() then a constant called form to have the useForm() class assigned to it.

Inside its parentheses we defined two properties, path and description which are the column names of our photos model.

Finally we returned the form variable for the setup function. This is to make the variable available inside our template.

Next we can add the form markup:

<form @submit.prevent="form.post(route('admin.photos.store'))">

<div>
    <label for="description" class="block text-sm font-medium text-gray-700"> Description </label>
    <div class="mt-1">
        <textarea id="description" name="description" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="lorem ipsum" v-model="form.description"/>
    </div>
    <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
        <div class="text-red-500" v-if="form.errors.description">{{form.errors.description}}</div>
</div>
<div>
    <label class="block text-sm font-medium text-gray-700"> Photo </label>
    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
    <div class="space-y-1 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
        <div class="flex text-sm text-gray-600">
        <label for="path" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
            <span>Upload a file</span>
            <input id="path" name="path" type="file" class="sr-only" @input="form.path = $event.target.files[0]" />
        </label>
        <p class="pl-1">or drag and drop</p>
        </div>
        <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
    </div>
    </div>
</div>
<div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div>

<button type="submit" :disabled="form.processing" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
</form>

The code above uses the Vue v-on directive short end syntax @submit.prevent="form.post(route('admin.photos.store'))" on the form tag, and the dom event submit with the prevent modifier.

Then it uses the form variable that we created earlier and a post method. This is available because we are using the useForm class.

Next we point the form to the route named admin.photos.store that we created earlier.

Inside the form we have two groups of inputs. First, we have the textarea that uses the v-model to bind it to the property form.description that we declared before.

The second group uses the form.path in a Tailwind component (showing the markup for a drop file area).

Right now we are allowing users to upload only a single photo using the v-on directive on the input DOM event @input="form.path = $event.target.files[0]".

The last two things to notice are the error handling done via <div class="text-red-500" v-if="form.errors.path">{{form.errors.path}}</div> for the path and also for the description.

Finally we use form.processing to disable the submit button while the form is processing.

The next step is to define the logic to save the data inside the database.

How to Store Data

To store the data, we can edit the route we defined earlier like so:

Route::post('/photos', function (Request $request) {
    //dd('I will handle the form submission')  

    //dd(Request::all());
    $validated_data = $request->validate([
        'path' => ['required', 'image', 'max:2500'],
        'description' => ['required']
    ]);
    //dd($validated_data);
    $path = Storage::disk('public')->put('photos', $request->file('path'));
    $validated_data['path'] = $path;
    //dd($validated_data);
    Photo::create($validated_data);
    return to_route('admin.photos');
})->name('photos.store');

The code above uses dependency injection to allow us to use the parameter $request inside the callback function.

We first validate the request and save the resulting array inside the variable $validated_data. Then we use the Storage facades to save the file in the filesystem and obtain the file path that we store inside the $path variable.

Finally we add a path key to the associative array and pass to it the $path variable. Next we create the resource in the database using the Photo::create method and redirect the user to the admin.photos page using the new to_route() helper function.

Make sure to import the Request class and the Storage facades at the top of the web.php file like so:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Now we can add a new photo in the database and show a list of photos for both the admin and standard visitors.

Next we need to complete the CRUD operations and allow the user to edit/update a photo and delete it.

How to Update Operations

Let's start by adding the routes responsible for showing the forms used to edit the resource and update its values onto the database.

Just under the other routes in the Admin group, let's add the following code:

Route::get('/photos/{photo}/edit', function(Photo $photo){
     return inertia('Admin/PhotosEdit', [
            'photo' => $photo
        ]);
})->name('photos.edit');

The route above uses dependency injection to inject inside the function the current post, selected by the URI /photos/{photo}/edit.

Next it returns the Inertia response via the inertia() function that accepts the Component name 'Admin/PhotosEdit' as its first parameter and an associative array as its second.

Doing ['photo' => $photo] will allow us to pass the $photo model as a prop to the component later.

Next let's add the new Page component under resources/js/Pages/Admin/PhotosEdit.vue

This will be its template:

<template>
    <app-layout title="Edit Photo">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Edit Photo</h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">
                    <div>
                        <label
                            for="description"
                            class="block text-sm font-medium text-gray-700"
                        >Description</label>
                        <div class="mt-1">
                            <textarea
                                id="description"
                                name="description"
                                rows="3"
                                class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"
                                placeholder="lorem ipsum"
                                v-model="form.description"
                            />
                        </div>
                        <p class="mt-2 text-sm text-gray-500">Brief description for your photo</p>
                        <div
                            class="text-red-500"
                            v-if="form.errors.description"
                        >{{ form.errors.description }}</div>
                    </div>

                    <div class="grid grid-cols-2">
                        <div class="preview p-4">
                            <img :src="'/storage/' + photo.path" alt />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Photo</label>
                            <div
                                class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
                            >
                                <div class="space-y-1 text-center">
                                    <svg
                                        class="mx-auto h-12 w-12 text-gray-400"
                                        stroke="currentColor"
                                        fill="none"
                                        viewBox="0 0 48 48"
                                        aria-hidden="true"
                                    >
                                        <path
                                            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                    <div class="flex text-sm text-gray-600">
                                        <label
                                            for="path"
                                            class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
                                        >
                                            <span>Upload a file</span>
                                            <input
                                                id="path"
                                                name="path"
                                                type="file"
                                                class="sr-only"
                                                @input="form.path = $event.target.files[0]"
                                            />
                                        </label>
                                        <p class="pl-1">or drag and drop</p>
                                    </div>
                                    <p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
                                </div>
                            </div>
                            <div class="text-red-500" v-if="form.errors.path">{{ form.errors.path }}</div>
                        </div>
                    </div>

                    <button
                        type="submit"
                        :disabled="form.processing"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    >Update</button>
                </form>
            </div>
        </div>
    </app-layout>
</template>

The template is actually identical to the Create component, except for a few things. The form points to a route that expects a paramenter that we pass as the second argument to the funtion route. It looks like this: <form @submit.prevent="form.post(route('admin.photos.update', photo.id))">.

There is a section where we can see the original photo next to the upload form group:

 <div class="preview p-4">
    <img :src="'/storage/' + photo.path" alt />
</div>

The rest is identical, and here we have the script section:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm } from '@inertiajs/inertia-vue3';

export default defineComponent({
    components: {
        AppLayout,
    },
    props: {
        photo: Object
    },
    setup(props) {
        const form = useForm({
            _method: "PUT",
            path: null,
            description: props.photo.description,
        })

        return { form }
    },

});

Notice that we are passing a props object with the photo key, which allows us to reference the model in the template.

Next, this _method: "PUT", line of code is required to be able to submit a PUT request instead of the POST request called on the form tag.

Now let's implement the logic to handle the form submission inside the Route below.

In web.php just under the previous route, let's add one that responds to the PUT request submitted by our form.

Route::put('/photos/{photo}', function (Request $request, Photo $photo)
    {
        //dd(Request::all());

        $validated_data = $request->validate([
            'description' => ['required']
        ]);

        if ($request->hasFile('path')) {
            $validated_data['path'] = $request->validate([
                'path' => ['required', 'image', 'max:1500'],

            ]);

            // Grab the old image and delete it
            // dd($validated_data, $photo->path);
            $oldImage = $photo->path;
            Storage::delete($oldImage);

            $path = Storage::disk('public')->put('photos', $request->file('path'));
            $validated_data['path'] = $path;
        }

        //dd($validated_data);

        $photo->update($validated_data);
        return to_route('admin.photos');
    })->name('photos.update');

The route logic is straigthforward. First we validate the description, next we check if a file was uploaded and if so we validate it.

Then we delete the previously uploaded image Storage::delete($oldImage); before storing the new image onto the datadabse and update the resource using $photo->update($validated_data);.

As before with the store route, we redirect to the admin.photos route using return to_route('admin.photos');.

How to Delete a Resource

The last step we need to take is to write the logic to delete the photo. Let's start by adding the route.

Right below the previous route we can write:

Route::delete('/photos/{photo}', function (Photo $photo)
{
    Storage::delete($photo->path);
    $photo->delete();
    return to_route('admin.photos');
})->name('photos.delete');

This route is also using a wildcard in its URI to identify the resource. Next, its second paramenter is the callback that uses the dependency injection as before. Inside the callback we first delete the image from the filesystem using Storage::delete($photo->path);.

Then we remove the resource from the database $photo->delete(); and redirect the user back return to_route('admin.photos'); like we did in the previous reoute.

Now we need to add a delete button to the table we created in one of the previous steps to show all photos.

Inside the template section of the component Admin/Photos.vue within the v-for, we can add this Jetstream button:

<jet-danger-button @click="delete_photo(photo)">
    Delete
</jet-danger-button>

Find the table cell that has the ACTIONS comment and replace the DELETE text with the button above.

So the final code will be:

<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

As you can see there is a @click event listener on the button. It calls a method delete_photo(photo) that we need to define along with a bunch of other methods to have a nice modal opening to ask for confirmation from the user.

First import the Inertia helper function useForm:

// 0. Import the useForm class at the top of the script section along with all required components
import { useForm } from '@inertiajs/inertia-vue3';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";

Remember to register the component JetDangerButton inside the components object before moving forward.

Next add the setup() function in the script section and implement the logic required to submit the form and show a modal. The comments in the code will guide you thorought all the steps.

// 1. add the setup function
setup() {
    // 2. declare a form variable and assign to it the Inertia useForm() helper function 
    const form = useForm({
        // 3. override the form method to make a DELETE request
        _method: "DELETE",
    });
    // 4. define a reactive object with show_modal and photo property
    // this will be used to figure out when to show the modal and the selected post values
    const data = ref({
        show_modal: false,
        photo: {
            id: null,
            path: null,
            description: null,
        }
    })

    // 5. define the delete_photo function and update the values of the show_modal and photo properties
    // of the reactive object defined above. This method is called by the delete button and will record the details 
    // of the selected post
    const delete_photo = (photo) => {
        //console.log(photo);
        //console.log(photo.id, photo.path, photo.description);
        data.value = {
            photo: {
                id: photo.id,
                path: photo.path,
                description: photo.description
            },
            show_modal: true
        };
    }
    // 6. define the method that will be called when our delete form is submitted
    // the form will be created next
    const deleting_photo = (id) => {
        form.post(route('admin.photos.delete', id))
        closeModal();
    }
    // 7. delare a method to close the modal by setting the show_modal to false
    const closeModal = () => {
        data.value.show_modal = false;
    }
    // 8. remember to return from the setup function the all variables and methods that you want to expose 
    // to the template.
    return { form, data, closeModal, delete_photo, deleting_photo }

}

Finally outside the v-for loop add the modal using the following code. You can place this where you want but not inside the loop.

 <JetDialogModal :show="data.show_modal">
    <template #title>
        Photo {{ data.photo.description.slice(0, 20) + '...' }}
    </template>
    <template #content>
        Are you sure you want to delete this photo?

    </template>
    <template #footer>
        <button @click="closeModal" class="px-4 py-2">Close</button>
        <form @submit.prevent="deleting_photo(data.photo.id)">
            <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
        </form>
    </template>
</JetDialogModal>

This is our final JavaScript code:

import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import TableComponent from "@/Components/TableComponent.vue";
import { Link } from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/inertia-vue3';
import JetDialogModal from '@/Jetstream/DialogModal.vue';
import JetDangerButton from '@/Jetstream/DangerButton.vue'
import { ref } from "vue";
export default defineComponent({
    components: {
        AppLayout,
        Link,
        TableComponent,
        JetDialogModal,
        JetDangerButton
    },
    props: {
        photos: Array,
    },

    setup() {

        const form = useForm({
            _method: "DELETE",
        });
        const data = ref({
            show_modal: false,
            photo: {
                id: null,
                path: null,
                description: null,
            }

        })


        const delete_photo = (photo) => {
            //console.log(photo);
            console.log(photo.id, photo.path, photo.description);
            data.value = {
                photo: {
                    id: photo.id,
                    path: photo.path,
                    description: photo.description
                },
                show_modal: true
            };
        }
        const deleting_photo = (id) => {
            form.post(route('admin.photos.delete', id))
            closeModal();
        }

        const closeModal = () => {
            data.value.show_modal = false;


        }

        return { form, data, closeModal, delete_photo, deleting_photo }

    }
});
</script>

And here we have the HTML:

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">Photos</h2>
        </template>

         <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
              <!-- All posts goes here -->
              <h1 class="text-2xl">Photos</h1>
              <a class="px-4 bg-sky-900 text-white rounded-md" href>Create</a>
              <div class="flex flex-col">
                  <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
                          <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                              <table class="min-w-full divide-y divide-gray-200">
                                  <thead class="bg-gray-50">
                                      <tr>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >ID</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Photos</th>
                                          <th
                                              scope="col"
                                              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                                          >Description</th>
                                          <th scope="col" class="relative px-6 py-3">
                                              <span class="sr-only">Edit</span>
                                          </th>
                                      </tr>
                                  </thead>
                                  <tbody class="bg-white divide-y divide-gray-200">
                                      <tr v-for="photo in photos" :key="photo.id">
                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div
                                                  class="text-sm text-gray-900"
                                              >{{ photo.id }}</div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="flex items-center">
                                                  <div class="flex-shrink-0 h-10 w-10">
                                                      <img
                                                          class="h-10 w-10 rounded-full"
                                                          :src="photo.path"
                                                          alt
                                                      />
                                                  </div>
                                              </div>
                                          </td>

                                          <td class="px-6 py-4 whitespace-nowrap">
                                              <div class="text-sm text-gray-900">
                                                {{ photo.description.slice(0, 100) + '...' }}
                                              </div>
                                          </td>
                                        <!-- ACTIONS -->
                                         <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="#" class="text-indigo-600 hover:text-indigo-900">
                                            View - Edit - 

                                            <jet-danger-button @click="delete_photo(photo)">
                                                Delete
                                            </jet-danger-button>
                                            </a>
                                        </td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
         <JetDialogModal :show="data.show_modal">
            <template #title>
                Photo {{ data.photo.description.slice(0, 20) + '...' }}
            </template>
            <template #content>
                Are you sure you want to delete this photo?

            </template>
            <template #footer>
                <button @click="closeModal" class="px-4 py-2">Close</button>
                <form @submit.prevent="deleting_photo(data.photo.id)">
                    <jet-danger-button type="submit">Yes, I am sure!</jet-danger-button>
                </form>
            </template>
        </JetDialogModal>
    </app-layout>
</template>

That's it. If you did everything correctly you should be able to see all photos, create new photos as well as edit and delete them.

I will leave you some home work. Can you figure out how to implement the view and edit links before the delete button in the section below?

<!-- ACTIONS -->
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
    <a href="#" class="text-indigo-600 hover:text-indigo-900">
    View - Edit - 

    <jet-danger-button @click="delete_photo(photo)">
        Delete
    </jet-danger-button>
    </a>
</td>

Wrapup and What's next

During this guide we took our first steps and learned how to build a single page application using Laravel as our backend framework and Vue3 for the front end. We glued them together with Inertia js and built a simple photo application that lets a user manage photos.

We are just at the beginning of a fantastic journey. Learning new technologies isn't easy, but thanks to their exaustive documentations we can keep up and build awesome applications.

Your next step to master Laravel, Vue3, Inertia and all the tech we have been using so far is to hit their documentation and keep learning. Use the app we have build if you want, and improve it or start over from scratch.

Just keep that in mind, coding is fun so relax and enjoy it.

Conclusion

This is just an overview of how I'd build a single page application using these technologies.

If you are familiar with server-side routing and Vuejs then you will enjoy bulding a single page application with Laravel, Inertia, and Vuejs. The learning curve isn't that steep plus you have great documentation to help you out.

I hope you've enjoyed this guide. If so, let me know and consider subscribing to my YouTube channel and following me on Twitter. And if you get stuck, get in touch for help.

You can find the source code for this guide here.

Follow me on Twitter Join me on slack

Logging into a website via third parties is ubiquitous online. Almost every other member-based website allows you to log in with accounts like Facebook, Twitter, and Google.

If you’ve ever visited NFT marketplaces like OpenSea or Rarible, you would have noticed they allow you to sign in with a crypto wallet like MetaMask.

This login process affirms you’re the owner of the Ethereum address in question and allows the system to authenticate your access. Very similar to how a username and password would allow you access to a gated part of a website.

Prerequisites

Before starting this tutorial, I’ll assume you have a basic understanding of Laravel, and that you can initialise a new project in your environment. Even though this tutorial is Laravel-focused, with some tweaking you can apply this to any other PHP project. The concepts remain the same.

I’ve tried to keep this as generic as possible. I only focus on the MetaMask signing and validation, without restricting you to using it with specific front-end technologies (like React or Vue) or authentication scaffolding (like Breeze or Jetstream). This gives you the freedom to implement it with minimal effort into an existing project.

We’ll need the following before we start:

• A new or existing Laravel project.
• MetaMask installed in your browser.

Boilerplate

We’ll start out with some boilerplate code by importing Bootstrap 5 and creating a simple “Log in with MetaMask” button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MetaMask Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 text-center">
            <button class="btn btn-primary mt-5">Log in with MetaMask</button>
        </div>
    </div>
</div>
</body>
</html>

Easy enough. 😀

We’re also importing the ethers.js library that will allow us to interact with the Ethereum blockchain via MetaMask, which in this case acts as the interface to the provider (Infura by default).

Quick tip:

Providers allow us to interact with the Ethereum blockchain. To connect to the network, you need access to a node. Depending on the type of node, it could require a large amount of disk space and bandwidth. Running a node can also be a complex process, especially if you want to focus on development rather than maintaining and operating a node.

Enter, the provider! Companies like Infura provide these nodes as a service, so you don’t need to worry about running your own. Instead, you can access this functionality via their APIs.

You may run into older tutorials that state MetaMask injects web3.js (a library providing similar functionality to ethers.js) into the page by default. This is no longer the case.

Detect the Provider

We’ll start off our new web3Login() function by checking that the browser has a provider available. This would be the case if you have MetaMask installed. You can also test this code where MetaMask is not installed (for example, an incognito window) to confirm the detection works.

Add the click event to the button:

<button class="btn btn-primary mt-5" onclick="web3Login();">Log in with MetaMask</button>

And start off the function with our detection snippet in our <head> below the ethers.js import:

<script>
    async function web3Login() {
        if (!window.ethereum) {
            alert('MetaMask not detected. Please install MetaMask first.');
            return;
        }
    }
</script>

Go ahead and test this in a browser with no MetaMask installed.

Install Laravel Dependencies

Before we continue with the front-end login process, we need to put some endpoints in place. Our login script will need these so the user can sign a message with their wallet, and our system can then verify their signature.

We need to install two dependencies via Composer to help us perform hashing and use elliptic curve cryptography:

composer require kornrunner/keccak
composer require simplito/elliptic-php

Add Laravel Routes

Open your routes/web.php file and add the following routes:

Route::get('/web3-login-message', 'Web3LoginController@message');
Route::post('/web3-login-verify', 'Web3LoginController@verify');

The first route will return the message that needs to be signed, and the second route will verify the signed message.

Create the Login Controller

Now it’s time to create the controller that will generate the message and perform the verification.

Create a new file called Web3LoginController.php in app/Http/Controllers and add the following code to it:

<?php

namespace App\Http\Controllers;

use Elliptic\EC;
use Illuminate\Http\Request;
use Illuminate\Support\Str;
use kornrunner\Keccak;

class Web3LoginController
{
    public function message(): string
    {
        $nonce = Str::random();
        $message = "Sign this message to confirm you own this wallet address. This action will not cost any gas fees.\n\nNonce: " . $nonce;

        session()->put('sign_message', $message);

        return $message;
    }

    public function verify(Request $request): string
    {
        $result = $this->verifySignature(session()->pull('sign_message'), $request->input('signature'), $request->input('address'));
        // If $result is true, perform additional logic like logging the user in, or by creating an account if one doesn't exist based on the Ethereum address
        return ($result ? 'OK' : 'ERROR');
    }

    protected function verifySignature(string $message, string $signature, string $address): bool
    {
        $hash = Keccak::hash(sprintf("\x19Ethereum Signed Message:\n%s%s", strlen($message), $message), 256);
        $sign = [
            'r' => substr($signature, 2, 64),
            's' => substr($signature, 66, 64),
        ];
        $recid = ord(hex2bin(substr($signature, 130, 2))) - 27;

        if ($recid != ($recid & 1)) {
            return false;
        }

        $pubkey = (new EC('secp256k1'))->recoverPubKey($hash, $sign, $recid);
        $derived_address = '0x' . substr(Keccak::hash(substr(hex2bin($pubkey->encode('hex')), 1), 256), 24);

        return (Str::lower($address) === $derived_address);
    }
}

There’s a lot going on in there, so let’s break it down:

Create the message

The message() method creates the message we’ll supply to the front end. It also includes a random token to ensure the message to sign will be different each time.

This token is usually referred to as a nonce, or number used once. In this case, however, it’s a simple random string.

The purpose of this is to prevent replay attacks where, if a malicious user obtained your signature, they could use that to authenticate as you on the website.

The message is then saved to the session and returned to the front end.

Verify the message

Once you have signed the message with your private key via MetaMask, your Ethereum address as well as the signature is sent to the back end for verification.

If it passes the verification, we determine the Ethereum address that signed the message and ensure it matches the Ethereum address sent from the front end during the signing process.

If that passes, we send an OK or ERROR back to the front end.

It’s also at this point where you can add additional logic like logging the member in or creating a new member record if one doesn’t exist for the Ethereum address in question.

Finalise the Front End

Now that the backend is ready, we can complete the rest of the front end. This will involve launching MetaMask, asking the user to sign the message, and then verifying the signature by using our back-end route.

Below is the full web3Login() function:

<script>
    async function web3Login() {
        if (!window.ethereum) {
            alert('MetaMask not detected. Please install MetaMask first.');
            return;
        }

        const provider = new ethers.providers.Web3Provider(window.ethereum);

        let response = await fetch('/web3-login-message');
        const message = await response.text();

        await provider.send("eth_requestAccounts", []);
        const address = await provider.getSigner().getAddress();
        const signature = await provider.getSigner().signMessage(message);

        response = await fetch('/web3-login-verify', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                'address': address,
                'signature': signature,
                '_token': '{{ csrf_token() }}'
            })
        });
        const data = await response.text();

        console.log(data);
    }
</script>

Let’s break it down:

• We first set the provider to the MetaMask provided window.ethereum.
• Next, we grab the message returned from our back end (refresh the page a few times to try this out, you will notice the random token changes every time).
• Once we have the message, we obtain the user’s Ethereum address and ask them to sign the message.

• We then POST the address and signature to the back end (along with our Laravel CRSF token) for verification.
• The result is either an OK or ERROR string which we output in the console.
• At this point you may elect to show an error message (if applicable) or redirect the user if they were registered or logged in during the back-end verification.

Conclusion

In this tutorial we covered the basics of adding a MetaMask login to your website. I hope this has proven useful! Sign up to my newsletter or visit my blog where I’ll share insightful web development articles to supercharge your skills.

Here are some ideas to take your integration one step further:

• Integrate a library like Web3Modal to provide users with various wallet options instead of only MetaMask.
• With the user’s Ethereum address validated, provide them with functions like displaying their ETH balance.

Resources

• Download MetaMask.
• View the ethers.js documentation.
• Latest Laravel documentation.

Hey, how are you doing? In this article, I'm going to show you how you can install Laravel 8 on your phone.

To get the most out of this guide, you should have some knowledge of PHP and you should know what Laravel is. But if you don't, don't worry – I will explain the basics so you can get started.

What Is Laravel?

Laravel is a web application framework with expressive, elegant syntax. It's built on PHP, which means that Laravel is PHP but it makes things easier to work with.

It comes with lots of packages for various features, like authentication, so we don't need to write authentication ourselves. To learn more about what Laravel can do, you can visit the site at laravel.com.

Why I wrote this tutorial

I created this tutorial because I want people interested in programming who don't have a laptop or pc to be able to build things on their phones.

My last post on freeCodeCamp made me realize that people are interested in learning how the tech works, so that's why I'm making more guides like this.

So let's dive into it. In this tutorial I am going to show you how you can install composer.php and use it to set up Laravel 8 on your phone 🔥🔥.

I am Precious Oladele, and I'm almost 19 this month 🥴. I'm from Nigeria and I will be taking you through this process. And if you're wondering how I know so much about this, it's because I also don't have a laptop so I explore with my phone instead 😎.

Requirements

To go through this tutorial, you'll need an Android phone with V6.0+.

Set up

We need to head over to the Play Store and download Termux:

Termux is a Linux-based system which we can use on our phones. It's as simple as using your regular Linux – you can install anything, even Kali, Ubuntu, or whatever you want. But for this tutorial we will be using it to set up Laravel 8 on our mobile phone.

Download composer

Before we download composer, we need to open up our Termux app and type in this command:

termux-setup-storage

It'll ask you for storage permissions, so go ahead and click accept. Once you're done head over to https://getcomposer.org/download/.

We need to grab everything there. But before that we need to install PHP so we can use it in our app. To do that in your Termux, type in the following command:

apt install php

and click enter. You should see this:

Once that is done head over to the composer page and grab the code. We need to do this because Termux is Linux-based. If it was Windows there would be a simple button to download composer.exe there.

Copy the whole code and head over to Termux where you can paste it in. Then click enter.

When composer is installed you should see something like this:

How to Install Laravel 8

Before we install Laravel 8, let's check to see if we have a composer.phar file. In your Termux type this command:

ls

and hit enter. You will see the available files there.

You can see the composer.phar file and a storage folder. The storage folder grants access to your file manager. Remember the termux-setup-storage command you wrote first.

Now let's install Laravel 8. To do so we can either create a project or just install it globally. But it's a bit of a long process when installing it globally on your phone because you need to set a path and so on, and it can be pretty confusing. So in this guide we will create a project instead.

In your Termux go ahead and type this:

php composer.phar create-project laravel/laravel myapp

myapp is just the project name – you can change it to whatever you want. Then hit enter and wait for the magic to happen.

When you see the below, it means that Laravel has been installed:

Easy as pie. Now to test it, you can cd into myapp by typing cd myapp. Then you can run the Laravel server with php artisan serve.

Voilà – development has started 🔥

Now you can open http://127.0.0.1:8000 in your browser and see that Laravel is running:

Also make sure you do this so your Termux app won't force close when you are coding: 😎

That's it!

Thanks for reading. I hope you learned something from this tutorial. You should now be able to install Laravel on your Android phone and start using it to build apps.

If you want more content from me, you can subscribe to my YouTube channel 🙏😁
DevStack