Aprende las distintas maneras de enviar archivos estáticos (Html, Css, Js, Images, .Txt) al navegador (cliente) desde Node.js con Express.js

[jfdesousa7]

En el día de hoy aprenderemos las distintas maneras de enviar archivos estáticos (html, css, images, .txt, etc...) al frontend usando como lenguaje de programación Node.js usando el framework Express para ello. aprenderemos el método sendFile, static y aprenderemos a usar los motores de plantillas (Ejs)

NODE.js

Empezaremos creando una carpeta en nuestro escritorio node-express-sendfile/ y activando la consola de nuestro editor de código favorito, e instalaremos las siguientes dependencias:

npm init --yes

npm i express

SENDFILE

index.js

const express = require('express')
const app = express()
// SENDFILE
app.get('/', (req, res) => {
    console.log(__dirname) // constante que tiene la ruta absoluta de nuestra app
    res.sendFile(__dirname + '/index.html')
})
app.get('/main.css', (req, res) => {
    res.sendFile(__dirname + '/main.css')
})
app.listen(3000, () => {
    console.log('Server on port 3000')
})

STATIC

Creamos una carpeta public/, y todo lo que este dentro de la carpeta será accesible desde nuestro navegador

index.js

const express = require('express')
const app = express()
// SENDFILE
app.get('/', (req, res) => {
    console.log(__dirname) // constante que tiene la ruta absoluta de nuestra app
    res.sendFile(__dirname + '/index.html')
})
app.get('/main.css', (req, res) => {
    res.sendFile(__dirname + '/main.css')
})
// STATIC FILES
app.use(express.static('public'))
app.listen(3000, () => {
    console.log('Server on port 3000')
})

*** MOTORES DE PLANTILLAS

- EJS -

Instalamos el siguiente módulo, y creamos una carpeta views/ donde colocaremos todos nuestros archivos a renderizar

npm i ejs

index.js

const express = require('express')
const app = express()
// SENDFILE
app.get('/', (req, res) => {
    console.log(__dirname) // constante que tiene la ruta absoluta de nuestra app
    res.sendFile(__dirname + '/index.html')
})
app.get('/main.css', (req, res) => {
    res.sendFile(__dirname + '/main.css')
})
// EJS 
app.set('view engine', 'ejs')
app.get('/contact', (req, res) => {
    res.render('contact')
}
)
// STATIC FILES
app.use(express.static('public'))
app.listen(3000, () => {
    console.log('Server on port 3000')
})

La ventaja de usar motores de plantillas es poder partir el documento en varias partes para ser reutilizadas, crearemos una carpeta dentro de views/ llamada partials/

views/contact.ejs

<%- include("partials/header") -%>
    <h1>Contacto</h1>
<%- include("partials/footer") -%>

Existen varios motores de plantillas como Handlebars, pub entre otros. siéntete libre de probar el que más te guste.

Y con esa amigos llegamos al final del tutorial, espero que lo hayan disfrutado y hasta la próxima!

Visita mi sitio web oficial para presupuestos y mucho más

TupaginaOnline.net

Comments

[entropia]

¡Felicitaciones!

---

---

Estás participando para optar a la mención especial que se efectuará el domingo 21 de febrero del 2021 a las 8:00 pm (hora de Venezuela), gracias a la cual el autor del artículo seleccionado recibirá la cantidad de 1 HIVE transferida a su cuenta.

¡También has recibido 1 ENTROKEN! El token del PROYECTO ENTROPÍA impulsado por la plataforma Steem-Engine.

---

1. Invierte en el PROYECTO ENTROPÍA y recibe ganancias semanalmente. Entra aquí para más información.

2. Contáctanos en Discord: https://discord.gg/hkCjFeb

3. Suscríbete a nuestra COMUNIDAD y apoya al trail de @Entropia y así podrás ganar recompensas de curación de forma automática. Entra aquí para más información sobre nuestro trail.

4. Creación de cuentas nuevas de Hive aquí.

5. Visita nuestro canal de Youtube.

Atentamente

El equipo de curación del PROYECTO ENTROPÍA