I apologize in advance if this is elementary, this is my first attempt at deploying a website and it’s for my portfolio. I have an express route that handles a post request and sends an email with it.
It was working fine locally but once I deployed to DigitalOcean’s app platform the form is returning errors. Originally the backend was running on port 4000 and the frontend was running on port 3000.
Relevant code is below, thanks in advance for any help. Let me know if I missed some information!
luce.codes is the website:
var express = require("express");
var app = express();
require("dotenv").config();
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const cors = require("cors");
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.post("/send_mail", cors(), async (req, res) => {
let { content, contact, name } = req.body;
console.log("response -------->", req.body, content, contact, name);
var transporter = nodemailer.createTransport({
service: "gmail",
auth: {
user: process.env.MAILFROM,
pass: process.env.MAILPASS,
},
});
var mailOptions = {
from: contact,
to: "dale@luce.codes",
subject: "luce.codes inquiry from " + name,
text: contact + " <--contact----- " + "-----content-----> " + content,
};
transporter.sendMail(mailOptions, function (error, info) {
console.log("this is in sendmail before if");
if (error) {
console.log(error);
} else {
console.log("Email sent: " + info.response);
}
});
});
var server = app.listen(4000, function () {
var host = server.address().address;
var port = server.address().port;
console.log("i heard it all at http://%s:%s", host, port);
});
Here is where the axios request is sent:
const handleSubmit = async (evt) => {
if (!disableButton(formState)) {
setSent(true);
try {
const { contact, content, name } = formState;
await axios.post("http://localhost:4000/send_mail", {
contact,
content,
name,
});
And here are the errors in my console:
AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code: "ERR_NETWORK"
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
message: "Network Error"
name: "AxiosError"
request: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}
response: XMLHttpRequest {data: undefined, onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, …}
[[Prototype]]: Error
POST http://localhost:4000/send_mail net::ERR_CONNECTION_REFUSED
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
httpMethod @ Axios.js:144
wrap @ bind.js:9
handleSubmit @ contact.js:40
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4284
executeDispatch @ react-dom.development.js:9011
processDispatchQueueItemsInOrder @ react-dom.development.js:9043
processDispatchQueue @ react-dom.development.js:9056
dispatchEventsForPlugins @ react-dom.development.js:9067
(anonymous) @ react-dom.development.js:9258
batchedUpdates$1 @ react-dom.development.js:25979
batchedUpdates @ react-dom.development.js:3984
dispatchEventForPluginEventSystem @ react-dom.development.js:9257
dispatchEvent @ react-dom.development.js:6435
dispatchDiscreteEvent @ react-dom.development.js:6410
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Enter your email to get $200 in credit for your first 60 days with DigitalOcean.
New accounts only. By submitting your email you agree to our Privacy Policy.
Hi there,
Rather than using
localhost
, you should be able to use the${PRIVATE_URL}
environment variable. This variable is an internally used domain in HTTP format suffixed with the port.For more information on how to use environment variables and the App Platform, I could suggest the following documentation:
https://docs.digitalocean.com/products/app-platform/how-to/use-environment-variables/
Hope that this helps!
Best,
Bobby