'Mailchimp works on localhost, but github pages sends error 404. Noobie

Checked docs, looked at other codepen examples, but cannot figure out. Any help would be greatly appreciated my github page

  1. index.html
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dosis&family=Indie+Flower&family=Nunito:wght@600&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="public/css/styles.css">
    <title>Edens Sketchbook</title>
</head>


<body id="container">

    <div id="header">
        <h3>edens sketchbook</h3>

This href seems to be the issue, cannot work my way around this or creating a form method to post in app.js. Tried edens-sketchbook-website/signup.html and got to the signup page, but submit led to error 404.

<a href="/signup.html"><input class="pencil grow" type="image" src="public/images/pencil.png"></a>
        
    </div>

    <div id="content">
        <img id='bookshelf' class="mask1" src="public/images/bookshelf.jpg" alt="background image">
    </div>

    <div class="body">
        <img class='head-icon' src="public/images/man.png" alt="">
        <h1>I'm hae jin</h1>
        <h2>a web developer</h2>
    </div>

    <h1 class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati nostrum corporis, voluptatum
        officia quisquam, voluptatem cumque accusantium suscipit optio ex explicabo voluptates voluptatibus facilis
        dolorum libero quibusdam! Dignissimos, dolore
        tempora!ng elit.</h1>

    <footer>
        <ul class="footerIcon">
            <li class="icon size">
                <a href="https://www.facebook.com"><img src="public/images/facebook.png" alt="facebook icon"></a>
            </li>
            <li class="icon space size">
                <a href="https://www.instagram.com"><img src="public/images/instagram.png" alt="instagram icon"></a>
            </li>
            <li class="icon space size">
                <a href="https://www.twitter.com"><img src="public/images/twitter.png" alt="twitter icon"></a>
            </li>

        </ul>
    </footer>


</body>

</html>
  1. signup.html
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Signup to my newsletter!</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <link href="public/css/signupStyles.css" rel="stylesheet">
</head>

<body class="text-center">

    <main class="form-signin">
        <form action="/signup.html" method="post">
            <img class="mb-4" src="public/images/man.png" alt="" width="175" height="175">
            <h1 class="h3 mb-3 fw-normal">Signup to my newsletter!</h1>

            <input type="fName" name="fName" class="mb-1 form-control" id="floatingInput" placeholder="First name" required autofocus>
            <input type="lName" name="lName" class="mb-1 form-control" id="floatingPassword" placeholder="Last name" required>
            <input type="email" name="email" class="form-control" id="floatingPassword" placeholder="Email" required>

            <form action="/signup.html" method="post">
            <button class="mt-2 w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
            </form>
            <p class="mt-5 mb-3 text-muted">&copy; Edens Sketchbook</p>
        </form>
    </main>

</body>

</html>
  1. app.js Sends info to mailchimp on localhost, but when I submit on signup.html, error 405
require('dotenv').config();

const express = require("express");
const bodyParser = require("body-parser");
const https = require("https");

const app = express();

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static(__dirname));

app.get("/", function(req, res) {
    res.sendFile("/index.html");
})

app.get('/signup.html', function(req, res) {
    res.sendFile(__dirname + '/signup.html');
})


app.post("/signup.html", function(req, res) {
    const firstName = req.body.fName;
    const lastName = req.body.lName;
    const email = req.body.email;

    const data = {
        members: [
            {
                email_address: email,
                status: "subscribed",
                merge_fields: {
                    FNAME: firstName,
                    LNAME: lastName
                }
            }
        ]
    }

    const jsonData = JSON.stringify(data);
    const url = "https://us14.api.mailchimp.com/3.0/lists/10fbdd298e";

    const options = {
        method: "POST",
        auth: process.env.API_KEY
    }

    const request = https.request(url, options, function(response) {
        console.log(response.statusCode);
        if(response.statusCode === 200) {
            res.sendFile(__dirname + "/success.html");
        } else {
            res.sendFile(__dirname + "/failure.html");
        }
        response.on("data", function(data) {
            console.log(JSON.parse(data));
        })
    })

    request.write(jsonData);
    request.end();
})


app.listen(process.env.PORT || 3000, function() {
    console.log("server is running on port 3000");
})
javascripthtmlnode.jsexpress


Solution 1:[1]

const options = {
    method: "POST",
    auth: "process:paste your apikey here"
}

and make sure the audience id is correct

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions