Menu

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.
Laravel default 404 page
 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.
custom 404 page

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.

  1. Laravel Login to only one device system
  2. Laravel Change User Password with Php artisan
  3. UI Developer Interview Questions
  4. Laravel blade loop helpers
  5. Laravel array helpers

Thanks

830
Search

Ads