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?
