El acceso a archivos estáticos es muy útil cuando desea que el servidor pueda acceder a su contenido estático para su uso. Para servir archivos estáticos como imágenes, archivos CSS y archivos JavaScript, etc., usamos el middleware incorporado en node.js, es decir, express.static.
Configuración de middleware estático:
- Necesita crear una carpeta y agregar un archivo. Por ejemplo, app.js. Para ejecutar este archivo, debe ejecutar el siguiente comando.
node app.js
- Ahora cree una carpeta cuyo contenido desee servir como estático. Por ejemplo, puede crear una carpeta llamada pública.
- Ahora agregue algo de contenido estático a esta carpeta pública. En este caso, hay una imagen GeeksLogo.png en la carpeta pública.
- Para servir esta carpeta como estática, necesita escribir este middleware en su index.js de la siguiente manera:
app.use(express.static(path.join(__dirname, 'public')))
donde la ruta es el objeto global y __dirname contiene la dirección del directorio actual. Views es la carpeta donde se guardarán todas nuestras páginas web. - Ahora cree un archivo EJS como Demo.ejs y coloque este archivo en la carpeta de vistas.
Nombre de archivo: Demo.ejs
<!DOCTYPE html> <html> <head> <title>Static Middleware Demo</title> </head> <body> <img src="/GeeksLogo.png" width="600" height="600" /> </body> </html>
Nombre de archivo: app.js
const express = require('express')
const path = require('path')
const app = express()
// Static Middleware
app.use(express.static(path.join(__dirname, 'public')))
// View Engine Setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')
app.get('/', function(req, res){
res.render('Demo')
})
app.listen(8080, function(error){
if(error) throw error
console.log("Server created Successfully")
})
Pasos para ejecutar el programa:
- La estructura del proyecto se verá así:
- Asegúrese de tener ‘view engine’ como he usado «ejs» y también instale express usando los siguientes comandos:
npm install ejs
npm install express
- Ejecute el archivo app.js usando el siguiente comando:
node app.js
- Abra el navegador y escriba esta URL:
http://localhost:8080/
- Luego verá la página Demo.ejs como se muestra a continuación:
Entonces, así es como puede enviar contenido estático a nuestro servidor, lo cual es muy útil para servir imágenes, CSS, archivos js, etc. en su proyecto.
Publicación traducida automáticamente
Artículo escrito por gouravhammad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA