Introduction
Why bother customizing and designing error pages like 404? It's mostly to make your site look and feel consistent. As a bonus, if a user lands on such a page, you can suggest other similar pages, thereby avoiding bounces and increasing page depth and viewing time. (There for the second method is preferable)
In this article, I'll show two ways to customize these pages for Django projects:
This article will focus on 404 errors, but everything described here also applies to other error types, such as 500 (Server Error), 403 (Forbidden), and 400 (Bad Request).
You can read a more detailed description of these errors and their meaning in the links provided above, and we'll continue.
Preparing for debugging and running on a local server
Why to do this anyway?
Before adding and designing a 404 page, you need to prepare the project to display it. Why? You ask. The thing is, in debug mode (Debug=False), we'll always get a page like this:
And if we put the server into the deployed state, that is, Debug=False, we will receive a standard page from the server:
Now that we've figured out why you need to prepare your server to handle 404 errors, we can move on to the actual configuration and preparation.
Preparing Django to work with error pages like 404
First, create and add a directory with templates to the list of directories, the one in settings.py. And if your directories with templates are called templates/, then you don't have to change anything. But if you call them differently, do the following:
Add a new path to DIRS. You can find this one in the settings.py file.
Secondly, put the site into production mode, that is, disable all debugging processes that Django runs with Debug=True in settings.py. You will also need to add the host name to ALLOWED_HOSTS, as follows:
I am using a special character that kind of says, hey, this server is accessible from any address, enjoy! Don't forget to remove this special character after debugging or after deploying to a live server.
And that's about it, but not quite.
Activating styles during the debugging process
If, of course, your site isn't styled yet, you can safely skip this chapter. But let's be honest, you probably already have some styling on your site, and that's why you're reading this article.
And after completing all the steps described above, you expect to see something like this:
The client failed to get static files from the server. This is confirmed by the developer console.
So, how do we get styles, scripts, and media from the server?
To fix this, we need to slightly change the command to start the development server. Namely, start the server without any protective mechanisms, that is, instead of the command:
You must use, this instead:
Now, all static and media files should be available during the production server startup. You remember that we do this in order to see our own 404 and 500 response pages?
Custom 404 page
The first way is by overriding the default template.
There are several ways to customize the 404 page. The first, and easiest, is to make a 404.html template in any templates/ directory in any application.
The same applies to server responses such as 500, 403, and 400.
The second way is by defining your own views
The second method offers more customization than the first. So, if you need to further customize pages with server responses 400, 403, 404, and 500, you can write your own view and add whatever you want there. Let's write the most basic view for the 404 response, in a file at Backend/views.py:
All that's left is to connect it to a special handler. In urls.py, in any application, in my case it's always the Backend application, add this line:
There are also handlers for 500, 403 and 400 server responses, they correspond to handler500, handler403 and handler400 respectively.
Instead of a conclusion
Here are two ways I know of how to make your own server response pages, like 404 or 500. The first one is, of course, preferable because it is simpler, which means you can make fewer mistakes. The second one is more customizable. But choice is yours.
I hope this article was useful to you and now you are able to make your own 404 page.
