How to Integrate Lovable with Mailgun

Before configuring Lovable, you need a Mailgun account with a configured sending domain and your API credentials ready. To get your API key: log in to Mailgun at app.mailgun.com. Go to Settings → API Keys. Find your 'Private API key' (not the public validation key). Click the eye icon to reveal it, then copy it — it looks like a long hex string like key-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx. For your sending domain: Mailgun automatically provides a sandbox domain for testing (looks like sandbox-xxxxxxxxxxxxx.mailgun.org). The sandbox domain only sends to authorized recipients (you must add email addresses in Mailgun → Domains → sandbox domain → Authorized Recipients). For production, add a custom domain: go to Domains → Add New Domain, enter your domain (e.g., mail.yourapp.com), and follow the DNS verification steps. Mailgun will give you MX, TXT (SPF), TXT (DKIM), and CNAME records to add to your domain registrar. Domain verification can take up to 24-48 hours but usually completes within minutes. Region check: Mailgun routes to different API endpoints depending on where your data is stored. Log in and check your dashboard URL — if it is app.mailgun.com, you are on the US region (api.mailgun.net). If it is app.eu.mailgun.net, you are on the EU region (api.eu.mailgun.net). Store the correct base URL as a secret to avoid 404 errors. Copy three values: your API key, your sending domain (sandbox or custom), and your API base URL.

Store your Mailgun credentials in Lovable's Cloud Secrets panel. All three values — API key, domain, and base URL — need to be server-side secrets because the Mailgun API key can be used to send emails from your domain and access delivery logs. Exposing it in frontend code would allow anyone to send emails on your behalf. In Lovable, click the '+' icon at the top of the editor (next to the Preview label). In the Cloud panel, click the 'Secrets' tab. Add the following secrets by clicking 'Add new secret' for each: First: Name: MAILGUN_API_KEY, Value: your Mailgun private API key (starts with 'key-') Second: Name: MAILGUN_DOMAIN, Value: your sending domain (e.g., sandbox-xxxxx.mailgun.org for testing, or mail.yourapp.com for production) Third: Name: MAILGUN_BASE_URL, Value: the correct API base URL for your region. Use https://api.mailgun.net for US accounts, or https://api.eu.mailgun.net for EU accounts. Store the full URL including https:// — this is what the Edge Function will use directly. Optionally add: MAILGUN_FROM_EMAIL with value like noreply@mail.yourapp.com. This makes it easy to update the sender address without changing code. With all secrets saved, your Edge Function will have everything needed to authenticate and send emails.

Create the Edge Function that proxies email sending requests to Mailgun's REST API. Unlike SendGrid which uses JSON, Mailgun's API expects form-data encoded requests using the standard multipart/form-data or application/x-www-form-urlencoded format. In Deno, you construct this using the FormData Web API. Mailgun authenticates using HTTP Basic auth where the username is literally the string 'api' and the password is your API key. This is different from Mailchimp (where the username is ignored) and SendGrid (which uses a Bearer token). The function below demonstrates the full pattern: reading secrets, constructing the form data, sending to Mailgun's /messages endpoint, and returning the result. Note that Mailgun returns a JSON response with an 'id' field (the message ID, useful for tracking) and a 'message' field (typically 'Queued. Thank you.'). For production apps, you can also pass the html parameter (HTML body), the template parameter (Mailgun template name), and h:X-Mailgun-Variables (JSON for template variables) — the Edge Function can be extended to support all of Mailgun's API parameters as needed.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8serve(async (req) => {
9  if (req.method === 'OPTIONS') {
10    return new Response('ok', { headers: corsHeaders })
11  }
12
13  try {
14    const { to, subject, html, text, fromName } = await req.json()
15
16    const apiKey = Deno.env.get('MAILGUN_API_KEY')
17    const domain = Deno.env.get('MAILGUN_DOMAIN')
18    const baseUrl = Deno.env.get('MAILGUN_BASE_URL') || 'https://api.mailgun.net'
19    const fromEmail = Deno.env.get('MAILGUN_FROM_EMAIL') || `noreply@${domain}`
20
21    if (!apiKey || !domain) {
22      throw new Error('Missing Mailgun secrets: MAILGUN_API_KEY and MAILGUN_DOMAIN are required')
23    }
24
25    if (!to || !subject || (!html && !text)) {
26      return new Response(
27        JSON.stringify({ error: 'Required fields: to, subject, and html or text' }),
28        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
29      )
30    }
31
32    // Mailgun uses form-data, not JSON
33    const formData = new FormData()
34    formData.append('from', `${fromName || 'MyApp'} <${fromEmail}>`)
35    formData.append('to', to)
36    formData.append('subject', subject)
37    if (html) formData.append('html', html)
38    if (text) formData.append('text', text)
39    // Enable click and open tracking
40    formData.append('o:tracking', 'yes')
41    formData.append('o:tracking-clicks', 'yes')
42    formData.append('o:tracking-opens', 'yes')
43
44    const response = await fetch(`${baseUrl}/v3/${domain}/messages`, {
45      method: 'POST',
46      headers: {
47        Authorization: 'Basic ' + btoa(`api:${apiKey}`),
48      },
49      body: formData,
50    })
51
52    const data = await response.json()
53
54    if (!response.ok) {
55      throw new Error(`Mailgun API error ${response.status}: ${data.message || JSON.stringify(data)}`)
56    }
57
58    return new Response(
59      JSON.stringify({ success: true, id: data.id, message: data.message }),
60      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
61    )
62  } catch (error) {
63    return new Response(
64      JSON.stringify({ error: error.message }),
65      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
66    )
67  }
68})

Test your Mailgun integration from a deployed Lovable app — Edge Functions do not run in Lovable's preview mode. Deploy via the Publish button, then trigger the email flow from your live app URL. For initial testing with the sandbox domain, make sure the recipient email address is in your Mailgun sandbox's Authorized Recipients list. Navigate to Mailgun → Domains → your sandbox domain → Authorized Recipients and add your test email address. If the recipient is not authorized, Mailgun will return 200 but silently drop the email. To verify delivery: check Mailgun's Logs tab (Sending → Logs in the Mailgun dashboard). You should see your test message listed with an 'accepted' status, then 'delivered' once the recipient's mail server confirms receipt. If the email bounces or is filtered as spam, the reason appears in the logs. For production readiness, set up Mailgun's event webhooks to track opens and clicks. In Mailgun → Sending → Webhooks, add your Edge Function's URL (from Cloud → Edge Functions) as the webhook endpoint for events you want to track. This requires a separate webhook-receiver Edge Function — your send-email function handles outbound sending, while a separate mailgun-events function handles inbound delivery events. For complex implementations involving tracking webhooks, event storage, and multi-tenant sending across multiple domains, RapidDev's team can help design and implement the full pipeline.