Heroku application doesn't work (Deployment problem?)

Question

I've deployed an application that uses JavaScript, Express and Node.js using Heroku, when I manually test the code in localhost everything works but when viewing it in Heroku the app doesn't have any functionality at all.

this is the build log:

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 14.x...
       Downloading and installing node 14.17.5...
       Using default npm version: 6.14.14
       
-----> Restoring cache
       - node_modules
       
-----> Installing dependencies
       Installing node modules (package.json)
       audited 50 packages in 0.703s
       found 0 vulnerabilities
       
       
-----> Build
       
-----> Caching build
       - node_modules
       
-----> Pruning devDependencies
       audited 50 packages in 0.738s
       found 0 vulnerabilities
       
       
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 33.1M
-----> Launching...
       Released v18
       https://note-taker-io.herokuapp.com/ deployed to Heroku

Answer 1

In your Front-End JS Code you declare your variables you use for interacting with the DOM if window.location.pathname === '/notes', see here:

let noteTitle;
let noteText;
let saveNoteBtn;
let newNoteBtn;
let noteList;

if (window.location.pathname === '/notes') {
  noteTitle = document.querySelector('.note-title');
  noteText = document.querySelector('.note-textarea');
  saveNoteBtn = document.querySelector('.save-note');
  newNoteBtn = document.querySelector('.new-note');
  noteList = document.querySelectorAll('.list-container .list-group');
}

The problem here is that at your front-page, the anchor tag takes you to /notes.html instead of /notes:

<a class="btn btn-primary btn-lg mt-4" href="./notes.html" role="button">Get Started</a>

Because of this, your variables stay undeclared, hence they are undefined. You can even check this if you type the names of the varibles in the dev console if you are on /notes.html.

The Front-End seems to work fine if you are on ./notes tho. So just change the href attribute from "./notes.html" to "./notes":

<a class="btn btn-primary btn-lg mt-4" href="./notes" role="button">Get Started</a>