Sending email from Bolt.new using EmailJS

I’ve spent the past hour trying to figure out how to create the most basic emailing app using Bolt.new and for the life of me, I couldn’t get it to work, but have finally figured it out, so I thought I’d share in case it helps anyone else

I used EmailJS to achieve this:

https://www.emailjs.com

here’s the code I ended up using for my sendEmail.js file:

import axios from 'axios';

export const handler = async (event) => {
  // Always return JSON responses
  const jsonResponse = (statusCode, body) => ({
    statusCode,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  });

  try {
    if (event.httpMethod !== 'POST') {
      return jsonResponse(405, { error: 'Method not allowed' });
    }

    let parsedBody;
    try {
      parsedBody = JSON.parse(event.body);
    } catch (e) {
      return jsonResponse(400, { error: 'Invalid JSON body' });
    }

    const { to, subject, text } = parsedBody;

    if (!to || !text) {
      return jsonResponse(400, { error: 'Missing required fields' });
    }

    const data = {
      service_id: process.env.EMAILJS_SERVICE_ID,
      template_id: process.env.EMAILJS_TEMPLATE_ID,
      user_id: process.env.EMAILJS_PUBLIC_KEY,
      template_params: {
        to_email: to,
        message: text,
        subject: subject || 'Hello from Quick Email!'
      },
      accessToken: process.env.EMAILJS_PRIVATE_KEY
    };

    const response = await axios.post(
      'https://api.emailjs.com/api/v1.0/email/send',
      data,
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );

    if (response.status === 200) {
      return jsonResponse(200, { message: 'Email sent successfully' });
    } else {
      throw new Error('Failed to send email');
    }
  } catch (error) {
    console.error('EmailJS error:', error.response?.data || error.message);
    
    return jsonResponse(500, { 
      error: 'Failed to send email',
      details: error.response?.data?.error || error.message || 'Unknown error occurred'
    });
  }
}

as you can see, I needed a .env file with all of the following:

In terms of my EmailJS setup, I had to do the following:

Firstly, setup an email service….. I used mailjet

To be able to even use mailjet, you need a domain to be able to send emails from. I firstly registered a domain with Namecheap

In Namecheap I needed to setup some DNS files, which mailjet will provide:

A couple of “gotcha’s” to be aware of, which was stopping me setup the DNS records correctly in Namecheap:

When you setup SPF, MailJet tells you to put your domain name as the “host” in the TXT record….. don’t put your domain name, instead put the @ symbol:

use the @ symbol instead to “host” when adding to Namecheap:

Also, Mailjet gives you a DKIM host to add as a TXT record, but it appends your domain to the end….

You don’t need the domain part in the TX record. Instead, add it like this in Namecheap:

You should eventually have three TXT records in Namecheap, and then you should be able to verify connectivity in Mailjet, and proceed to the next part:

You also need to setup a confirmed sender email address in Mailjet:

The next thing is setting up your EmailJS email services and email templates:

I obviously chose mailjet here for email services:

You’ll be prompted to provide your MailJet API key and secret key:

After You’ve configured the service, the next thing is to setup the EmailJS template. When you set this up, ensure that the “to email” and the “reply to” are setup as shown, enclosed in the double curly braces. The from name and email address can be set as per your domain and sender address that you setup in MailJet

The part that really confused me when I was setting this up was that it wouldn’t work without a template….that’s just how EmailJS works as far as I can tell.

You can of course customize the template like I did….. it went from this:

to this:

so all I ended up with was just the {{message]] in the body, as I wanted my app to determine what is in the body of the message.

Hope this helps others as it took me ages to figure this out!