Create Custom 404 Page In Laravel

Many of you are really sick of seeing standard 404 pages or Sorry! Page your look for not found. Here is a really simple way where you can create a custom tailored one with Laravel.

---

Prerequisites

I hope you have a fresh installation of Laravel or existing Laravel application. If you dont know how to install Laravel then use the following composer command to get started with.

composer create-project --prefer-dist laravel/laravel blog

Make sure to be updated with the latest stable version of Laravel. The above command installs latest version of Laravel

---

Step 1 - Add Fallback URL

First and the foremost thing in this step is to add Fallback URL in web.php file and api.php file

Add in the end of your web.php & api.php file. As you can see below that I am directly calling 404 from fallback route.

/** Fallback Route */
Route::fallback(function () {
    /** This will check for the 404 view page unders /resources/views/errors/404 route */
    return view('errors.404');
});

---

Step 2 - Custom HTML 404 Blade File

Now create 404.blade.php file inside /resources/views/errors/ folder. You can add any image or text you need, mine looks like the following

@extends('layouts.master')
@section('content')
    <br><br>
    <div class="row">
        <div class="col-md-12 text-center">
            <h3>Oops! Article not found.</h3> <br>
            <h2><a href="{{ url('/') }}"><span class="text-underline">Try Here!</span> Get some fresh ones.</a></h2>
        </div>
    </div>
    <br><br>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <img src="{{ asset('images/404.svg?cb='.env('CB_VERSION')) }}" alt="404 Image" class="width100">
        </div>
    </div>
@endsection

When seen in browser it looks like the following image:

Images used from UNDRAW. The best part of Undraw is you can change the colours to your needs.

---

Step 3 - Testing

Check if this works for you in the browser by typing wrong url. And there you go. You see a beautiful 404 page like the one in the above image.

Make sure to have some navigation or some URL so that user can click on it easily and go back to some page. This is not a mandatory but makes user experience good.

---

Conclusion

Ya thats it folks, you will be up and running with custom tailored 404 page.

NOTE: If you use php artisan route:cache in your production then with the above closure route you may get error to overcome that please see this article Unable to prepare route [{fallbackPlaceholder}] for serialization. Uses Closure In Laravel

Articles For You

Cache Static Files With NGINX Server

Hotlink Protection In Nginx

Automate Repeating Tasks In Linux Server With Cronjobs

Redirect www to a non-www Website Or Vice Versa

Create Custom 404 Page In Laravel

Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software

Run Raw Queries Securely In Laravel

Free SSL Certificate For CPanel

Add Google ADS In AMP (Accelerated Mobile Pages) Website

Accessors And Mutators In PHP Laravel

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

Ensure text remains visible during Webfont load

Laravel Clear Cache Of Route, View, Config Command

Install RabbitMQ with Docker & Running with NodeJS

Dependency Dropdowns With Javascript And PHP