Apr 21, 2024 | Laravel 11 Laravel
Hello Dev,
In this tutorial, I'll guide you through creating custom error pages for a Laravel 11 application. By default, Laravel offers simple designs for error pages like 404, 500, 503, 419, and 401. However, there are times when we want to integrate our own design theme into these error pages.
I'll walk you through the process step by step, demonstrating how to craft your custom error page design within a Laravel 11 application.
The error pages you can customize in Laravel 11 include:
Below, you can view the default designs for the 404 and 500 error pages:
Now, let's delve into how to modify the design for both the 404 and 500 error pages.
Default 404 Error Page
Default 500 Error Page
To create custom error pages in Laravel 11, follow these steps:
1. Create a Laravel Application (Optional): If you haven't already created a Laravel application, you can do so by running the following command in your terminal:
Read Also: exploring has many through relationships in laravel 11composer create-project laravel/laravel example-app
This command creates a new Laravel project in a directory named example-app.
2. Publish Default Error Pages: Laravel provides default error pages, but you can customize them. To publish these default error pages to your application, run the following command:
php artisan vendor:publish --tag=laravel-errors
This command creates an errors directory within the resources/views directory of your Laravel application, containing Blade templates for each error page.
3. Customize Error Pages: Navigate to the resources/views/errors directory. Here, you'll find Blade templates for each error page (e.g., 404.blade.php, 500.blade.php, etc.). You can customize these templates according to your design theme. For example, to customize the 404 error page, edit the 404.blade.php file.
Example Customization: Below is an example of how you might customize the 404 error page. This example uses a simple design with a custom message and styling:
resources/views/errors/404.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>404 Server Error Page</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<style type="text/css">
html, body{
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
background-color: #E7FFFF;
}
h1, a{
margin: 0;
padding: 0;
text-decoration: none;
}
.section{
padding: 4rem 2rem;
}
.section .error{
font-size: 150px;
color: #008B62;
text-shadow:
1px 1px 1px #00593E,
2px 2px 1px #00593E,
3px 3px 1px #00593E,
4px 4px 1px #00593E,
5px 5px 1px #00593E,
6px 6px 1px #00593E,
7px 7px 1px #00593E,
8px 8px 1px #00593E,
25px 25px 8px rgba(0,0,0, 0.2);
}
.page{
margin: 2rem 0;
font-size: 20px;
font-weight: 600;
color: #444;
}
.back-home{
display: inline-block;
border: 2px solid #222;
color: #fff;
text-transform: uppercase;
font-weight: 600;
padding: 0.75rem 1rem 0.6rem;
transition: all 0.2s linear;
box-shadow: 0 15px 15px -11px rgba(0,0,0, 0.4);
background: #222;
border-radius: 6px;
}
.back-home:hover{
background: #222;
color: #ddd;
}
</style>
</head>
<body>
<div class="section">
<h1 class="error">404</h1>
<div class="page">Ooops!!! The page you are looking for is not found</div>
<a class="back-home" href="#!">Back to home</a>
</div>
</body>
</html>
404 Error Page New Design:
resources/views/errors/500.blade.php
Read Also: implementing many-to-many relationships in laravel 11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>500 Server Error Page</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Fira Code", monospace;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f1;
}
.container {
text-align: center;
margin: auto;
padding: 4em;
img {
width: 256px;
height: 225px;
}
h1 {
margin-top: 1rem;
font-size: 35px;
text-align: center;
span {
font-size: 60px;
}
}
p {
margin-top: 1rem;
}
p.info {
margin-top: 4em;
font-size: 12px;
a {
text-decoration: none;
color: rgb(84, 84, 206);
}
}
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.imgur.com/qIufhof.png" />
<h1>
<span>500</span> <br/>
Internal server error
</h1>
<p>We are currently trying to fix the problem.</p>
</div>
</body>
</html>
404 Error Page New Design:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"