Hello,
Below is a breakdown of everything that should be needed for the problem I’m having.
The issue:
After I run the optimized production build and deploy my app to netlify (using the netlify CLI), I receive a “502 Bad Gateway Error” when trying to submit my contact or subscribe form:
When I submit the form in the local development environment, it goes through fine and sends a status code of 200.
App info:
Netlify site name: endevrs.netlify.app
Custom domain name: www.endevrs.dev
The application was created with create-react-app and I’m using a custom server since I’ve implemented nodemailer on my site for the contact form. I’m using lambda functions and axios to interact with the server. For the interaction with Mailchimp I’m using the mailchimp-api-v3 package from npm (mailchimp-api-v3 - npm).
Some background:
The problem has only started recently, I used to be able to submit the forms with no issue. I have updated my DNS recently to authenticate my mailchimp domain for my site and this is when I started noticing issues. I’m definitely new to web development (been coding for less than 6 months) and very new to DNS, networking, etc. so I wouldn’t be surprised if I screwed something up on that end. I recently switched my nameservers on Namecheap yesterday to point to Netlify instead of setting up custom DNS on Namecheap’s site. Perhaps it’s just taking some time to propagate but I’m not sure.
The code:
Here’s a portion of my custom NodeJS server (server.js in the api folder) for the mailchimp form route:
// INITIALIZE MAILCHIMP API
const mailchimpAPIKey = process.env.MAILCHIMP_API_KEY;
const mailchimpListID = process.env.MAILCHIMP_LIST_ID;
const Mailchimp = require("mailchimp-api-v3");
const mailchimp = new Mailchimp(mailchimpAPIKey);
// MAILCHIMP
router.post("/api/subscribe", (req, res, next) => {
const { fName, lName, email } = req.body;
mailchimp
.post(`/lists/${mailchimpListID}/members`, {
email_address: email,
status: "subscribed",
merge_fields: {
"FNAME": `${fName}`,
"LNAME": `${lName}`,
},
})
.then((response) => {
if (response.statusCode === 200) {
res.send({
body: JSON.stringify({ status: "Success!" }),
});
} else {
res.send({ body: JSON.stringify({ status: "Failed." }) });
}
})
.catch((err) => {
console.log(err);
res.send({ body: JSON.stringify({ status: "Failed." }) });
});
});
(I’ve included the environment variables in my online netlify account)
And here’s the portion of my frontend where I’m using axios to submit the form:
const onSubmit = (userData) => {
axios
.post("/.netlify/functions/server/api/subscribe", {
fName: userData.fName,
lName: userData.lName,
email: userData.email,
})
.then(
setSubmitButton({ visible: true, text: "Sending...", submitted: true })
)
.then((res) => {
if (res.statusCode === 200) {
setSubmitButton({
text: "Invite Sent!",
sent: true,
message:
"Thanks for subscribing!",
});
} else {
setSubmitButton({
text: "Join Party",
sent: false,
message:
"Sorry, something went wrong.",
});
}
})
.catch((error) => {
console.log(error);
});
};
Here’s my toml file:
[build]
functions = “functions”
publish = “client/build”
[[redirects]]
from = “/*”
to = “/index.html”
status = 200
And lastly, the scripts section of my package.json:
“start”: “run-p start: two_asterisks”,
“start:lambda”: “netlify-lambda serve api”,
“start:app”: “cd client && npm start”,
“build”: “run-p build: two_asterisks”,
“build:lambda”: “netlify-lambda build api”,
“build:app”: “cd client && npm run build”,
“deploy:draft”: “netlify deploy --dir=client/build --functions=functions”,
“deploy:prod”: “netlify deploy --dir=client/build --functions=functions --prod”
(The “two_asterisks” spots are actually asterisks in my application, but it was formatting the text to bold here)
If anything else is required, feel free to let me know. Any help on this would be greatly appreciated, I’ve been pulling my hair out over this one!
Thanks!
Seth