Integraties

E-mail versturen vanuit Bolt

Bouw en deploy apps vanuit een prompt, met WeSender voor transactionele mail.

Bouw-tool Prompt

Vereisten

  • Bolt.new-account
  • WeSender-account met geverifieerd domein
  • Basiskennis van hoe Bolt server-side routes maakt

Stap 1: Start een nieuw Bolt-project met server-side logica

Open Bolt.new en prompt een app met een server-side API-route. Bolt ondersteunt frameworks zoals Remix en Next.js, die server-side code native ondersteunen. Kies Remix of Next.js voor de beste resultaten met server-side secrets.

Stap 2: Voeg de WeSender API-sleutel toe als omgevingsvariabele

In Bolt kun je omgevingsvariabelen instellen via het .env-venster in de editor. Voeg toe: WESENDER_API_KEY=jouw_sleutel. Bolt gooit de .env niet mee in exports, maar sla de sleutel ook op in je eigen .env.local als je het project lokaal runt.

Stap 3: Prompt Bolt om een e-mail API-route te maken

Typ in Bolt: Maak een POST API-route /api/send-email. De route leest WESENDER_API_KEY uit process.env en stuurt een e-mail via POST https://api.wesender.nl/v1/emails met JSON-body {from, to, subject, html}. Geef het e-mail-id terug als JSON. Bolt schrijft de route in het gekozen framework.

Stap 4: Koppel de route aan een UI-actie

Prompt Bolt om een formulier of knop toe te voegen die de route aanroept: Voeg een knop toe op de homepage die POST /api/send-email aanroept met testdata en het resultaat (e-mail-id of foutmelding) toont in een alert.

Stap 5: Test en deploy

Klik op de knop in de Bolt-preview. Controleer je inbox en het WeSender-dashboard. Gebruik daarna de Bolt deploy-knop om de app live te zetten. Zorg dat de productie-omgeving ook de WESENDER_API_KEY-variabele heeft.

Volledig voorbeeld

Hier is de volledige implementatie in app/routes/api.send-email.ts:

import type { ActionFunctionArgs } from "@remix-run/node"
import { json } from "@remix-run/node"

export async function action({ request }: ActionFunctionArgs) {
  if (request.method !== "POST") {
    return json({ error: "Method not allowed" }, { status: 405 })
  }

  const { to, subject, html } = await request.json()

  const res = await fetch("https://api.wesender.nl/v1/emails", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.WESENDER_API_KEY}`,
      "Content-Type":  "application/json",
    },
    body: JSON.stringify({
      from: "noreply@jouwdomein.nl",
      to,
      subject,
      html,
    }),
  })

  const data = await res.json()
  return json(data, { status: res.status })
}

Veelgestelde vragen

Bolt heeft geen .env-ondersteuning in mijn project. Wat nu?

Prompt Bolt om het project te converteren naar een framework met native .env-ondersteuning zoals Remix of Next.js. Die frameworks lezen process.env server-side en sturen omgevingsvariabelen nooit naar de browser.

Kan ik de WeSender Node SDK gebruiken in Bolt?

Ja. Prompt Bolt om @wesender/node te installeren en gebruik dan: import { Wesender } from '@wesender/node'; const client = new Wesender(process.env.WESENDER_API_KEY!); await client.emails.send({...}). Dit geeft typeveiligheid.

Volgende stappen