I’ve got a basic web app that has a button that should send a request to another app I am hosting on glitch.
-
The javascript app runs repeatedly whether or not its receiving an outside request, I am not sure how to fix that
// server.js
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.USER,
pass: process.env.PASS,
}
});
var mailOptions = {
from: process.env.USER,
to: process.env.USER,
subject: 'Sending Email using Node.js',
text: 'That was easy!'
};
transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info.response);
}
});
-
Web app seems to work fine, I am not sure if just putting the live app link for the javascript https://glitch.com/edit/#!/email-linds under a button click event is the correct way to send a request
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<button onclick="https://email-linds.glitch.me">Click For Snazzy Pic</button> <!-- script to ping --!>
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
Ah so you want to put the code that sends the email within a “route”, basically telling the app which URL should trigger that code to run.
The most common way to do that using the express (https://expressjs.com) framework. You’d do something like this:
const express = require("express")
const app = express()
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html")
/* this sends the "index.html" file when people go to your-app.glitch.me/ */
})
app.get("/send", (req, res) => {
// this code will execute when someone makes a GET request to your-app.glitch.me/send
// send the email here
res.redirect("/") // after sending the email, redirect back to "index.html" at your-app.glitch.me/
})
Then, you can make the button just a link that goes to your-app.glitch.me/send:
<a href="/send">click me</a>
When you visit a website (like the page you’re looking at right now), the browser makes a GET type request.
So, when you click on that link, the browser will make a GET request to /send, your email sending code will execute, and then the res.redirect will redirect them back to the first route.
Alternatively, you could res.sendFile(__dirname + "/sent.html") and show the user a different HTML page (maybe one that says “Sent!” or confirms that the email has been sent) instead of just redirecting them back to where they came from.
1 Like
so I added this to my email app server.js , but now the webpage just sits at the starting screen for the email app project and never does anything.
// server.js
const express = require("express")
const app = express()
app.get("/", (req, res) => {
res.sendFile(__dirname + "https://email-page.glitch.me/index.html")
/* this sends the "index.html" file when people go to your-app.glitch.me/ */
})
app.get("https://email-linds.glitch.me/send", (req, res) => {
// where your node app starts
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.USER,
pass: process.env.PASS,
}
});
var mailOptions = {
from: process.env.USER,
to: process.env.USER,
subject: 'Sending Email using Node.js',
text: 'That was easy!'
};
transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info.response);
}
});
// this code will execute when someone makes a GET request to your-app.glitch.me/send
// send the email here
res.redirect("https://email-linds.glitch.me/index.html") // after sending the email, redirect back to "index.html" at your-app.glitch.me/
})
``
so the three times you added https://email-page.glitch.me are actually all unnecessary.
With the app.get("/") function, you’re saying that when someone goes to the URL “/” (which is actually email-linds.glitch.me/), the app should send back the file “index.html” that you’ve written. First: no need to write email-page.glitch.me before it, since /index.html is actually coming from the filesystem of the project itself. Also, the project won’t load if you don’t actually have an index.html file created.
So to reiterate, that line should be:
res.sendFile(__dirname + /index.html")
and you need to create an index.html file in your project (where you get to write your HTML with the button!)
You also need to replace app.get("https://email-linds.glitch.me/send ..." with app.get("/send" ..., since you don’t need to include the full URL for Express.
Lastly, you should res.redirect("/"). You’re redirecting the person to a URL on your project, not to a specific file (since not all files you write in your project are automatically public). We made the index.html file public by telling Express, "when someone goes to /, give them index.html. Therefore, we need to tell Express "when you’re done sending the email, redirect them back to /". We know that sending the visitor back to / will actually trigger the first block of code and show them index.html.
2 Likes
Okay, so this is all supposed to go in the web app project, reformatting the server.js of email-linds to what you’ve given me and bringing in whatever other files from email-linds that are dependents. That was my question, where all of this was supposed to go. As a new .js in the web app or am I copying all of the files from email app over? https://glitch.com/edit/#!/email-page
Oops, sorry! I forgot an important part. You need to open the app up to traffic!
At the end of your server.js, add this:
app.listen(3000)
This launches the Express server on port 3000, so it’s accessible from the link.
So server.js is where your server-side code goes, and index.html is your “frontend” (what people interact with).
If you want to add CSS or JavaScript to that index.html (as I see you are right now), put the CSS and JavaScript files in a folder called public (rename the style.css file to public/style.css, for example).
Then, add this line somewhere in your server.js:
app.use(express.static("public"))
That tells Express to open up the public folder to the internet (as I said before, not every file you write is public on the internet - which is good. You get to control what you allow people to see, and so far you’ve allowed people to see index.html when they go to /, and now they can see any file in the public folder by going to email-page.glitch.me/style.css to see public/style.css, for example).
More info on express.static can be found here: https://expressjs.com/en/starter/static-files.html
Also, you should change the res.redirect line to:
res.redirect("/")
You’re redirecting back to the URL / (short for email-page.glitch.me/), where the visitor will see index.html.
Also, server.js should not be moved to the public/ folder, since it’s not something you want revealed to the whole world. server.js runs on the server only. The public/ folder is only for files you want to use in index.html.
so now if I try to open up the webpage with the live code link like I did before it brings me to the eternal project start page?
this is because you moved server.js to public/, which is not right
fixed, webpage loads but still stuck at starting project screen once I click the button.
The button goes to the wrong project link, you haven’t updated it yet.
You can just use
<a href="/send">click me</a>
to always use the current project URL.
1 Like
thank you for your patience
No problem! I remember learning these things, it’s a slow start but it gets a lot easier :))
Oh also, don’t forget to add this to server.js:
app.use(express.static("public"))
in order to open up the public/ folder to the world (where your styles are).
1 Like