1

Tengo como objetivo correr un archivo de javascript en el lado del browser pero para ello primero tengo que cargarlo, el problema es que no funciona con solo referenciarlo en el archivo html, y me encuentro tratando de encontrar formas de cargar ese archivo para que no haya la necesidad de devolver datos del html al servidor para procesar cosas que podrian ser procesadas del lado del browser.

Para html estoy usando ejs, y en java estoy usando express.

var express = require('express')
var app = express();
app.use(express.static('./public/confirm.js'));
app.get('/ide', (req, res) => {
    res.render('identification.ejs')
    res.sendFile('./public/confirm.js')
    console.log(req.url)
})
app.listen(3000, console.log('Listening'))

Ahora el archivo html:

<% 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="../public/confirm.js">

El archivo que estoy intentando cargar esta en una carpeta public como pueden ver, se que tal vez la respuesta sea simple pero no encuentro forma de resolver agradeceria mucho si me ayudan.

4
  • Esta línea: 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étodo static() de Express, es un string 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 Commented el 9 jun. 2019 a las 20:31
  • Hola, he hecho ciertos cambios a mi codigo incluyendo lo que haz mensionado, pero de igual forma sigo teniendo problemas con el codigo, resulta que me encuentro incapaz de cargar el archivo de js que se supone que deberia acompanar a el archivo ejs, no me sale ningun error en la terminal pero en la consola de mi browser me informa que no pudo acceder a mi archivo de js mostandome un 404, revise la direccion de mi archivo y no hay razon por la que no deberia encontrar mi archivo, otra cosa y es que cuando acomode bien los path de res.sendFile y express.static, me empezo a salir un nuevo error: Commented el 10 jun. 2019 a las 0:31
  • Que decia "Can't set headers after they are sent" al ver esto decidi cambiar el orden dentro de mi res.get('/ide') poniendo primero res.senFile.... y abajo de eso res.render... cambiando el orden de los dos y dejandome sin errores en mi terminal pero aun asi el browser no logra obtener de manera efectiva el archivo de js Commented el 10 jun. 2019 a las 0:33
  • El siguiente error de tu código es la forma en que pretendes enviar el archivo .js, no debes hacerlo así, para eso se usa el método static() 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 Commented el 10 jun. 2019 a las 11:56

1 respuesta 1

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.