Laravel Custom 404 Page
Hello Guys,
Today I am going to show a small but helpful tutorial. Suppose we are working on any website. We have designed a very good and attractive layout. But between our attractive, there are some boring Exception pages. Suppose Our visitor visits any URL which doesn't exist. Then the user is redirected to the default boring 404 page. Which looks totally different from our website design.
So, to solve this boring issue. I will show you how we can change the default laravel boring 404 page to an attractive custom design page.
Let's Start.
This tutorial is divided into multiple small steps.
Laravel Installation
Our first task is to Install the laravel project. So we can move to our next steps. We can install the laravel project by running the following command in the terminal or command prompt.
composer create-project laravel/laravel 404
In this command 404 is my project directory name. You can use any name. I am working on laravel 9. So keep fulfilling all the requirements for laravel 9.
Let's check default Laravel 404 page
For this just open any invalid URL in your browser. It will redirect you 404 page UI. Which looks like the below.
This is Default 404 page for laravel.
How to change the ui design
Today, I am going to share the easiest way to change the look of a 404 page. For this, we will use laravel default pages. We just need to publish the error pages file to the resource folder.
For publishing, error pages run the following command in your terminal or command prompt.
Publish error pages.
php artisan vendor:publish --tag=laravel-errors
After publishing files, a new folder will be created in the view folder with name errors. There are multiple files with the name of error codes. But we will only work on the 404 page.
Let's open the 404 page. Placed in resources/views/errors. Let's open the 404 file. it looks like the one below.
@extends('errors::minimal')
@section('title', __('Not Found'))
@section('code', '404')
@section('message', __('Not Found'))
We can change the file as per our requirements. For the demo, I will only change a few codes. I will use a SVG image to sow a 404 error.
After implementing the code.
@section('title', __('Not Found'))
@section('message')
<img src="404.svg" style="width:600px" />
@endsection
Our new 404 page will look like the following.
By following these easy steps we can change the 404-page design. I hope you like this tutorial. You can also suggest your views or thoughts.
Keep sharing posts with your friends and team.
Also, check my other posts.
- Laravel Login to only one device system
- Laravel Change User Password with Php artisan
- UI Developer Interview Questions
- Laravel blade loop helpers
- Laravel array helpers
Thanks
Templatebench
We are Template bench. We love programming. We also love to share tips and tricks with you.