Sirviendo archivos est谩ticos con node y Express.js.

    Introducci贸n

    En este art铆culo, vamos a crear una aplicaci贸n simple para servir archivos est谩ticos como archivos HTML, archivos CSS e im谩genes usando N贸d.js. y R谩pido.

    Configuraci贸n del proyecto e instalaci贸n de Express

    Para comenzar, creemos un nuevo proyecto de Node.js a trav茅s del init ordenar en nueva carpeta:

    $ npm init
    

    Complete la informaci贸n solicitada de acuerdo con sus necesidades o simplemente configure los valores predeterminados dejando todas las l铆neas en blanco.

    Ahora podemos instalar el marco Express ejecutando:

    $ npm install --save express
    

    隆Estamos listos, comenzamos a codificar!

    Entrega de archivos con Express

    Hay dos formas de entregar archivos est谩ticos con Express:

    • Sirviendo un solo archivo configurando una ruta al recurso
    • Configure un directorio p煤blico donde todos los archivos sean accesibles

    Repasaremos cada uno de estos m茅todos en las pr贸ximas dos secciones.

    Entrega de un solo archivo

    Considere una situaci贸n en la que queremos crear una p谩gina de destino simple que contenga 3 documentos HTML (home.html, contact.htmly about.html), y queremos entregar estos archivos al usuario.

    Suponemos que el usuario visita la ruta original (http://localhost:3000). En ese caso, queremos conocer el home.html archivo. Del mismo modo, si el usuario visita el /contacts o /about caminos, queremos conocer el contact.html y about.html archivos, respectivamente.

    Para implementar esto, vamos a landing-page.js Archivo e importaci贸n expr茅s de la biblioteca:

    const express = require('express');
    

    Luego crearemos la aplicaci贸n Express:

    const app = express();
    

    Luego definamos el puerto en el que se ejecutar谩 nuestro servidor, que usaremos m谩s adelante cuando realmente ejecutemos el servidor:

    const port = 3000;
    

    Dado que estamos enviando un solo archivo, no enviaremos enlaces a ning煤n archivo CSS o script dentro de esos archivos HTML a menos que est茅n alojados en una ubicaci贸n diferente, como CDN, por ejemplo.

    Nos ocuparemos de la entrega de estos archivos juntos en la siguiente secci贸n, hasta ahora, vamos a ce帽irnos a tres archivos HTML muy simples y b谩sicos:

    baile.html:

    <body>
        <h1>Home</h1>
    </body>
    

    contact.html:

    <body>
        <h1>Contact</h1>
    </body>
    

    about.html:

    <body>
        <h1>About Us</h1>
    </body>
    

    Ahora, volvamos y lo nuestro landing-page.js archivo para enviar archivos que correspondan a las rutas que visita el usuario, como el home.html archivo cuando el usuario visita la ruta original.

    Podemos res.sendFile() m茅todo de entrega de archivos dentro de una respuesta:

    app.get("https://Pharos.sh.com/", (req, res) => {
        res.sendFile('./landing-page/home.html', { root: __dirname });
    });
    

    Por motivos de seguridad, es mejor utilizar una ruta est谩tica para res.sendFile(), como se muestra arriba. Si alguna vez toma informaci贸n del usuario que afecta la ruta del archivo, tenga mucho cuidado de evitar que el usuario pueda manipular la ruta del archivo y as铆 permitirle recuperar archivos privados.

    En nuestro caso, estamos arreglando la ra铆z de donde proviene la ruta relativa root par谩metro con el m茅todo. Tenga en cuenta que hemos pasado __dirname, una variable global Node.js en la ruta del archivo que se est谩 ejecutando actualmente.

    Podemos usar el mismo m茅todo para servir nuestros otros archivos, contact.html y about.html, adem谩s:

    app.get('/about', (req, res) => {
        res.sendFile('./landing-page/about.html', { root: __dirname });
    });
    
    app.get('/contact', (req, res) => {
        res.sendFile('./landing-page/contact.html', { root: __dirname });
    });
    

    Ahora que nuestra aplicaci贸n est谩 lista, iniciemos el servidor y escuchemos el puerto que configuramos anteriormente:

    app.listen(port, () => console.log(`listening on port ${port}!`));
    

    Y ejecuta nuestra aplicaci贸n ejecutando:

    $ node landing-page.js
    

    Abra su navegador y visite cualquiera de las rutas asignadas y deber铆a encontrar los archivos HTML:

     

    Establecer un directorio p煤blico

    El segundo m茅todo de servir archivos est谩ticos es configurar un directorio p煤blico. A diferencia de enviar un archivo a trav茅s de la respuesta HTTP, donde solo se puede entregar un archivo, todos los archivos dentro de nuestra carpeta especificada estar谩n disponibles para los usuarios.

    Creamos otro archivo, llamado server.jsy organice la carpeta con nuestros tres documentos HTML para que sea un directorio p煤blico:

    const express = require('express');
    const app = express();
    const port = 3000;
    
    // Setting up the public directory
    app.use(express.static('landing-page'));
    
    app.listen(port, () => console.log(`listening on port ${port}!`));
    

    El directorio p煤blico es tan f谩cil como app.use() y express.static() m茅todos.

    Ejecutemos nuestra aplicaci贸n nuevamente y verifiquemos que funciona:

    $ node server.js
    

    Abra su navegador y visite cualquiera de las rutas asignadas y deber铆a saludar a los archivos HTML, como la 煤ltima vez. Tenga en cuenta que la ruta ra铆z no se asigna a la home.html archivo, pero en lugar del http://localhost:3000/home.html:

     

    Adem谩s, puede establecer un prefijo en la ruta para acceder a su directorio p煤blico pasando el prefijo como primer par谩metro:

    app.use('/public', express.static('landing-page'));
    

    Ahora los archivos se encuentran en otra ruta. Por ejemplo, home.html ahora ubicado en http://localhost:3000/public/home.html.

    A diferencia del primer m茅todo que aciertas /about y about.html servicio, tenga en cuenta que debe utilizar el nombre de archivo completo para recuperar el archivo aqu铆 – /about.html, por ejemplo.

    Esto tambi茅n nos permite alojar otros archivos como CSS, archivos JavaScript e im谩genes.

    Por ejemplo, si hay una imagen de gato en su carpeta p煤blica llamada cat.png, el servidor lo servir谩 http://localhost:3000/public/cat.png dependiendo de su configuraci贸n y puede llamarlo f谩cilmente a trav茅s de una p谩gina HTML y mostrarlo.

    Si planea alojar una p谩gina de destino como esta, probablemente podr铆a ser una combinaci贸n de los dos m茅todos que discutimos anteriormente. Puede utilizar la respuesta para enviar un archivo HTML y un directorio p煤blico para alojar otros activos est谩ticos, como archivos CSS, scripts JS e im谩genes.

    Conclusi贸n

    El c贸digo fuente de este proyecto est谩 disponible en GitHub como siempre. Use esto para comparar su c贸digo si alguna vez se qued贸 atascado en el tutorial.

    隆Feliz codificaci贸n!

    .

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *