Setting Up Custom Domains for Lovable Projects

Book a call with an Expert

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

Book a free No-Code consultation

Why Custom Domains Require DNS and Config Steps in Lovable

Understanding Custom Domains and DNS

Every website is accessed using a domain name, like example.com. For this domain name to lead to the right server—where your website actually lives—the domain’s settings must be told how to find the server. This is where DNS, or Domain Name System, comes into play.
DNS is like an address book for the internet. When someone types your custom domain into a web browser, DNS checks its records to find the corresponding IP address. Without these records, the browser wouldn’t know where to go.

The Need for Configuration Steps in Lovable

In platforms like Lovable, when you bring your custom domain, it’s important to connect your domain name to Lovable’s servers. This is done through configuration steps which involve setting up specific DNS records or editing configuration files.
This ensures that all traffic coming to your custom domain is properly routed to your application hosted on Lovable.
The process can involve adding records such as A records (which point directly to an IP address) or CNAME records (which alias your domain to another domain). These records must be set perfectly to ensure a smooth connection.

What the Configuration Files Mean

Within Lovable, a configuration file or DNS records act as instructions for your custom domain. They tell the internet, “When someone visits my domain, go to this specific address, which is where my application lives.”
A sample of a DNS record configuration may look like this:


// DNS records sample for custom domain
example.com.      IN A     192.0.2.1
www.example.com.  IN CNAME example.com.

Another example may be found in a configuration file on Lovable that links your domain to your application. Consider this snippet as an illustration:


customDomain: "example.com"
target: "application.lovable.com"

These snippets are not instructions for fixing any error but explain the reasoning behind why every line and record is necessary. Without this configuration, visitors might see errors or not reach your site at all because the browser wouldn’t know where to go.
The configuration and proper DNS records ensure that your custom domain works seamlessly with Lovable’s hosting, guiding every internet request to the correct server location.

How to Connect a Custom Domain to a Lovable Project

Creating the Custom Domain Configuration File

In the Lovable project dashboard, locate the file tree and create a new file at the root level named lovable.config.js. This file will tell your project which custom domain to use.
Copy and paste the following code snippet into lovable.config.js. This snippet sets a property with your custom domain name. Replace www.yourcustomdomain.com with your actual domain.
```
module.exports = {
  customDomain: "www.yourcustomdomain.com"
};
    
```
This file has no dependency installation since Lovable manages its environment automatically. The settings here inform Lovable how to serve your project on your custom domain.

Updating Your HTML to Reflect the Custom Domain

If your project includes an index.html or similar landing page, open that file in the Lovable code editor.
Locate the <head> tag and add a comment to remind yourself or other collaborators that this project is now linked to the custom domain. For example:
```
<head>
  <meta charset="UTF-8">
  <title>My Lovable Project</title>
  
</head>
    
```

Configuring Your Domain Registrar's DNS Records

Log into the account where you purchased your custom domain (like Namecheap, GoDaddy, etc.).
Find the DNS management section to modify your domain's records.
Create or edit a CNAME record so that your subdomain (for example, www) points to the default Lovable project domain provided by the platform. Your Lovable project setup page should list the target domain (for example, your-project.lovableapp.com).
If you want the root domain (without www) to work, follow your domain provider’s guidelines. Often, this requires an A record pointing to an IP address that Lovable shares, or a URL redirection to the www version.

SSL Certificate Management (Handled Automatically)

No extra code is needed to secure your custom domain. Lovable automatically provisions an SSL certificate once your DNS changes are validated.
Check back in your project settings after a short period to confirm that the secure (HTTPS) connection is active.

Testing Your Custom Domain

After modifying the DNS records, allow some time for them to propagate. This might take a few minutes to a couple of hours depending on your registrar.
Open your browser and visit your custom domain (www.yourcustomdomain.com). You should see your Lovable project live and secured with HTTPS.

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 Connecting Custom Domains in Lovable

Understanding Custom Domain Requirements

Before connecting your custom domain, verify that your domain provider supports the necessary DNS records – typically A Records or CNAME. Ensure that your domain's DNS settings point to the servers provided by Lovable.
Keep a note of your domain name, SSL certificate details, and any keys needed. This information is essential for a secure and smooth connection.

Creating the Domain Configuration File in Lovable

In the Lovable code editor, create a new file at the root of your project. Name this file domain.config.json. This file will store your custom domain settings.
Copy and paste the following code snippet into domain.config.json. This configuration file tells your application which domain to use and where to find your SSL certificate and private key:


{
  "customDomain": "www.example.com",
  "ssl": {
    "certificate": "path/to/your/certificate.pem",
    "privateKey": "path/to/your/privatekey.pem"
  }
}

Ensure that you update the values with your actual domain and the correct paths to your certificate and key files. If Lovable provides a specific location for SSL files, replace the paths accordingly.

Integrating the Domain Configuration into Your Application Code

Open your main server file, commonly named app.js or server.js, in the Lovable editor.
Add the following code snippet at the top of your main file to import and parse the domain configuration:


const fs = require('fs');
const domainConfig = JSON.parse(fs.readFileSync('./domain.config.json', 'utf8'));

Below the import statements and after initializing your Express (or similar) app, insert middleware to handle requests from your custom domain. This snippet checks if incoming traffic is directed to your custom domain and applies any necessary logic:


// Middleware to process requests from the custom domain
function customDomainMiddleware(req, res, next) {
    if (req.hostname === domainConfig.customDomain) {
        // Place any additional custom domain processing logic here
        return next();
    }
    return next();
}

app.use(customDomainMiddleware);

This middleware should be placed after the app initialization, but before defining your route handlers, so it can process all incoming requests.

Adding SSL Support for Custom Domains

For enhanced security, integrate SSL directly into your application code. If Lovable requires you to handle HTTPS setup, you can modify your main file to create an HTTPS server.
Paste the following code snippet after your middleware additions. This snippet reads your SSL certificate and key from the configuration file and starts an HTTPS server:


const https = require('https');

const sslOptions = {
  key: fs.readFileSync(domainConfig.ssl.privateKey),
  cert: fs.readFileSync(domainConfig.ssl.certificate)
};
https.createServer(sslOptions, app).listen(443, () => {
    console.log('HTTPS server running on port 443');
});

If Lovable manages HTTPS automatically, ensure that your configuration file paths are correct and that the platform recognizes these settings. Always check Lovable’s documentation for any additional requirements.

Troubleshooting and Best Practices

Double-check your domain.config.json for any syntax errors such as missing commas or incorrect paths.
Confirm that your DNS records are properly propagated. Use online tools to check if your domain correctly points to Lovable’s IP or CNAME.
If you notice errors during execution (for example, problems reading the SSL files or receiving connection errors), review the file paths in your configuration file and ensure they match your project structure.
Consult Lovable’s logging interface for error messages. These logs can point you toward issues such as misconfigured domains or SSL certificate errors.
Test the connection using different browsers and devices to ensure that the custom domain is routing traffic correctly.
Keep backups of your configuration files before making modifications so you can quickly revert if any new changes cause issues.

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