Lovable and Mailgun integration: Step-by-Step Guide 2025

 

Creating the Mailgun Service File

 

• Create a new file in your Lovable project and name it “mailgunService.ts”.
• This file will contain the TypeScript code that sends emails via Mailgun by calling its HTTP API.

export interface MailgunConfig {
  apiKey: string;
  domain: string;
}

export interface EmailData {
  from: string;
  to: string;
  subject: string;
  text: string;
}

export async function sendEmail(
  config: MailgunConfig,
  emailData: EmailData
): Promise {
  const url = https://api.mailgun.net/v3/${config.domain}/messages;
  const formData = new URLSearchParams();
  formData.append("from", emailData.from);
  formData.append("to", emailData.to);
  formData.append("subject", emailData.subject);
  formData.append("text", emailData.text);

  // btoa is used to Base64 encode the API key for Mailgun authentication
  const auth = btoa(api:${config.apiKey});

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Authorization": Basic ${auth},
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: formData.toString()
  });

  return response.json();
}

 

Integrating the Mailgun Service in Your Main Code

 

• Open your main TypeScript file (for example “app.ts” or “main.ts”) where you want to send the email.
• Add the import statement at the top of the file to include the Mailgun service functions.
• Insert the code snippet below to configure the Mailgun credentials and send a test email.

import { sendEmail, MailgunConfig, EmailData } from "./mailgunService";

// Replace the placeholders with your actual Mailgun credentials
const mailgunConfig: MailgunConfig = {
  apiKey: "YOURMAILGUNAPI_KEY",
  domain: "YOURMAILGUNDOMAIN" // e.g. "sandbox123.mailgun.org"
};

const emailData: EmailData = {
  from: "Excited User <mailgun@YOURMAILGUNDOMAIN>",
  to: "[email protected]",
  subject: "Hello from Lovable Project",
  text: "Testing some Mailgun awesomeness with our Lovable project!"
};

// Call the sendEmail function when needed in your project
sendEmail(mailgunConfig, emailData)
  .then(response => {
    console.log("Email sent successfully:", response);
  })
  .catch(error => {
    console.error("Error sending email:", error);
  });

 

Adding Dependencies Without a Terminal

 

• Since Lovable does not have a terminal, you must ensure that your project’s runtime supports the fetch API (most modern browsers and environments do).
• If your environment does not include fetch by default, you would normally add a polyfill. In Lovable, add the polyfill code directly into your project if necessary.
• There is no need to run an install command; just copy any required code into your files.

 

Securing Your Mailgun Credentials

 

• Remember that your Mailgun API key and domain are sensitive information.
• If Lovable supports environment variables or secret management, replace the hard-coded strings with values obtained securely.
• Otherwise, be cautious and consider obscuring these details if your project source is publicly visible.

 

Testing the Mailgun Integration

 

• After inserting the code snippets, save your changes.
• Trigger the email sending functionality in your project (this could be on a button click or an event handler, as per your project’s design).
• Check the console output for messages confirming successful sending or error messages for troubleshooting.