What is Livewire?

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. Livewire relies solely on AJAX requests to do all its server communications. Livewire completely sends Ajax requests to do all its server-side communication without writing any line of Ajax script.

In this blog, we have described a step-by-step guide for Creating CRUD (Create, Read, Update, Delete) Application in the Laravel 8 framework by using the Livewire package.

Table Of Contents

1. Create Laravel Application
2. Configure Database Details
3. Install Livewire Package
4. Create Model and Migration
5. Create Livewire Component and View
6. Define Routes
7. Run Project

Step 1: Create Laravel Application

First, open Terminal and run the following command to create a fresh laravel project:

composer create-project --prefer-dist laravel/laravel larawire-crud-app

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new larawire-crud-app

Step 2: Configure Database Details

After, Installation Go to the project root directory, open .env file, and set database detail as follow:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

Step 3: Install Livewire Package:

composer require livewire/livewire

Step 4: Create Model and Migration:

php artisan make:model Category -m

-m this argument will create Migration in Single Command.

Now, Open migration file of category from database/migration and replace code in up() function:

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->id();
        $table->string('name')->nullable();
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

Migrate the database using the following command:

php artisan migrate

Now, Open Category.php model from app/Models and update code into Category.php Model:

namespace App\Models;

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

class Category extends Model
{
    use HasFactory;

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

    public $timestamps = true;
}

Step 5: Create Livewire Component and View

Run the below command to create a livewire view and component.

php artisan make:livewire category

After running this command you will find two files in the following path app/Http/Livewire/Contact.php and resources/views/livewire/contact.blade.php

Now, open app\Http\Livewire\Category.php and update the following code into that file:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Category as Categories;

class Category extends Component
{
    public $categories, $name, $description, $category_id;
    public $updateCategory = false;

    protected $listeners = [
        'deleteCategory'=>'destroy'
    ];

    // Validation Rules
    protected $rules = [
        'name'=>'required',
        'description'=>'required'
    ];

    public function render()
    {
        $this->categories = Categories::select('id','name','description')->get();
        return view('livewire.category');
    }

    public function resetFields(){
        $this->name = '';
        $this->description = '';
    }

    public function store(){

        // Validate Form Request
        $this->validate();

        try{
            // Create Category
            Categories::create([
                'name'=>$this->name,
                'description'=>$this->description
            ]);
    
            // Set Flash Message
            session()->flash('success','Category Created Successfully!!');

            // Reset Form Fields After Creating Category
            $this->resetFields();
        }catch(\Exception $e){
            // Set Flash Message
            session()->flash('error','Something goes wrong while creating category!!');

            // Reset Form Fields After Creating Category
            $this->resetFields();
        }
    }

    public function edit($id){
        $category = Categories::findOrFail($id);
        $this->name = $category->name;
        $this->description = $category->description;
        $this->category_id = $category->id;
        $this->updateCategory = true;
    }

    public function cancel()
    {
        $this->updateCategory = false;
        $this->resetFields();
    }

    public function update(){

        // Validate request
        $this->validate();

        try{

            // Update category
            Categories::find($this->category_id)->fill([
                'name'=>$this->name,
                'description'=>$this->description
            ])->save();

            session()->flash('success','Category Updated Successfully!!');
    
            $this->cancel();
        }catch(\Exception $e){
            session()->flash('error','Something goes wrong while updating category!!');
            $this->cancel();
        }
    }

    public function destroy($id){
        try{
            Categories::find($id)->delete();
            session()->flash('success',"Category Deleted Successfully!!");
        }catch(\Exception $e){
            session()->flash('error',"Something goes wrong while deleting category!!");
        }
    }
}

Now, Create resources/views/home.blade.php and update the following code into that file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Livewire Crud Example - TechvBlogs</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    @livewireStyles
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Livewire Crud Example - TechvBlogs</a>
        </div>
    </nav>

    <div class="container">
        <div class="row justify-content-center mt-3">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header text-center">
                        <h2>Livewire Crud Example - TechvBlogs</h2>
                        <a href="https://techvblogs.com?ref=LivewireCrudApp" target="_blank">Visit Site</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center mt-3">
            @livewire('category')
        </div>
    </div>
    
    @livewireScripts
</body>
</html>

Next, Open resources/views/livewire/category.blade.php and update the following code into that file:

