Skip to content

All topics  /  Laravel

Laravel 10 - Create Custom Error Page with Example

Laravel ·

Teams applying “Laravel 10 - Create Custom Error Page with Example” in a production project can use read the supporting guide to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi all,

Today, I am going to show you Laravel 10 creates a custom error page with an example. In this tutorial, we will learn how to create/build custom error pages in Laravel 10 apps. So we can set the custom error page globally in our Laravel 10 project. In this article, we will implement a how-to set 404 error page in Laravel 10.

Laravel 10 display default error pages 404, 500. But if you want to design these pages. This tutorial will guide you step by step from scratch on how to create a custom 404 error page in Laravel 10.

You can create the following error pages in Laravel 10:

401 Error Page


403 Error Page

404 Error Page

419 Error Page

429 Error Page

500 Error Page

503 Error Page

Let's see how to customize the error page design in the Laravel 10 app.

Step 1: Download Laravel

Let us begin the tutorial by installing a new Laravel application. if you have already created the project, then skip the following step. 

composer create-project laravel/laravel example-app

Step 2: Publish Error Page Default Files

In this step, we will run the Laravel command to create the default error page blade file. when you run the below command then laravel will create an "errors" directory with all error pages in the views folder. so, let's run the below command: 

php artisan vendor:publish --tag=laravel-errors

Step 3: Update 404 Error Page Design

You can update the 404 error page design with the following code:

view/errors/404.blade.php 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            margin-top: 150px;
            background-color: #C4CCD9;
        }
        i{
            font-size:90px !important;
            color:#5D6572;
            margin-top:20px;
        }
        .error-main{
            background-color: #fff;
            box-shadow: 0px 10px 10px -10px #5D6572;
        }
        .error-main h1{
            font-weight: bold;
            color: #444444;
            font-size: 100px;
            text-shadow: 2px 4px 5px #6E6E6E;
        }
        .error-main h6{
            color: #42494F;
        }
        .error-main p{
            color: #9897A0;
            font-size: 14px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row text-center">
            <div class="col-lg-6 offset-lg-3 col-sm-6 offset-sm-3 col-12 p-3 error-main">
                <div class="row">
                    <div class="col-lg-8 col-12 col-sm-10 offset-lg-2 offset-sm-1">
                        <i class="fa fa-frown-o" aria-hidden="true"></i>
                        <h1 class="m-0">404</h1>
                        <h6>Page not found - Nicesnippets.com</h6>
                        <p>Lorem ipsum dolor sit <span class="text-info">amet</span>, consectetur <span class="text-info">adipisicing</span> elit, sed do eiusmod.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Run Laravel App:

All steps have been done, now you have to type the given command and hit enter to run the Laravel app: 

php artisan serve

Now, you have to open the web browser, type the given URL and view the app output: 

http://localhost:8000/tststs

Output:

More on this topic