Tienes varios problemas relacionados con la forma en la que estás accediendo a los datos en tu aplicación.
PROBLEMA
Se desea servir un (o algunos) archivos de JavaScript desde la carpeta public
en un servidor Express usando NodeJS y EJS.
SOLUCIÓN
Para lograr lo que te propones, debes entender en primer lugar el concepto de carpeta raíz (root folder) desde la cual se sirve o se ejecuta tu aplicación.
Cuando creas un servidor usando Express con NodeJS, el directorio root
del servidor será el que contenga el punto de entrada. Como sabemos, una aplicación Express.js tiene un punto de entrada que normalmente es un archivo llamado index.js
, pero esto puede variar según las preferencias de cada programador.
Una estructura muy básica de una aplicación podría ser la siguiente:
project-folder
|
-/public
| |
| --\css
| | |
| | -styles.css
| |
| --\js
| | |
| | -myScript.js
| |
| -favicon.ico
|
-/routes
| |
| -routes.js
|
-/views
| |
| - header.ejs
| - index.ejs
| - footer.ejs
|
-index.js
Siendo que el punto de entrada de nuestra aplicación es index.js
, el directorio raíz (\
) será el directorio project-folder
. El acceso al resto de componentes de nuestra aplicación la haremos de forma relativa a dicho directorio.
Ahora, sucede que a veces tenemos proyectos que separan los archivos fuente de los archivos de distribución:
project-folder
|
--\src
| |
| - // archivos fuente
|
--\dist
|
- // archivos de distribución
Ahora el directorio raíz de nuestra aplicación será project-folder\src
, (siempre que el punto de entrada se encuentre en src
) por lo tanto el acceso al resto de componentes de nuestra aplicación se hará de forma relativa a dicho directorio.
Tomando en cuenta estas consideraciones, ya podemos entender un poco más cómo Node maneja las rutas relativas al punto de entrada de la aplicación.
Express.static()
El método static()
de ExpressJS es usado para indicarle al servidor Node, la ubicación (con respecto al directorio raíz) de los archivos estáticos que serán servidos al cliente.
Sin embargo, dicha ruta será la ruta raíz
en el lado cliente. Suena algo confuso, pero es sencillo una vez que lo entendemos.
Resulta que del lado cliente, los archivos a los que deseamos acceder serán servidos a partir de una ruta raíz que en este caso será la URI
de nuestra aplicación.
Por ejemplo, en desarrollo normalmente la URI
de nuestra aplicación es http://localhost:3000
, por lo tanto este será el directorio raíz desde el lado cliente, todos los recursos a los que deseemos acceder se harán relativos a esta URI
.
Ahora bien, lo que le pasamos al método static()
en el lado servidor es el nombre del directorio donde se alojarán los archivos que serán servidos en la ruta raíz (http://localhost:3000
) de nuestra aplicación en el lado cliente.
Así, si tenemos nuestros archivos estáticos en el servidor dentro de la carpeta public
es por mantenerlos separados del resto de nuestros archivos y de esta forma crear una barrera de protección. Cada archivo o directorio dentro de nuestra carpeta public
podrá ser accedido desde la ruta raíz (URI
) de nuestra aplicación.
Por ejemplo, si en nuestra carpeta public
en el lado del servidor tenemos un archivo llamado: recurso.html
, el mismo se podrá acceder desde el lado cliente en la siguiente dirección: http://localhost:3000/recurso.html
Lo mismo sucederá con los recursos que declaremos como fuente en nuestros documentos html
. Si una etiqueta script
hace referencia a un archivo .js
de nuestro servidor, el mismo será ubicado con relación a la URI
de nuestra aplicación.
De acuerdo a lo que planteas en tu pregunta, tienes una plantilla en EJS, en la cual tienes una etiqueta script
de la siguiente forma:
<script src="../public/confirm.js"></script><!-- Esto está mal -->
Si analizamos la ruta que estás pasando al atributo src
vemos que le estás indicando al navegador que intente acceder o que solicite al servidor un archivo que se encuentra en el directorio padre de nuestra raíz (http://localhost:3000
) en una carpeta llamada public
.
El primer problema aquí es que el directorio raíz no tiene directorio padre (../
), por lo tanto la solicitud será rechazada.
El segundo problema es que estás usando el nombre de la carpeta public
, la cual es el nombre de nuestro repositorio de archivos estáticos en el lado servidor, pero en el lado cliente no existe tal carpeta (a menos que dentro de nuestra carpeta public
en el servidor exista otra sub carpeta llamada public
).
Entonces la etiqueta debes re escribirla de la siguiente manera:
<script src="confirm.js"></script>
De esta forma nuestro servidor Express, cuando reciba la solicitud de servir el archivo confirm.js
lo hará desde la carpeta llamada public
en nuestra aplicación.
Una buena práctica es separar los archivos (según su tipo) en carpetas dentro de la carpeta public
. Por ejemplo los archivos de Javascript puedes tenerlos todos dentro de una carpeta llamada js
en public
, los archivos de estilos los puedes poner dentro de una carpeta llamada css
en public
.
Así, podríamos poner la etiqueta script
de la siguiente forma:
<script src="js/confirm.js"></script>
O nuestra etiqueta de estilos:
<link rel="stylesheet" href="css/styles.css">
Ahora ambos atributos apuntan a sub carpetas que deben existir dentro de la carpeta public
en nuestro servidor.
Express Response
El segundo problema en tu aplicación es el siguiente:
res.render('identification.ejs');
res.sendFile('./public/confirm.js');
Si leemos la documentación del objeto reponse
de Express, específicamente la documentación de los métodos render()
y sendFile()
, podremos notar algo importante:
ambos métodos envían una respuesta al cliente.
Siendo HTTP
un protocolo del tipo solicitud/respuesta, es de esperar que por cada solicitud realizada por el cliente, se envía una única respuesta desde el servidor. Por lo tanto, ya puedes ir vislumbrando el error al intentar enviar 2 respuestas a la misma solicitud http
. Es por ello que recibes el mensaje Can't set headers after they are sent
, lo que indica que ya se ha enviado una respuesta al cliente para la solicitud realizada.
Por otra parte, cuando haces:
res.sendFile('./public/confirm.js');
efectivamente estás enviando un archivo llamado confirm.js
al cliente, pero el mismo no será parte de una etiqueta html
dentro de un documento, por lo tanto el navegador no lo ejecutará, por el contrario lo renderizará tal como lo reciba.
Además, la documentación de dicho método indica que debes pasar la ruta absoluta del archivo que deseas enviar (./public
es una ruta relativa), o configurar el directorio raíz para usar rutas relativas.
Superados estos obstáculos puedes volver a escribir tu código de la siguiente forma:
identification.ejs:
<% include header.ejs%>
<body>
<p>Complete the folowing input bars acordinly</p>
<input id="name" type="text" name="name" placeholder="First and last name"/>
<input id="id" type="number" name="id" placeholder="Id number"/>
<input id="homeAd" type="text" name="homeAd" placeholder="Home address"/>
<input id="posCod" type="number" name="posCod" placeholder="Postal Code"/>
<input id="phone" type="number" name="phone" placeholder="Phone"/>
<input id="homePhone" type="number" name="homePhone" placeholder="Home phone number"/>
<input id="email" type="text" name="email" placeholder="Email"/>
<br>
<button id="ideconfi" onclick="hola()">Sumbit</button>
</script src="js/confirm.js">
<!-- Puedes notar que tu archivo 'confirm.js' está dentro de una carpeta llamada 'js' -->
index.js
// Usando ES5 (en aplicaciones Node es preferible siempre usar let y const en vez de var)
const express = require('express');
const app = express();
app.use(express.static('public')); //<- la carpeta 'public' debe estar en el directorio raíz de la aplicación (el directorio que contiene a index.js)
app.get('/ide', (req, res, next) => { //como buena práctica siempre incluye el objeto 'next'
console.log(req.url);
res.render('identification.ejs'); // <- como no se especifica el 'engine' se debe colocar la extensión del archivo que se envía para renderizar en el navegador
});
app.listen(3000, () => {
console.log('Servidor escuchando en puerto 3000');
});
Espero que esto aclare tus dudas.
Puedes ver este repositorio que he creado en Github donde hay un pequeño ejemplo de uso de EJS con Express y cómo se aplicaría a tu caso de uso. En el mismo encontrarás que puedes acceder a 2 rutas: http://localhost:3000
para que veas funcionando lo explicado aquí sobre el uso de la carpeta public
para servir archivos estáticos con Express, y la ruta http://localhost:3000/getfile
, para que veas de qué manera el navegador procesa un archivo enviado con el método sendFile()
de Express.
app.use(express.static('./public/confirm.js'));
está mal. Debería ser:app.use(express.static('public'));
. El argumento que se le pasa al métodostatic()
de Express, es unstring
que indica el directorio raíz para los archivos estáticos, el mismo será relativo al directorio desde el cual se sirve la aplicación. Tu estás pasando como argumento el nombre de un archivo. Puedes consultar la documentación para aclarar dudas. Empieza corrigiendo dicho error como primera medida. Saludos.js
, no debes hacerlo así, para eso se usa el métodostatic()
de Express. Debes quitar la línea en la que intentas enviar el archivo. Con eso, y si tienes configuradas bien las rutas, debería funcionar. Saludos