Soy un novato, experimentando con JS. Estaba tratando de crear una pequeña aplicación Node.js, con un script JS incrustado en index.html, pero cuando ejecuto nodemon, devuelve 404 para el script y no puedo encontrarlo. La misma página html con script incrustado funciona bien con el paquete. ¿Qué estoy haciendo mal?
Mi aplicación.js:
const express = require('express') app = express() app.get('/', (req, res, next)=>{ res.sendFile('D:/Node.js Folder/My first project/views/index.html') }) app.get('/add-user', (req, res, next)=>{ res.sendFile('D:/Node.js Folder/My first project/views/add-user.html') }) app.get('/show-user', (req, res, next)=>{ res.sendFile('D:/Node.js Folder/My first project/views/show-users.html') }) app.listen(3000)Archivo HTML:
<!DOCTYPE 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"> <title>Document</title> </head> <body class = "text-gray-400"> <div> <div class = "text-3xl"> <nav> <h1> Hello! Welcome to the first page! </h1> <h1 class = "chat-notification-title"> Hello! Welcome to the first page! </h1> <form> <label for="cname">Company Name</label><br> <input type="text" id="cname" name="cname"><br> <label for="ccode">Company Code</label><br> <input type="text" id="ccode" name="ccode"> </form> <button class ='btn-submit' type = "submit">Add Record</button> </nav> </div> </div><script src="../controller/controller-1.js"></script> </body> </html>Guión incrustado:
'use strict' console.log(document) const button = document.querySelector('.btn-submit') console.log(button) button.addEventListener('click', function () { console.log('BUTTON PRESSED') alert("Pressed") })Se supone que Nodemon se usa en el lado del servidor, a menudo ejecutando un servidor express o similar. el parcel serve es lo que se supone que debe usar en el lado del cliente (sin servidor), para servir los archivos html directamente.
Tampoco debe usar rutas a su propio disco. Afortunadamente, cuando el proyecto se está ejecutando, crea una carpeta dist con los mismos archivos. Está destinado a vincularlos a las rutas en el código. Es decir, en res.sendFile debe escribir res.sendFile(path.resolve("../client/dist/index.html")) o res.sendFile(path.resolve("../dist/views/index.html))
Importa la ruta como import * as path from "path"
Si desea usarlo con un servidor, debe hacer esto:
El cliente json "dev" debe parcel watch index.html , y el servidor "dev" debe nodemon server.js . Se supone que estos dos scripts se ejecutan en el archivo raíz package.json, al mismo tiempo, lo que les permite ejecutarse simultáneamente
"dev": "concurrently npm:server:dev npm:client:dev", "server:dev": "cd server && npm run dev", "client:dev": "cd client && npm run dev",En el archivo del servidor, debe hacer algo como esto:
import express from "express"; //import express const app = express(); // use express app.use(express.static("../client/dist/")); // allows express to server static files app.use((req, res, next) => { if (req.method === "GET" && !req.path.startsWith("/api")) { return res.sendFile(path.resolve("../client/dist/index.html")); } else { next(); } }); // checks if url is trying to reach an api, if not it returns the file you are looking for const server = app.listen(process.env.PORT || 3000, () => { console.log("Server started on http://localhost:" + server.address().port); }); // starts server and logs the localhost urlEntonces, debe acceder a su sitio desde el lado del servidor, y cada vez que cambie el servidor, nodemon reiniciará el servidor por usted, y cada vez que cambie el cliente, el paquete hará lo mismo.
Una cosa que debe hacer es dejar de usar rutas absolutas
por ej. 'D:/Node.js Folder/My first project/views/index.html'
debería ser ./views/index.html
asumiendo que el archivo app.js está en la misma carpeta que la carpeta de vistas.
El servidor en el que puede implementar este código no tendrá la misma ruta que su computadora.
También es posible que desee crear una carpeta estática y mover su carpeta html, script (controlador) dentro de ella y agregar la siguiente línea a app.js
app.use('/', express.static('static')) // or app.use('/', express.static('./static'))de esta manera no tendrá que servir los archivos individuales como lo está haciendo ahora.
si tiene el src para el archivo incrustado establecido en ./controller/controller-1.js , funcionará bien.
Lo resolví agregando esto a mi app.js:
app.get('/controlador/controlador-1.js', (req, res, siguiente)=>{
res.sendFile('D:/Node.js Folder/My first project/controller/controller-1.js')})
Ayuda de este hilo: ¿Cómo incluir javascript en el lado del cliente de node.js?
¿Hay una mejor manera de hacer esto?