#javascript #webdev #beginners #programming
Well, while working on a SaaS application for a client recently, I came across a feature where the application allows you to take the screenshot of the entire page and have it sent in the email to the requested user either in the Image or PDF format. I got intrigued by this feature and thought of sharing it here.
STEP-1: The setup - We are going to need a backend which I have designed using Node.js and Express.js to take the screenshot and mail it along with the frontend. The Backend and Frontend can be found in the repos attached.
STEP-2: The UI - Honestly, the UI of a SasS application can be quite boring as it just displays a lot of boring data consists of metric cards, goal scorecards, charts etc. so to make this blog a little interesting the UI displays a collection of Pokemon cards, because who doesn't like Pokemons, eh?
STEP-3: The backend - Now since the UI is there, let's build the backend. It is gonna be quite simple. It just gonna have a route which would be called when the "Export Screenshot" button from the frontend is clicked.
const express = require("express")
let cors = require("cors")
const { sendEmail } = require("./helpers/helper")
const app = express()
app.use(cors())
app.use(express.json())
app.get("/", (req, res) => {
res.send("backend home route")
})
app.post("/send-screenshot", async (req, res) => {
const { receiversEmail } = req.body
try {
await sendEmail(receiversEmail)
res.status(200).send("Email sent successfully")
} catch (err) {
res.status(400).send("Error in sending the email with screenshot")
}
})
app.listen(4000, () => {
console.info("Backend is running on port 4000")
})
STEP-4: The Screenshot - Now, since the frontend and backend are in place, let's use the Screenshot API's query builder to design a query for the screenshot.
Here, I have designed a query in order to get a high resolution, full page screenshot of the current page.
Following are the options that I am using explained:
Moreover, if you want to take screenshot of any public website that then following two options are going to be of utmost importance. "Block ads" and "no Cookie banners".
Finally, the query would look something like this
https://shot.screenshotapi.net/screenshot?token=<YOUR_API_TOKEN>&url=<FORNTEND_URL>&full_page=true&fresh=true&output=image&file_type=jpeg&lazy_load=true&retina=true&wait_for_event=networkidle
PS. For the frontend URL ngrok can be used.
STEP-5: The Email - We are gonna use nodemailer for sending the screenshot. The screenshot.api would send back the JSON response which would contain the screenshot key that would contain the URL of the screenshot. Now, for emailing the image we need to first fetch the image, write it to the disk using the fs module and then send it using nodemailer. Attaching the code to the below:
const nodemailer = require("nodemailer")
const axios = require("axios")
const fs = require("fs")
const { SCREENSHOT_API_TOKEN } = require("./credentials")
const path = require("path")
const takeScreenshot = async () => {
try {
var query = "https://shot.screenshotapi.net/screenshot"
let url = "<FRONTEND_URL>"
query += `?token=${SCREENSHOT_API_TOKEN}&url=${url}&full_page=true&fresh=true&output=image&file_type=jpeg&lazy_load=true&retina=true&wait_for_event=networkidle`
const response = await axios.get(query)
console.info(JSON.stringify(response.data))
const imageStream = await axios.get(screenshotURL, {
responseType: "stream",
})
return imageStream
} catch (err) {
console.error("\nError while taking the screenshot", err)
throw err
}
}
const sendEmail = async (receiversEmail) => {
try {
let mailerConfig = {
host: "smtp.gmail.com",
port: 587,
secure: false, // true for 465, false for other ports
auth: {
user: "<GMAIL_ID>", // user
pass: "<APP_PASSWORD>", // password
},
}
let transporter = nodemailer.createTransport(mailerConfig)
const imageStream = await takeScreenshot()
const imagePath = path.join(__dirname, "..", "output", "screenshot.png")
imageStream.data
.pipe(fs.createWriteStream(imagePath))
.on("finish", () => {
// send mail with defined transport object
let info = await transporter.sendMail({
from: "<SENDER'S EMAIL ADDRESS>", // sender address
to: `${receiversEmail}`, // list of receivers
subject: "Screenshot requested", // Subject line,
attachment: [
{
filename: imagePath,
content: imageBuffer,
encoding: "base64",
},
],
text: "Hello! find the screenshot that you requested attached", // plain text body
html: "<b>Hello! find the screenshot that you requested attached</b>", // html body
})
})
.on("error", (err) => {
console.error("Stream closed with following error: ", err)
})
return true
} catch (err) {
console.error("\nError in sending the email", err)
throw err
}
}
module.exports = {
sendEmail,
}
PS. If you want to use your Gmail account then you need to generate an app password.
More details can be found here