Creating and Customizing 404 Pages in Lovable

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Why 404 Pages Must Be Manually Defined in Lovable

Understanding 404 Pages

When you browse the internet and click a link that doesn’t lead you to an existing page, your browser shows a “404 Not Found” error. This means that the server can’t locate what you asked for. In many web projects, including ones built with Lovable, this error is not automatically handled by the system. Instead, the developer must manually create a 404 page. This manual definition allows the website to display a friendly and informative message when a user loses their way. It explains that the page isn’t available, rather than showing a plain error message that can confuse or frustrate the user.

Creating a custom 404 page helps in several ways:

It gives control over the design and message of the error page.
It provides clear information to the user about what went wrong.
It maintains a consistent look and feel throughout the website.

For example, a code snippet for a manually defined 404 page in Lovable might look like:


@app.errorhandler(404)
def handle_not_found(error):
    # You can create a custom message or render a template here
    return "Sorry, the page you are looking for cannot be found.", 404

The Reason Behind Manual Definition in Lovable

In Lovable, unlike some systems that generate default error pages automatically, you must explicitly define what happens when a user visits a non-existing page. This means that if you do not set up a proper 404 error handler, the website may revert to a standard error message that does not represent the style or personality of your site. By manually defining this page, developers are able to explain the error in simple words and direct users to useful parts of the site, such as the homepage or a search feature.

The error appears because Lovable does not have a built-in instruction to deal with unrecognized page requests. It is a feature designed to let developers decide how to respond when a user requests a page that does not exist. Instead of a blank or automatically generated error, defining a custom 404 page brings clarity and a better user experience by letting them know that the error was anticipated and handled gracefully. This approach is all about ensuring that even a misdirected click will result in an experience that feels intentional and supportive.

A simplified version of such a handler in code might be set up like this:


# The 404 error is caught by the application and the following function is executed
def page_not_found(e):
    # Here, you create a simple message or a full custom page design
    return "This is a custom 404 page created in Lovable.", 404

This manual creation of the 404 page is why you see it as a requirement in a Lovable project. It isn’t just a technical necessity – it is a way to communicate with your visitors in a clear and friendly manner, even when things don’t go as planned.

How to Add and Customize a 404 Page in Lovable

Creating Your Custom 404 Component

Open the file explorer in Lovable and create a new file in your project’s "pages" folder. If you do not have a "pages" folder, create one at the root. Name the file 404.js (you may also name it NotFound.js if you prefer).

Inside 404.js, add the following code. This code creates a basic 404 page component using React:


import React from 'react';

const NotFoundPage = () => {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      
404 - Page Not Found

      Sorry, but the page you are looking for does not exist.

      Return Home


  );
};

export default NotFoundPage;

Setting Up Routing to Use the 404 Component

Open your main routing file. This file is usually named App.js or Routes.js and is located at the root or inside the src folder.
Import the custom 404 page component at the top of the file by adding:
```
import NotFoundPage from './pages/404';
    
```

Locate your routing setup. If you are using react-router, you might see a structure using <Router>, <Switch>, and <Route> tags. Append a final Route without a specified path to catch all unmatched routes. For example:


import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
// Import other page components as needed
import NotFoundPage from './pages/404';

function App() {
  return (
    
      
        
        
        {/_ Add other Routes above _/}
        
      
    
  );
}
export default App;

Adding Dependencies Without a Terminal

Lovable does not support a terminal interface, so you must add any required dependencies manually. For this example, react-router-dom is needed. Open your package.json file in your Lovable editor.
In the dependencies section of package.json, add the following line. This tells Lovable to include react-router-dom automatically:
```
"dependencies": {
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router-dom": "^5.2.0"
}
    
```
Save your package.json file. Lovable will detect the new dependency and handle its installation automatically.

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

Best Practices for Custom 404 Pages in Lovable

Creating a Custom 404 HTML File

• In the Lovable code editor, you will create a new file to hold the HTML for your custom 404 page. Name this file 404.html and place it in the folder where your HTML files are stored (for example, a folder called views or templates if you have one).

• In 404.html, write the HTML content that you want visitors to see when they hit a non-existent page. For example, you might include a friendly message, navigation links, or a search bar.

• A sample 404.html content is below:




  
    
    Page Not Found
    
  
  
    Oops! Page not found.
    We couldn't find the page you were looking for.
    Return to Home

Integrating the Custom 404 Page in Your Application

• Open your main application file where you handle routing. This file might be named something like app.js or index.js if you are working with JavaScript-based frameworks in Lovable.

• Insert the following error handling code at the end of your route definitions. This ensures that if no other route matches, your custom 404 page is served.

• Paste the error handler code snippet below into your main file.


// Place this code after all other route definitions

// When no routes match, render the custom 404 page.
app.use(function(req, res, next) {
  res.status(404);
  // If you're using a templating engine, render the 404 page.
  // For example, if using EJS, you might use:
  // res.render('404');
  // Otherwise, send the HTML file directly:
  res.sendFile(\_\_dirname + '/views/404.html');
});

• Ensure that the \_\_dirname path correctly points to the folder where 404.html is located. Adjust the path if you placed it in a different folder.

Adding Styling and Consistency with Application Layout

• To maintain the look and feel of your site, use a common CSS file for your 404 page if you have one. Inside your 404.html file, link to your main CSS file or include the corresponding style elements.

• For example, if you have a file named styles.css in a folder called assets, update the <head> section of your 404 page:



  
  Page Not Found

• This approach ensures consistency across all pages on your website.

Testing and Best Practices

• Verify that your custom 404 page is working by navigating to a URL on your site that does not exist. The custom page should display instead of a default error message.

• If your custom 404 page does not appear, double-check that the error handling code is placed after all other route definitions in your main file.

• Ensure the file path in the res.sendFile function in your error handler corresponds correctly to where you saved your 404.html file.

• Always keep your custom 404 page friendly and helpful. Consider including a link back to your home page, a search box, or even error reporting instructions to help your visitors.

Client trust and success are our top priorities

When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive.
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022