<div>
    <div class="col-md-8 mb-2">
        <div class="card">
            <div class="card-body">
                @if(session()->has('success'))
                    <div class="alert alert-success" role="alert">
                        
                    </div>
                @endif

                @if(session()->has('error'))
                    <div class="alert alert-danger" role="alert">
                        
                    </div>
                @endif

                @if($updateCategory)
                    @include('livewire.update')
                @else
                    @include('livewire.create')
                @endif
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (count($categories) > 0)
                                @foreach ($categories as $category)
                                    <tr>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            
                                        </td>
                                        <td>
                                            <button wire:click="edit()" class="btn btn-primary btn-sm">Edit</button>
                                            <button onclick="deleteCategory()" class="btn btn-danger btn-sm">Delete</button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="3" align="center">
                                        No Categories Found.
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        function deleteCategory(id){
            if(confirm("Are you sure to delete this record?"))
                window.livewire.emit('deleteCategory',id);
        }
    </script>
</div>

Now, Create resources/views/livewire/create.blade.php and add the following code into that file:

<form>
    <div class="form-group mb-3">
        <label for="categoryName">Name:</label>
        <input type="text" class="form-control @error('name') is-invalid @enderror" id="categoryName" placeholder="Enter Name" wire:model="name">
        @error('name') <span class="text-danger"></span>@enderror
    </div>
    <div class="form-group mb-3">
        <label for="categoryDescription">Description:</label>
        <textarea class="form-control @error('description') is-invalid @enderror" id="categoryDescription" wire:model="description" placeholder="Enter Description"></textarea>
        @error('description') <span class="text-danger"></span>@enderror
    </div>
    <div class="d-grid gap-2">
        <button wire:click.prevent="store()" class="btn btn-success btn-block">Save</button>
    </div>
</form>

Next, Create resources/views/livewire/update.blade.php and update the following code into that file:

<form>
    <input type="hidden" wire:model="category_id">
    <div class="form-group mb-3">
        <label for="categoryName">Name:</label>
        <input type="text" class="form-control @error('name') is-invalid @enderror" id="categoryName" placeholder="Enter Name" wire:model="name">
        @error('name') <span class="text-danger"></span>@enderror
    </div>
    <div class="form-group mb-3">
        <label for="categoryDescription">Description:</label>
        <textarea class="form-control @error('description') is-invalid @enderror" id="categoryDescription" wire:model="description" placeholder="Enter Description"></textarea>
        @error('description') <span class="text-danger"></span>@enderror
    </div>
    <div class="d-grid gap-2">
        <button wire:click.prevent="update()" class="btn btn-success btn-block">Save</button>
        <button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</button>
    </div>
</form>

Step 6: Define Routes

Open routes/web.php and update the following code into that file:

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

Step 7: Run Project

Now all are set to go, open a terminal and run the following command into your terminal.

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000

It’d be a good idea to follow along with the simple demo app that can be found in this GitHub repo.

Read Also: Build Crud App with Laravel and Vue.js

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.

With the rise of Mobile Development and JavaScript frameworks, using a RESTful API is the best option to build a single interface between your data and your client.

PHP has been the most popular web language in the present times by being simple to maintain, and quick to create feature-rich web applications. Websites that are dynamic, interactive, secure, and efficient need a powerful toolset to create and consume APIs.

In this article, you will learn how to build a modern RESTful API in Laravel.

Now let’s look at building a PHP RESTful API with Laravel.

Table of Contents:

1. Prerequisites
2. Understanding Our Application
3. Setup New Laravel App
4. Create MySQL Database
5. Create Model and Migration
6. Create Controller and Request
7. Setup CRUD (Create, Read, Update and Delete)

Step 1: Prerequisites

Let’s look at these technologies as we build our API:

Step 2: Understanding Our Application

You will build a CRUD API. CRUD means Create, Read, Update, and Delete. Our API will have the following endpoints:

Step 3: Setup New Laravel App

To get started, create a Laravel application. To do this, run the following command in your terminal:

composer create-project laravel/laravel rest-api

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new rest-api

Next, start up the Laravel server if it’s not already running:

php artisan serve

You will visit your application on http://localhost:8000.

Step 4: Create MySQL Database

Create a new database for your application.

Login into MySQL and run the following command:

mysql -u<username> -p<password>

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 1791
Server version: 8.0.22-0ubuntu0.20.04.3 (Ubuntu)

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

