š¤ Receiving Email through EmailJS
Overview
The first time I built a portfolio (a few years ago), I shied away from adding mail server functionality to my app. I incorrectly assumed that using a frontend framework like React (as opposed to Express, Nest, etc) would make it impossible to securely connect to an email service. Turns out I was wrong! (Not the first time)
What is EmailJS?
EmailJS is a service that allows you to send emails directly from your JavaScript code without the need for a backend server. It leverages email templates and a straightforward API that can pretty much be tossed into any application.
Tutorial
Step 1: Set Up Your EmailJS Account
Create an Account: Sign up for a free EmailJS account atĀ EmailJS.Create an Email Service: Once youāre logged in, navigate to the "Email Services" section and add your email provider (like Gmail, Outlook, etc.).Create a Template: Go to the "Email Templates" section and set up a new email template. Define the subject and body, and use placeholders for dynamic content (e.g.,Ā {{name}},Ā {{message}}).Get Your User ID: You'll need this for authentication. Find it in the "Dashboard" section.Step 2: Set Up Your React (or whatever) App
If you haven't created a React app yet, you can do so using Create React App (or vite if youāre cool):
npx create-react-app emailjs-react
cd emailjs-react
Step 3: Install EmailJS SDK
Install the EmailJS SDK with npm:
npm install emailjs-com
Step 4: Create the Emal Form Component
Now, letās create a form component where visitors can send emails. Create a new file calledĀ EmailForm.js:
import React, { useState } from 'react';
import emailjs from 'emailjs-com';
const EmailForm = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [status, setStatus] = useState('');
const sendEmail = (e) => {
e.preventDefault();
const templateParams = {
name,
email,
message,
};
emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, 'YOUR_USER_ID')
.then(() => {
setStatus('Email sent successfully!');
clearForm();
}, (err) => {
setStatus('Failed to send email. Please try again.');
console.error(err);
});
};
const clearForm = () => {
setName('');
setEmail('');
setMessage('');
};
return (
<form onSubmit={sendEmail}>
<input type="text" placeholder="Your Name" value={name} onChange={(e) => setName(e.target.value)} required />
<input type="email" placeholder="Your Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
<textarea placeholder="Your Message" value={message} onChange={(e) => setMessage(e.target.value)} required></textarea>
<button type="submit">Send Email</button>
{status && <p>{status}</p>}
</form>
);
};
export default EmailForm;
Step 5: Use the Email Form in Your App
Now, include theĀ EmailFormĀ component in your main application file. OpenĀ App.jsĀ and import the component:
import React from 'react';
import EmailForm from './EmailForm';
const App = () => {
return (
<main>
<h1>Contact Us</h1>
<EmailForm />
</main>
);
};
export default App;
Step 6: Test Your Application
Run Your React App: Start your app using:Open in Browser: Navigate toĀ http://localhost:3000Ā (or the URL displayed in your terminal).Fill Out the Form: Test the form by entering your details and sending an email.Bam, thatās it so good luck and have fun