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
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>