Instala los módulos express
, ejs
y express-ejs-layouts
de Node. Desde la terminal teclea:
cd
sudo npm install express
sudo npm install ejs
sudo npm install express-ejs-layouts
Crea una nueva aplicación web de Express llamada hola
. Teclea en la terminal:
~/node_modules/express/bin/express -se hola
cd hola
sudo npm install
Corre el servidor de la aplicación web y verifica que se pueda utilizar correctamente. En la terminal teclea:
node app.js
Visita la siguiente liga en tu navegador:
La salida en el navegador debe ser algo así:
Welcome to Express
Abre en un editor el archivo hola/app.js
y realiza las modificaciones y/o añadiduras que se indican a continuación:
/** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path'); var layouts = require('express-ejs-layouts'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(express.cookieParser('your secret here')); app.use(express.session()); app.use(layouts); app.use(app.router); app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } app.get('/', routes.index); app.get('/users', user.list); app.get('/hola/:nombre?', function (req, res) { var nombre = req.params.nombre || 'Mundo'; res.render('saluda', { 'nombre': nombre }); }); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
Crea el archivo hola/views/layout.ejs
con el contenido que se muestra a continuación:
<!DOCTYPE html> <!-- File: hola/views/layout.ejs --> <html lang="es"> <head> <meta charset="utf-8" /> <title>Hola</title> <link rel="stylesheet" href="/stylesheets/estilos.css"/> </head> <body> <%- body %> <hr/> <footer> Desarrollo de aplicaciones distibuidas </footer> </body> </html>
Crea también el archivo hola/views/saluda.ejs
:
<!-- File: hola/views/saluda.ejs --> <h1>Saludos</h1> <p> ¡Hola <%= nombre %>! </p>
Así mismo, crea el siguiente archivo, colocándolo en el directorio indicado dentro del comentario correspondiente:
/* File: hola/public/stylesheets/estilos.css */ body { background: #FFFFFF; color: #000080; font-family: sans-serif; font-size: medium; margin: 20px; } hr { border: 0; color: #B0C4DE; background-color: #B0C4DE; height: 1px; } table { border-collapse: collapse; border: 1px solid #000000; padding: 0px; margin-bottom: 10px; color: #000000; background: #E6E6FA; } td { border: 1px solid #000000; padding: 10px; text-align: center; } th { border: 1px solid #000000; padding: 10px; color: #008080; background: #B0E0E6; } li { color: #AAAAAA; } span { color: #094141; } footer { font-size: 70%; color: #B0C4DE; text-align: center; }
Desde la terminal detén el servidor de la aplicación web y córrelo nuevamente:
node app.js
Visita las siguientes ligas en tu navegador para verificar que funcione correctamente: