Implementé una aplicación que usa JavaScript, Express y Node.js usando Heroku, cuando pruebo manualmente el código en localhost todo funciona, pero cuando lo veo en Heroku, la aplicación no tiene ninguna funcionalidad.
este es el registro de compilación:
-----> 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 HerokuEn su código JS de front-end, declara las variables que usa para interactuar con el DOM si window.location.pathname === '/notes' , consulte aquí:
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'); } El problema aquí es que en su página principal, la etiqueta de anclaje lo lleva a /notes.html en lugar de /notes :
<a class="btn btn-primary btn-lg mt-4" href="./notes.html" role="button">Get Started</a> Debido a esto, sus variables permanecen sin declarar, por lo tanto, no están definidas. Incluso puede verificar esto si escribe los nombres de las variables en la consola de desarrollo si está en /notes.html .
El Front-End parece funcionar bien si estás en ./notes aunque. Así que simplemente cambie el atributo href de "./notes.html" a "./notes":
<a class="btn btn-primary btn-lg mt-4" href="./notes" role="button">Get Started</a>