Fixing Broken Pages When Accessing Routes Directly 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 Direct Linking to Routes Causes Errors in Lovable

Understanding Routing in Lovable

Routing in web applications like Lovable directs users to different parts of the application based on the URL they enter. Think of these routes as addresses in a big city. Each address leads to a specific place. However, if you type in an address directly without knowing how the city’s map works, you might end up at the wrong location or even in a dead end. This is very similar to what happens when someone directly links to a route that the application isn’t prepared to handle.

How Direct Linking Differs from Normal Navigation

Normally, users navigate through the app by clicking on menus or buttons that the application sets up. This way, the app knows exactly where the user is coming from and can load the right information. Direct linking means a user might copy and paste a URL from somewhere and go straight to a specific part without following the app’s guided path. When this happens, the application might not have prepared for the navigation, much like walking into a room that hasn’t been set up for visitors.

Why Errors Occur When Routes are Accessed Directly

The errors occur because the application does not have a clear path planned for requests that come directly via a URL. This is because many modern applications depend on a process called “client-side routing,” where the browser handles the route after the initial page load. If the user enters the URL directly, the server might not know how to react since it expects the navigation to occur within the app after loading the page. Essentially, it is like ringing a doorbell when the house isn’t ready for guests, resulting in confusion and an error.

An Example to Illustrate the Issue

Consider a scenario in which the server is set up to handle a simple route for the home page. When a user navigates inside the app, everything works perfectly:


app.get('/home', (req, res) => {
  res.send("Welcome to Lovable");
});

Now imagine the app is designed as a single-page application. Once the home page loads, it internally handles many different views without asking the server for each route. If someone tries to directly visit a nested route like /home/profile by typing it into the browser, the server might not have a matching route ready, and that leads to errors. The error is a result of the server expecting the user to follow the internal navigation rather than accessing a specific page through a direct link.

What This Error Represents

The error signifies that the application’s server is telling you, "I don't know how to serve you this page directly." It does not mean that the page does not exist; it means that the method of access isn’t supported by the server’s current setup. The system was built with a particular flow in mind, and directly jumping to a route interrupts that flow, leaving the server unprepared for that kind of request.

How to Enable Direct Linking to Routes in Lovable

Including a Routing Library via CDN

Since Lovable does not have a terminal to install dependencies, we will load a lightweight routing library directly from a CDN. Open your main HTML file (typically named index.html) in the Lovable code editor.
Inside the <head> section of your HTML, add the following script tag to load the routing library. Here, we’re using Page.js as an example:


<script src="https://unpkg.com/page/page.js"></script>

This script tag ensures that when your app runs, the routing library is available to handle direct linking between routes.

Creating a Router File with Route Definitions

Create a new file in your Lovable project called router.js. This file will contain the code for defining and handling your routes.
Paste the following code into router.js. This code snippet sets up routes so that when a user navigates directly to a link, the corresponding content is displayed:


/_ Define what to do when a route is matched _/
function renderHome() {
  // Replace the content of the main area with home page content
  document.getElementById('content').innerHTML = '<h1>Welcome to the Home Page</h1>';
}

function renderAbout() {
  // Replace the content of the main area with about page content
  document.getElementById('content').innerHTML = '<h1>About Us</h1><p>This is the about page.</p>';
}
/_ Use the routing library (page.js) to define the routes _/
page('/', renderHome);
page('/about', renderAbout);
/_ Tell page.js to listen for URL changes _/
page();

This code creates two simple routes, "/" for the home page and "/about" for the about page. You can add more routes by following the same pattern.

Loading the Router and Enabling Direct Linking

Now, go back to your index.html file. Just before the closing </body> tag, add a script tag to load the router.js file so that your routing rules become active. It should look like this:


<script src="router.js"></script>

Make sure your HTML file has an element with an ID content where your route content will be displayed. If it doesn’t already exist, add the following in the <body> section:

```
<div id="content"></div>
      
```

This tells your application where to display the content when a user directly links to a route, ensuring a smooth navigation experience.

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 Enabling Direct URL Access in Lovable

Setting Up the Express Server for Direct URL Access in Lovable

In the Lovable code editor, create a new file named server.js. This file will act as the main server file to handle requests and enable direct URL access.

Copy and paste the following code snippet into server.js. This code sets up an Express server, defines static file serving from a folder called public, and adds a fallback catch-all route for direct URL access:


const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;
// Serve static files (e.g., HTML, CSS, JS) from the "public" directory
app.use(express.static(path.join(__dirname, 'public')));
// Catch-all route to handle direct URL access for Single Page Applications
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.listen(PORT, () => {
  console.log(Server is running on port ${PORT});
});

If your application is not already structured with a public folder, create one inside your project and place your main index.html file, along with other static assets, inside it.

Creating the Dependency File

Since Lovable does not offer a terminal for installing dependencies, you need to create a file named package.json in the root of your project. This file will list all the modules your app depends on.

Insert the following content into package.json to include Express as a dependency:


{
  "name": "lovable-app",
  "version": "1.0.0",
  "description": "Lovable application enabling direct URL access",
  "main": "server.js",
  "dependencies": {
    "express": "^4.18.2"
  },
  "scripts": {
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC"
}

Lovable will pick up this file and install the dependencies upon project initialization.

Configuring Routing for Direct URL Access

In many Single Page Applications (SPAs), if a user types a direct URL (for example, https://yourapp.com/somepage) into a browser, the server must fetch the main index.html page so the client-side router can then map the URL correctly.
The fallback routing defined in the server.js file ensures that if the requested resource is not found in the public folder, the server will return the index.html file to allow your SPA to handle the navigation.
This approach is a best practice in SPA development since it avoids server-side 404 errors when users directly access different parts of your app.

Integrating the Express Server With Lovable's Settings

To ensure that Lovable uses the Express server as the start point for your project, go to your project configuration settings in Lovable.
Set the entry point of your application to server.js. This instructs Lovable to run the code in that file whenever your project is started.
With the package.json file and the server file in place, Lovable will automatically install the Express dependency and launch your server when you click the run button.

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