Use Netlify function for email

Author: Janaka-Steph

.env.example

@@ -1,4 +1,5 @@
 PUBLIC_URL=/function/bitcoin-studio-client
-REACT_APP_SEND_EMAIL_URL=/api/send-email
+REACT_APP_SEND_EMAIL_URL=/.netlify/functions/send-email
 SMTP_GMAIL_PASS=***
+SMTP_GMAIL_USER=***@gmail.com
 PORT=8081

.gitignore

@@ -24,4 +24,6 @@ logs
 *.log
 
 # Misc
-commands.adoc
+commands.adoc
+# Local Netlify folder
+.netlify

.nvmrc

@@ -1 +1 @@
-14
+16

netlify/functions/send-email/index.ts

@@ -0,0 +1,38 @@
+import {Handler} from '@netlify/functions'
+import nodemailer from 'nodemailer'
+
+export const handler: Handler = async (event, context) => {
+  try {
+    if (!event.body) throw new Error('event.body missing')
+    const data = JSON.parse(event.body);
+    const transporter = nodemailer.createTransport({
+      host: 'smtp.gmail.com',
+      port: 465,
+      secure: true,
+      auth: {
+        user: process.env.SMTP_GMAIL_USER,
+        pass: process.env.SMTP_GMAIL_PASS
+      }
+    });
+    const mailOptions = {
+      from: `"${data.from_name}" <${data.from_email}>`,
+      to: '[email protected]',
+      subject: 'Bitcoin Studio Website Form',
+      text: data.message
+    }
+    const messageInfo = await transporter.sendMail(mailOptions);
+    console.log('messageInfo', messageInfo);
+    return {
+      statusCode: 200,
+      body: JSON.stringify({message: "Mail sent successfully"}),
+      headers: {'Content-Type': 'application/json'}
+    };
+  } catch (error) {
+    console.error(error);
+    return {
+      statusCode: 500,
+      body: JSON.stringify({error: (error as any).message}),
+      headers: {'Content-Type': 'application/json'}
+    };
+  }
+}

netlify/functions/send-email/package-lock.json

@@ -0,0 +1,11 @@
+{
+  "name": "send-mail",
+  "dependencies": {
+    "@netlify/functions": "^1.3.0",
+    "nodemailer": "^6.8.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.11.68",
+    "@types/nodemailer": "^6.4.6"
+  }
+}

netlify/functions/send-email/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "analyze": "source-map-explorer 'dist/static/js/*.js'",
-    "build": "react-scripts build && rm -rf dist && mv build dist",
+    "build": "react-scripts build",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .ts,.tsx src",
     "lint:fix": "eslint --fix .",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@sweetalert/with-react": "0.1.1",
-    "@types/node": "14.11.2",
+    "@types/node": "16.11.68",
     "@types/react": "16.14.32",
     "@types/react-dom": "16.9.16",
     "@types/react-helmet": "6.1.5",
@@ -40,14 +40,11 @@
     "axios": "1.1.3",
     "concurrently": "7.4.0",
     "cors": "2.8.5",
-    "dotenv": "16.0.3",
-    "express-validator": "6.14.2",
     "formik": "2.2.9",
     "i18next": "21.10.0",
     "i18next-browser-languagedetector": "6.1.8",
     "loglevel": "1.8.0",
     "node-sass": "7.0.3",
-    "nodemailer": "6.8.0",
     "nodemon": "2.0.20",
     "normalize.css": "8.0.1",
     "react": "16.14.0",
@@ -71,6 +68,6 @@
     ]
   },
   "engines": {
-    "node": "14"
+    "node": "16"
   }
 }