Create custom error pages in Laravel 8

The standard error pages in Laravel are looking a bit awful. In this tutorial I will show you how you can customize the error pages. Luckily for us this is very easy in Laravel 8. Today we are going to create a custom error page for the 404, 500 & 503 errors!

The first step is to create a blade file for every error response that the server can give. Place the following files in the resources/views/errors folder:

404.blade.php:

@extends('front.layouts.error', [
    'title' => 'Hello, is it me youre looking for?',
    'errorCode' => '404',
    'homeLink' => true,
])

500.blade.php:

@extends('front.layouts.error', [
    'title' => 'Server error',
    'errorCode' => '500',
    'homeLink' => false,
])

503.blade.php

@extends('front.layouts.error', [
    'title' => 'Be right back',
    'errorCode' => '503',
    'homeLink' => false,
])

Laravel will automatically detect these files, and will replace the default error page with this error message. As you can see in the code above these files extend the front.layouts.error page. Add this file in the resources/views/errors folder and add the following code:

...
<div class="flex justify-center max-w-5xl min-h-screen pb-16 mx-auto">
  <div class="leading-none text-center text-black md:text-left">
		  <h1 class="mb-2 text-5xl font-extrabold">{{ $errorCode }}</h1>
				<p class="text-xl text-gray-900">
						@isset($title)
								{{ $title }}
						@else
								Hello, is it me you're looking for?
						@endisset

						@if($homeLink ?? false)
								<a href="{{ url('/') }}" class="font-bold underline transition duration-300 hover:text-blue-600">Go home</a>
						@endif
				</p>
		</div>
</div>
...

This code is an example on the implementation, feel free to customize this to your liking!

That is it, you have now custom 400, 500 & 503 error messages in Laravel! I hope you enjoyed this small tutorial. If you have any questions reach out to me on Twitter!