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

 

Prerequisites

 

• A Mailgun account with your domain settings and API key set up.
• A basic v0 project using TypeScript.

 

Step: Adding Dependencies via Code

 

• Since your v0 project does not have a terminal, you will need to add dependencies manually. Create a new file named package.json in the root of your project with the following content:

  
  {
    "dependencies": {
      "mailgun-js": "^0.22.0"
    }
  }
      

• This file tells your project that it uses the mailgun-js package. When your project runs (or when the dependency manager in v0 processes the file), it will install the package automatically.

 

Step: Creating the Configuration File

 

• Create a new file named config.ts in your project’s root (or in a folder like src/config if you keep files organized). This file will store your Mailgun credentials.
• Insert the following code into config.ts:

  
  // config.ts
  export const MAILGUNAPIKEY = 'YOURMAILGUNAPIKEYHERE';
  export const MAILGUNDOMAIN = 'YOURMAILGUNDOMAINHERE';
      

• Replace YOURMAILGUNAPIKEYHERE and YOURMAILGUNDOMAIN_HERE with your actual Mailgun API key and domain.

 

Step: Creating the Mailgun Service File

 

• Create a new file named mailgun.ts in your project (or in a suitable folder such as src/services).
• Paste the following TypeScript code into mailgun.ts which demonstrates how to initialize Mailgun and send an email:

  
  import mailgunModule from 'mailgun-js';
  import { MAILGUNAPIKEY, MAILGUN_DOMAIN } from './config';
  
  const mailgun = mailgunModule({ apiKey: MAILGUNAPIKEY, domain: MAILGUN_DOMAIN });
  export interface EmailData {
    from: string;
    to: string;
    subject: string;
    text?: string;
    html?: string;
  }
  export const sendEmail = async (data: EmailData): Promise => {
    return new Promise((resolve, reject) => {
      mailgun.messages().send(data, (error: any, body: any) => {
        if (error) {
          console.error('Mailgun Error:', error);
          return reject(error);
        }
        console.log('Mailgun Response:', body);
        resolve(body);
      });
    });
  };
      

  
  


• 
  This file does the following:
  
  
  
  • Imports the mailgun-js module and your configuration constants.
  
  
  • Initializes Mailgun with your API key and domain.
  
  
  • Exports a function sendEmail that accepts an object with mail details and sends an email using Mailgun’s API.
  
  
  
  

 

Step: Using the Mailgun Service in Your Code

 

• Locate the part of your v0 project where you want to trigger an email (for example, within a route handler or an event handler in your main code file like index.ts).
• Import and use the sendEmail function. For example, add the following code snippet into your main file:

  
  import { sendEmail } from './mailgun';
  
  // Example function to send a welcome email
  const sendWelcomeEmail = async () => {
    const emailData = {
      from: 'Your Name <you@yourdomain.com>',
      to: 'recipient@example.com',
      subject: 'Welcome!',
      text: 'Thank you for signing up.',
      // html: '<h1>Thank you for signing up</h1>'
    };
    try {
      const response = await sendEmail(emailData);
      console.log('Email sent successfully:', response);
    } catch (error) {
      console.error('Failed to send email:', error);
    }
  };
  // Call the function when appropriate in your application
  sendWelcomeEmail();
      

  
  


• 
  Adjust the email details inside emailData according to your requirements, such as updating the sender, recipient, and email content.
  

 

Step: Testing Your Integration

 

• Save all the files that you have modified or created.
• Run your project in v0. Since v0 processes your package.json for dependencies automatically, when the code is executed, Mailgun should be available.
• Trigger the part of your project that calls sendWelcomeEmail and check the console output for the success or error messages.

 

Final Notes

 

• Ensure that your Mailgun API key and domain are kept secure and not shared publicly.
• If you need to send more personalized emails, you can extend the sendEmail function or create additional functions in the mailgun.ts file.
• Refer to the Mailgun API documentation for any advanced configuration and options.