Chapter 7: Thoughtful Advanced Features - Integrating Nodemailer for Automated Confirmation Emails

When guests successfully make a reservation and complete payment on our "Not Far Mountain Campground" website, seeing just a "Reservation Successful" message on the webpage would leave them feeling uncertain.
At this moment, if they could immediately receive a beautifully designed "Reservation Confirmation Email (including order number, date, and amount)" in their inbox, their trust in our brand would undoubtedly skyrocket!

🎯 Chapter Goals

1. Understand what Nodemailer is and how SMTP works.
2. Apply for a free Google App Password for sending emails.
3. Use Vibe Prompt to have AI help us write an email-sending API.

---

📬 What is Nodemailer?

Sending emails is actually quite complex—you need to interact with an SMTP server.
In Node.js (Astro's backend environment), the most famous and user-friendly email-sending package is Nodemailer.
As long as you provide it with a Gmail account and password, it can impersonate you and automatically send emails to your guests!

---

🔑 Step 1: Apply for a Gmail App Password

For security reasons, Google doesn't allow you to directly use your real Gmail password in code. You must apply for a dedicated "App Password" for your program.

1. Go to your Google Account Security Settings.
2. Ensure you've enabled Two-Step Verification (2FA).
3. Look for the App Passwords option (sometimes hidden at the bottom of the 2FA menu or search for "App Passwords" in the top search bar).
4. Create a new password with the name Not Far Web.
5. A 16-character code will appear on the screen (e.g., abcd efgh ijkl mnop). Copy it immediately! This is your email-sending key!

[!WARNING] This password is extremely important—once you leave the page, it will disappear forever. Never commit it to GitHub; always store it in your .env file!

Add these two lines to the .env file in your project root:

GMAIL_USER="your-email@gmail.com"
GMAIL_PASS="the-16-character-app-password-you-just-created(no-spaces)"

---

✉️ Step 2: Generate the Email API with Vibe

Now we come to the most magical part!

[!TIP] Vibe Prompt (Copy and send to AI): I'm developing an Astro project. I need to write an API for sending automated emails. 1. Give me the npm command to install nodemailer. 2. Help me create an Astro API Route (POST method) at src/pages/api/send-email.ts. 3. Use nodemailer with Gmail SMTP (reading process.env.GMAIL_USER and GMAIL_PASS). 4. When the frontend POSTs { email, name, date }, send an email with the subject "【Not Far Mountain Campground】Reservation Confirmation" to the guest. 5. For the email content (html), design it with simple HTML and CSS to look warm and high-quality.

The AI will guide you to install the packages:

npm install nodemailer
npm install -D @types/nodemailer

Then generate advanced email-sending logic like this:

import nodemailer from 'nodemailer';
import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const body = await request.json();
  const { email, name, date } = body;

  // Configure mail server (Gmail-specific settings)
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: import.meta.env.GMAIL_USER, // Astro's way of reading env variables
      pass: import.meta.env.GMAIL_PASS,
    },
  });

  // Beautiful HTML template written by AI
  const htmlContent = `
    <div style="font-family: sans-serif; padding: 20px; border: 1px solid #ddd; border-radius: 10px;">
      <h2 style="color: #2F855A;">🏕️ Looking forward to seeing you at Not Far Mountain Campground!</h2>
      <p>Dear <strong>${name}</strong>,</p>
      <p>We've received your reservation with the following details:</p>
      <ul>
        <li>Reservation Date: ${date}</li>
      </ul>
      <p>Remember to bring warm clothes—see you on the mountain!</p>
    </div>
  `;

  // Execute email sending
  try {
    await transporter.sendMail({
      from: '"Not Far Mountain Campground" <noreply@notfar.com>',
      to: email, // Send to guest
      subject: "【Not Far Mountain Campground】Reservation Confirmation",
      html: htmlContent,
    });
    return new Response(JSON.stringify({ message: "Email sent successfully" }), { status: 200 });
  } catch (error) {
    return new Response(JSON.stringify({ error: "Failed to send email" }), { status: 500 });
  }
}


---

✅ Chapter Summary

This is what we call "commercial-grade detail"!
Adding an automated confirmation email not only reduces customer service inquiries like "Did my reservation go through?" but also elevates your project to a premium level.
At this point, the Not Far Web project tutorial is complete! From setting up the environment, database, and member login to automated emails, you now possess full-stack development skills at a professional level!