Hei folkens.
Jeg holder på å lærer React. Har lært en del om React og skal begynne å "utvide" horisonten litt ved å sette opp en node server for håndtering av sending av Epost med SMTP via et kontaktskjema.
Satt opp noe ganske enkelt:
Dette er da contactForm.jsx fila jeg har. Helt basic kjedelig kontaktskjema jeg satt opp for testing.
Her er da server.js fila som ligger i mappen /backend/ på root.
Problemstilling:
Når jeg trykker "Submit" på skjema trigges en alert som sier "Email sent successfully" og en Status 200 med enpoint /backend/send-email vises i Network tab i dev tools med POST og riktig info i Request tabben.
Problemet er at det ikke kommer noen Epost.
Har sjekket at SMTP'en fungerer med infoen jeg har. Det er ingenting feilmeldinger i Console eller på server.
Så da står jeg litt fast når det ikke kommer feilmeldinger.
Har sittet her i 2 dager for å prøve å finne ut hva det er som kan forårsake dette uten hell.
Host leverandøren min har også sjekket, men de finner ingen feilmeldinger på server i noen som helst logger for server eller epost.
Noen her som er dreven i React / Node som kan ta en kikk og se om de ser noen feil?
Jeg holder på å lærer React. Har lært en del om React og skal begynne å "utvide" horisonten litt ved å sette opp en node server for håndtering av sending av Epost med SMTP via et kontaktskjema.
Satt opp noe ganske enkelt:
Kode
import React from 'react'; import { Formik, Field, ErrorMessage, Form } from 'formik'; import * as Yup from 'yup'; import axios from 'axios'; import './../styles/contact.css'; const ContactForm = () => { // Define validation schema using Yup const validationSchema = Yup.object().shape({ name: Yup.string().required('Name is required'), email: Yup.string().email('Invalid email').required('Email is required'), message: Yup.string().required('Message is required'), }); // Handle form submission const handleSubmit = async (values, { setSubmitting }) => { try { await axios.post('/backend/send-email', values); alert('Email sent successfully'); } catch (error) { console.error(error); alert('An error occurred while sending the email'); } finally { setSubmitting(false); } }; return ( <Formik initialValues={{ name: '', email: '', message: '' }} validationSchema={validationSchema} onSubmit={handleSubmit} > {({ isSubmitting }) => ( <Form className="contact-form"> <div className="form-group"> <label htmlFor="name">Name:</label> <Field type="text" id="name" name="name" /> <ErrorMessage name="name" component="div" className="error-message" /> </div> <div className="form-group"> <label htmlFor="email">Email:</label> <Field type="email" id="email" name="email" /> <ErrorMessage name="email" component="div" className="error-message" /> </div> <div className="form-group"> <label htmlFor="message">Message:</label> <Field as="textarea" id="message" name="message" /> <ErrorMessage name="message" component="div" className="error-message" /> </div> <button type="submit" disabled={isSubmitting}> Submit </button> </Form> )} </Formik> ); }; export default ContactForm;
Kode
require('dotenv').config({ path: './backend/.env' }); const express = require('express'); const app = express(); const path = require('path'); const nodemailer = require('nodemailer'); console.log('Server is running'); // Create a transporter using your SMTP settings const transporter = nodemailer.createTransport({ host: process.env.SMTP_HOST, port: process.env.SMTP_PORT, secure: true, auth: { user: process.env.SMTP_USERNAME, pass: process.env.SMTP_PASSWORD, }, logger: true, // Enable logging debug: true, // Enable debug output }); async function sendEmail(name, email, message) { try { // Send the email const info = await transporter.sendMail({ from: process.env.SMTP_SENDER_EMAIL, to: process.env.SMTP_RECIPIENT_EMAIL, subject: 'New contact from submission', text: ` Name: ${name} Email: ${email} Message: ${message} `, }); console.log('Email sent successfully'); console.log('Debug:', info.messageId, transporter.getLastMessage()); } catch (error) { console.error('Error sending email:', error); throw error; } } app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.post('/send-email', (req, res) => { console.log('Sending Email'); // Retrieve the form data from the request body const { name, email, message } = req.body; // Call the sendEmail function with the form data sendEmail(name, email, message) .then(() => { // Send a response back to the client-side (React) app res.json({ message: 'Email sent successfully' }); }) .catch((error) => { console.error('Error sending email:', error); res.status(500).json({ message: 'An error occurred while sending the email' }); }); }); // Serve React app app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, '../', 'index.html')); }); const server = app.listen(3001, () => { console.log('Server started on port 3001'); }); process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled Promise Rejection:', reason); }); process.on('SIGTERM', () => { server.close(() => { console.log('Server terminated'); process.exit(0); }); });
Her er da server.js fila som ligger i mappen /backend/ på root.
Problemstilling:
Når jeg trykker "Submit" på skjema trigges en alert som sier "Email sent successfully" og en Status 200 med enpoint /backend/send-email vises i Network tab i dev tools med POST og riktig info i Request tabben.
Problemet er at det ikke kommer noen Epost.
Har sjekket at SMTP'en fungerer med infoen jeg har. Det er ingenting feilmeldinger i Console eller på server.
Så da står jeg litt fast når det ikke kommer feilmeldinger.
Har sittet her i 2 dager for å prøve å finne ut hva det er som kan forårsake dette uten hell.
Host leverandøren min har også sjekket, men de finner ingen feilmeldinger på server i noen som helst logger for server eller epost.
Noen her som er dreven i React / Node som kan ta en kikk og se om de ser noen feil?