Email Form App: NodeJs Express - Cannot GET /-CodePudding

I'm getting this cannot GET error whenever I run my app on a live server with VS Code. My best guess is that it has to do with my routing being incorrect, I'm just not sure what about my routing is wrong. Any sort of help is appreciated <3

The goal is to send a POST request with the user's email inputted into a form element when the app is finished.

app.js

const express = require('express');
const request = require('request');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

//Middleware
app.use(express.json());

app.use(bodyParser.urlencoded({extended: false}));

console.log("The directory is:", (path.join(__dirname, '/site')));

app.use(express.static(path.join(__dirname, '/site')));

app.post('/', (req, res) => {
    console.log('hey!');
});

app.listen(5000, console.log('Server started!'))

landing.html

<form action="/subscribe" method="POST">
  <div class="newsletter-form-grp">
     <i class="far fa-envelope"></i>
    <input name="email" id="email" required pattern="[a-z0-9.% -] @[a-z0-9.-] \.[a-z]{2,4}$" type="email" placeholder="Enter your email...">
  </div>
  <button id="cta">SUBSCRIBE <i class="fas fa-paper-plane"></i></button>
</form>

JS Code inside landing.html

<script>
   //form submission
   let cta = document.getElementById('cta');
   let email = document.getElementById('email').value;
   let status = document.getElementById('status');

   cta.addEventListener('click', (event) => {
       event.preventDefault();

       if(this.email.value == null || this.email.value == "") {
             status.classList.add('statusShow');
       } else {
              let fetchData = {
                 method: 'POST',
                 body: JSON.stringify({email: this.email.value, js: true}),
                 headers: {"Content-Type": "application/json"}
              }

              fetch('/subscribe', fetchData)
                 .then(res => {
                   if(res.ok) {
                                // yay
                   } else {
                      status.classList.add('statusShow');
                   }
                })
       }
    });
</script>

JSON Package

{
  "name": "Main",
  "version": "1.0.0",
  "description": "",
  "main": "site/js/app.js",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "index": "^0.4.0",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  },
  "scripts": {
    "serve": "node app",
    "dev": "nodemon app"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Project Tree: https://imgur.com/a/B9Ucrap

CodePudding user response：

Your landing.html is a static file (in the site folder?), and you also do not have a GET route defined in Express to serve this page. So, in order to access it from your browser, you need to use: http://localhost:5000/landing.html.

Your form says: <form action='/subscribe' action='POST'>. Therefore, your Express needs this route defined:

app.post("/subscribe", (req, res) => {
   console.log("hey!");
   res.send("got it!"); 
});

BTW, your Html doesn't have an element with id of status. Your subscribe button click event code will hit an error.