For Create a new Database, run the following command:

CREATE DATABASE `rest-api`;

Step 5: Create Model and Migration

We can create a Model along with migration, run the following command:

php artisan make:model Post -m

-m this argument will create Migration in Single Command.

A new file named Post.php will be created in the app directory.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $table = 'posts';

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

A migration file will be created in the database/migrations directory to generate the table in our database. Modify the migration file to create a column for name, description, and image, these all are fields that accept string value.

<?php

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

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('image');
            $table->text('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Open the .env file and update the credentials to access your MySQL database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=<your-database-name>
DB_USERNAME=<your-database-username>
DB_PASSWORD=<your-database-password>

Next, you will run your migration using the following command:

php artisan migrate 

Step 6: Create Controller and Request

Create a resource Controller, run the following command:

php artisan make:controller PostController -r

Resource controllers make it painless to build RESTful controllers around resources.

This is the initial content of PostController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

Next, create a Request file, run the following command:

php artisan make:request PostStoreRequest

As many of you already know, there are many ways to validate request in Laravel. Handling request validation is a very crucial part of any application. Laravel has some outstanding feature which deals with this very well. This is the initial content of PostStoreRequest.php:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            //
        ];
    }
}

HTTP Status Codes

We’ve also added the response()->json() call to our endpoints. This lets us explicitly return JSON data and send an HTTP code the client can parse. The most common codes you’ll be returning will be:

• 200 : OK. The standard success code and default option.
• 201 : Created. Object created. Useful for the store actions.
• 204 : No Content. When the action was executed successfully, but there is no content to return.
• 206 : Partial Content. Useful when you have to return a paginated list of resources.
• 400 : Bad Request. The standard option for requests that cannot pass validation.
• 401 : Unauthorized. The user needs to be authenticated.
• 403 : Forbidden. The user is authenticated but does not have the permissions to perform an action.
• 404 : Not Found. Laravel will return automatically when the resource is not found.
• 500 : Internal Server Error. Ideally, you will not be explicitly returning this, but if something unexpected breaks, this is what your user is going to receive.
• 503 : Service Unavailable. Pretty self-explanatory, but also another code that is not going to be returned explicitly by the application.

Step 7: Setup CRUD (Create, Read, Update and Delete)

1. Setup Routes

Note: All API requests will need the header Accept: application/json.

Add the routes to the API routes file, to access all the functions we wrote.

Now, open routes/api.php and update the following code into that file:

Route::get('posts', "[email protected]"); // List Posts
Route::post('posts', "[email protected]"); // Create Post
Route::get('posts/{id}', "[email protected]"); // Detail of Post
Route::put('posts/{id}', "[email protected]"); // Update Post
Route::delete('posts/{id}', "[email protected]"); // Delete Post

or you can add a resource route like this:

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

Now, open app\Http\Controllers\PostController.php and update the following code into that file:

2. Read All Post

For, get the list of all posts. Update the following code into that file:

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */
public function index()
{
   // All Posts
   $posts = Post::all();

   // Return Json Response
   return response()->json([
      'posts' => $posts
   ],200);
}

Get the detail of the post by ID. Update the following code into that file:

/**
 * Display the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function show($id)
{
   // Post Detail 
   $post = Post::findOrFail($id);
   if(!$post){
     return response()->json([
        'message'=>'Post Not Found.'
     ],404);
   }

   // Return Json Response
   return response()->json([
      'post' => $post
   ],200);
}

3. Create Post

Now, open app\Http\Requests\PostStoreRequest.php and update the following code into that file:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        if(request()->isMethod('post')) {
            return [
                'name' => 'required|string|max:258',
                'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
                'description' => 'required|string'
            ];
        } else {
            return [
                'name' => 'required|string|max:258',
                'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
                'description' => 'required|string'
            ];
        }
    }

    /**
     * Custom message for validation
     *
     * @return array
     */
    public function messages()
    {
        if(request()->isMethod('post')) {
            return [
                'name.required' => 'Name is required!',
                'image.required' => 'Image is required!',
                'description.required' => 'Descritpion is required!'
            ];
        } else {
            return [
                'name.required' => 'Name is required!',
                'description.required' => 'Descritpion is required!'
            ];   
        }
    }
}

Now, open app\Http\Controllers\PostController.php and update the following code into that file:

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(PostStoreRequest $request)
{
    try {
        $imageName = Str::random(32).".".$request->image->getClientOriginalExtension();

        // Create Post
        Post::create([
            'name' => $request->name,
            'image' => $imageName,
            'description' => $request->description
        ]);

        // Save Image in Storage folder
        Storage::disk('public')->put($imageName, file_get_contents($request->image));

        // Return Json Response
        return response()->json([
            'message' => "Post successfully created."
        ],200);
    } catch (\Exception $e) {
        // Return Json Response
        return response()->json([
            'message' => "Something went really wrong!"
        ],500);
    }
}

4. Update Post

/**
 * Update the specified resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function update(PostStoreRequest $request, $id)
{
    try {
        // Find Post
        $post = Post::findOrFail($id);
        if(!$post){
          return response()->json([
            'message'=>'Post Not Found.'
          ],404);
        }

        $post->name = $request->name;
        $post->description = $request->description;

        if($request->image) {
            // Public storage
            $storage = Storage::disk('public');

            // Old iamge delete
            if($storage->exists($post->image))
                $storage->delete($post->image);

            // Image name
            $imageName = Str::random(32).".".$request->image->getClientOriginalExtension();
            $post->image = $imageName;

            // Image save in public folder
            $storage->put($imageName, file_get_contents($request->image));
        }

        // Update Post
        $post->save();

        // Return Json Response
        return response()->json([
            'message' => "Post successfully updated."
        ],200);
    } catch (\Exception $e) {
        // Return Json Response
        return response()->json([
            'message' => "Something went really wrong!"
        ],500);
    }
}

5. Delete Post

Delete post by ID. Update the following code into that file:

/**
 * Remove the specified resource from storage.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function destroy($id)
{
    // Post Detail 
    $post = Post::findOrFail($id);
    if(!$post){
      return response()->json([
         'message'=>'Post Not Found.'
      ],404);
    }

    // Public storage
    $storage = Storage::disk('public');

    // Iamge delete
    if($storage->exists($post->image))
        $storage->delete($post->image);

    // Delete Post
    $post->delete();

    // Return Json Response
    return response()->json([
        'message' => "Post successfully deleted."
    ],200);
}

You may or may not be aware that there is an artisan command to create the symbolic link from the storage folder to the public folder.

What it does is, it allows us to access the files. By default, laravel wants you to store your files in the storage directory keeping the public directory clean only for your public files.

This command helps us to generate symbolic links.

php artisan storage:link

It’d be a good idea to follow along with the simple demo app that can be found in this GitHub repo.

Thank you for reading this article!!

Read Also: Laravel Livewire Crud Tutorial

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.

Consider this job:

class VerifyUser implements ShouldQueue
{
    private $user;
    private $socialSecurityNumber;

    public function __construct($user, $socialSecurityNumber)
    {
        $this->user = $user;
        $this->socialSecurityNumber = $socialSecurityNumber;
    }
}

When you dispatch this job, Laravel is going to serialize it so that it can be persisted in the queue store. Let’s take a look at how the final form will look like in the store:

VerifyUser::dispatch($user, '45678AB90');

{
   "uuid":"765434b3-8251-469f-8d9b-199c89407346",
   // ...
   "data":{
      "commandName":"App\\Jobs\\VerifyUser",
      "command":"O:16:\"App\\Jobs\\VerifyUser\":12:{s:22:\"\u0000App\\Jobs\\VerifyUser\u0000user\";N;s:38:\"\u0000App\\Jobs\\VerifyUser\u0000
socialSecurityNumber\";s:9:\"45678AB90\";s:3:\"job\";N;s:10:\"connection\";N;s:5:
\"queue\";N;s:15:\"chainConnection\";N;s:10:\"chainQueue\";N;s:19:\"chainCatchCallbacks\";N;s:5:\"delay\";N;s:11:\"afterCommit\";N;s:10:\"middleware\";a:0:{}s:7:\"chained\";a:0:{}}"
   }
}

Looking at the payload, you can see that the value of socialSecurityNumber is visible to the human eye. Any person—or program—that gains access to the queue store will be able to extract this value.

For most jobs this isn’t a problem. But if the job stores critical information in the payload, it’s better we encrypt it so that only our queue workers can read it while processing the job. To do that, we’ll need to implement the ShouldBeEncrypted interface:

use Illuminate\Contracts\Queue\ShouldBeEncrypted;

class VerifyUser implements ShouldQueue, ShouldBeEncrypted
{
    private $user;
    private $socialSecurityNumber;

    public function __construct($user, $socialSecurityNumber)
    {
        $this->user = $user;
        $this->socialSecurityNumber = $socialSecurityNumber;
    }
}

This interface was introduced in Laravel v8.19.0 (Released on December 15, 2020)

Now the payload will look like this:

{
   "uuid":"765434b3-8251-469f-8d9b-199c89407346",
   // ...
   "data":{
      "commandName":"App\\Jobs\\VerifyUser",
      "command":"eyJpdiI6IjIyNWFQOXVNWn...OTJlYjBhYTFmZmQ4MjU1MDZiMDVhMjk0OTYwMTY3ZTgyYjEifQ=="
   }
}

Any person or program with access to the queue store will not be able to decrypt the job payload.

You can use the ShouldBeEncrypted interface with queued jobs, mailables, notifications, and event listeners.

Laravel is fast out-of-the-box, but you can make it faster if you optimize your configurations and application code. This guide lists a wide range of performance tips from quick wins to advanced techniques that would help you make your Laravel app the lean, mean machine your customers want.

The folks over at Enlightn helped us compile this guide. If you’re looking for an automated performance or security tool for Laravel, do check them out!

Why Performance?

We can all agree that we prefer an app that loads faster to one that’s slow.

According to a Google study, 53% of mobile users leave a site that takes longer than 3 seconds to load. The average mobile site takes about 15 seconds to load. That’s how much performance matters!

Every second your app takes longer to load, you’re probably losing customer conversions. Thankfully, for Laravel apps, it’s not a very difficult problem to solve.

1. Use In-Built Performance Quick Wins

Laravel offers a few in-built performance quick wins that can apply to any app.

The most significant performance quick win is route caching. Did you know that every time you boot your Laravel app, your app determines the middleware, resolves aliases, resolves route groups, and identifies the controller action and parameter inputs for every single route entry?

You can bypass the route processing by caching all the required routing information using the route:cache Artisan command:

“`bash
php artisan route:cache

This command can give you up to a 5x performance boost! It can make a significant impact on your app performance.

Besides route caching, Laravel also offers the following:

- [Configuration caching](https://laravel.com/docs/8.x/configuration#configuration-caching) to bypass parsing your `.env` and `config` files on every app boot.
- [View caching](https://laravel.com/docs/8.x/views#optimizing-views) to pre-compile your Blade template views.
- [Event caching](https://laravel.com/docs/8.x/events#event-discovery-in-production) to cache a manifest of all of your app's events and listeners.

Tip: You should make sure to add the above caching commands to your deployment script so that every time you deploy, your routes, config, views, and events are re-cached. Otherwise, any changes you make to your route or config files will not update in your application.

## 2. Optimize Composer

A common mistake sometimes made by Laravel developers is to install all dependencies in production. Some development packages such as Ignition record your queries, logs, and dumps in memory to give you a friendly error message with context for ease of debugging. While this is useful in development, it can slow down your application in production.

In your deployment script, make sure to use the `--no-dev` flag while installing packages using Composer:

"`bash
composer install --prefer-dist --no-dev -o

Additionally, make sure to use the `-o’ flag in production as above. This enables Composer to optimize the autoloader by generating a “classmap”.

You may choose to use the --classmap-authoritative flag instead of the `-o’ flag for further optimization if your app does not generate classes at runtime. Make sure to check out the Composer documentation on autoloader optimization strategies.

3. Choose The Right Drivers

Choosing the right cache, queue, and session drivers can make quite a difference to application performance.

For caching in production, we recommend the in-memory cache drivers such as Redis, Memcached, or DynamoDB. You may consider local filesystem caching for a single-server setup, although it would be slower than the in-memory options.

For queueing, we recommend the Redis, SQS, or Beanstalkd drivers. The database driver is not suitable for production environments and is known to have deadlock issues.

For sessions, we recommend the Database, Redis, Memcached, or DynamoDB drivers. The cookie driver has the file size and security limitations and is not recommended for production.

4. Queue Your Time-Consuming Tasks

There may be specific tasks that take a long time to perform during a typical web request. Laravel has a best-in-class queueing system that allows us to move time-consuming tasks to queued jobs so that your application can respond to requests with blazing speed.

Common examples of such tasks are parsing and storing a CSV file, interacting with third-party APIs, sending notifications to users, expensive database queries, and updating your search index.

5. Set Compression Headers On Text Format Files

Compression headers can have a significant impact on application performance. Ensure that you enable compression headers on your web server or CDN for text format files, like CSS, JS, XML, or JSON.

Most image formats are already compressed and are not text format files (with the exception of SVG, which is an XML document). So, image formats do not need to be compressed.

You may set up gzip or brotli (preferably both as brotli may not be supported for older browsers) at your web server or CDN level to achieve a huge performance boost.

Typically, compression would be able to reduce your file size by around 80%!

6. Set Cache Headers On Static Assets

Caching can provide a performance boost for your application, especially for static assets such as images, CSS, and JS files. It is recommended to enable cache-control headers at the webserver level or at your CDN level (if applicable). If you wish to set these headers at your Laravel app instead of the webserver, you may use Laravel’s cache control middleware.

Cache headers ensure that browsers don’t request static assets on subsequent visits to your website. This can enhance your user experience as your website loads faster on subsequent visits.

Make sure you use cache-busting so that when you change your CSS or JS code, browsers avoid relying on stale cached content. Laravel Mix provides cache busting out of the box.

7. Consider Using A CDN To Serve Assets

Content Delivery Networks (CDNs) are a geographically distributed group of servers that serve content closer to application visitors by using a nearby server. This enables visitors to experience faster loading times.

Besides faster loading times, CDNs also have other benefits such as decreased web server load, DDoS protection, and analytics on assets served.

Some popular CDNs include Cloudflare, AWS Cloudfront, and Azure CDN. Most CDNs are free for a certain usage threshold. Do consider using CDNs for boosting asset serving performance.

Laravel offers CDN support out of the box for Mix and the asset helper function.

8. Minify Your JS and CSS Code

Minification strips extra code from your application that is not essential for execution (like comments, whitespace, renaming variables with shorter names, and other optimizations). It’s always a good idea to minify JS and CSS files in production.

Laravel Mix provides minification out of the box when you run your production script.

9. Use Cache Wisely

Laravel has caching support built-in. Caching is best used for read-heavy workloads. These workloads typically involve either time-consuming data retrieval or data processing tasks.

Some common use cases of caching could include:

• Caching static pages: Caching static pages is a no-brainer. Laravel’s website uses page caching for every single documentation page.
• Fragment or partial caching: Sometimes, instead of caching full pages, it may be useful to cache page fragments. For instance, you may want to cache the page header that contains the name of the user and a profile pic. Instead of fetching the data from the database every time, you can cache the header fragment in one go.
• Query caching: If your application queries the database on a high frequency for items that seldom change, it may be useful to cache the queries. For instance, if you run an e-commerce store, you might want to cache the items displayed on the store homepage rather than fetching them from the database on every store visit.

Remember that caching is not useful for the “long tail” (items rarely requested). Instead, it should be used carefully for any data retrieval that happens on a high frequency (as compared to data updates).

You must also make sure to invalidate or refresh your cache every time your cached content changes. For instance, if you are caching the profile header, refresh the cache once a user updates their profile pic.

10. Identify Your App’s Performance Bottlenecks

If some of your pages have high loading times or high memory usage, it may be essential to identify performance bottlenecks. Many tools exist within the Laravel ecosystem to help you do that, including Laravel Telescope, Laravel Debugbar, and Clockwork.

Some common performance bottlenecks include:

• N+1 Queries: If your code executes one query for each record, it will result in more network round trips and a larger number of queries. This can be solved in Laravel using eager loading.
• Duplicate Queries: If your code executes the same query more than once for the same request, it may slow down your application. Typically these issues can be solved by extracting data computation or retrieval to a separate class if multiple services or classes need the same set of data.
• High Memory Usage: To reduce memory usage in your application, consider using lazy collections and query chunking for reducing model hydrations. For storing files, check out automatic streaming to reduce memory usage.
• Slow Queries: If you have queries that are taking too long to execute, you should consider query caching and/or using explain statements to optimize query execution plans.

If you are unable to identify performance bottlenecks in your application using the debugging tools mentioned above, you may consider using profiling tools such as XDebug or Blackfire.

Conclusion

Performance is a wide topic, but Laravel has several components built-in such as Mix, queues, and caching that make performance look easy! We hope that you learned something new about boosting your app’s performance.