Laravel 10 - Custom 404 page
Laravel 10 - Custom 404 page
In this tutorial, we will cover displaying a custom 404 page, which enhances user experience by guiding users and maintaining brand consistency while offering helpful navigation.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we walk through how to create a custom 404 error page in a Laravel 10 application. Starting with a fresh Laravel setup, you'll configure your development environment using Vite and launch your local development server. Then, you'll create a dedicated Blade template to override Laravel’s default 404 error page. Using clean HTML and CSS, you’ll design a modern, visually appealing layout that enhances the user experience when someone lands on a missing or broken link. By the end, visiting any non-existent route will display your custom page instead of the generic Laravel error screen, giving your app a more professional and polished feel. You’ll also learn how to apply the same technique to other error pages like 401, 403, and 500 for a fully branded error handling experience.
Step # 1 : Set Up a Fresh Laravel 10 Project.
Before diving into building the new feature, it's best to start with a clean Laravel 10 project. This ensures there are no conflicts or leftover configurations from previous work. You can either use your existing Laravel 10 setup or create a brand-new one for a smoother experience. If you have the Laravel installer set up globally, use this command to create a new project.
laravel new custom
Alternatively, if you're using Composer, run the following.
composer create-project laravel/laravel --prefer-dist custom
We’re setting up a fresh Laravel 10 project to keep things clean and simple. Starting from scratch helps us avoid any messy conflicts and makes it easier to focus on building the new feature without distractions.
Step # 2 : Open the Project and Start the Dev Server.
First, open your terminal (like Git Bash) and move into your Laravel project folder.
cd c:xampp/htdocs/custom
Once you're inside the project, install the frontend dependencies and start the Vite development server.
npm install && npm run dev
Keep this terminal running so Vite can continue watching your assets. Then, open a new terminal tab or window and head back into the same project directory, you’ll use this one to run additional Laravel commands.
Step # 3 : Start the Laravel Server.
Now that everything’s set up, let’s launch the Laravel development server. Just run the command below in your terminal.
php artisan serve
This will start the application on a local address (usually http://127.0.0.1:8000), so you can open it in your browser and see your project in action.
Step # 4 : Check the Default 404 Page.
To confirm everything is working, try visiting a route that doesn’t exist, like: http://127.0.0.1:8000/example. You should see Laravel’s default 404 error page. This just means the route isn’t defined yet, which is perfectly normal at this stage.
Step # 5 : Create an errors Folder.
Inside your Laravel project, go to the resources/views directory and create a new folder named errors. This is where Laravel looks for custom error views.
/resources/views/errors
Step # 6 : Add a Custom Blade File.
Within the new errors folder, create a file named 404.blade.php. Laravel will automatically use this view whenever a 404 error occurs.
/resources/views/errors/404.blade.php
Step # 7 : Design Your 404 Page.
Open 404.blade.php and paste the following HTML to build a clean, modern 404 error page. It includes a large heading, a helpful message, a button to return home, and a fun SVG illustration to keep things light. You can customize the styles or text to match your app’s branding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - Page Not Found</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #67b1e6, #a2e4ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
color: #fff;
text-align: center;
}
.container {
text-align: center;
max-width: 800px;
}
h1 {
font-size: 10rem;
margin-bottom: 1rem;
}
h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
a {
display: inline-block;
padding: 12px 30px;
background-color: #fff;
color: #67b1e6;
text-decoration: none;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
}
a:hover {
background-color: #67b1e6;
color: #fff;
}
.illustration {
margin-top: 20px;
}
.illustration svg {
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<h2>Oops! Page Not Found</h2>
<p>Looks like you're fishing in the wrong waters.</p>
<a href="/">Go Back Home</a>
<div class="illustration">
<!-- Fishing-themed SVG illustration -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87L17.18 22 12 18.27 6.82 22l1.09-7.86-5-4.87 6.91-1.01L12 2z"></path>
</svg>
</div>
</div>
</body>
</html>
This custom 404 page blends a playful fishing-themed design with a clean, modern layout to create a more engaging user experience. Instead of showing a plain error message, it adds personality and visual appeal, making the page feel intentional rather than broken. The vibrant colors, friendly text, and smooth styling help guide users back to your homepage while keeping the overall aesthetic consistent with your application.
Step # 8 : Test Your Custom 404 Page.
With everything in place, let’s make sure your custom 404 page is working correctly. Open your browser and visit a route that doesn’t exist, like: http://127.0.0.1:8000/example. Instead of Laravel’s default 404 page, you should now see the custom design you created, complete with your styles and message.
Notes:
You can customize other error pages in the same way by creating Blade files named after each status code inside the resources/views/errors folder. Here are a few common ones you might want to handle.
- 404.blade.php – Page Not Found (shown above).
- 401.blade.php – Unauthorized.
- 403.blade.php – Forbidden.
- 419.blade.php – Page Expired (often CSRF-related).
- 429.blade.php – Too Many Requests.
- 500.blade.php – Server Error.
Just create a separate Blade file for each error code and style them as needed to match your application's branding and tone. This not only improves the user experience during errors but also gives you full control over how users perceive and interact with your site when something goes wrong.
Conclusion
By following this step-by-step guide, you’ve successfully created a custom 404 error page in your Laravel 10 application. Starting from a fresh Laravel setup, you configured the development environment, structured your views, and designed a visually appealing error page using Blade and CSS. This not only replaces Laravel’s default 404 screen but also enhances your app’s overall look and user experience. With the same approach, you can easily customize other error pages like 401, 403, 419, and 500 to maintain consistent branding across your application. For additional flexibility, consider incorporating animations, illustrations, or even helpful links to guide users back to key areas of your site.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments