helperhelpershbshandlebars
www.jolugama.com

NodeJs - Http y Express - primeros pasos - servicios y webs dinámicas

Publicado: por

En este tutorial vemos como crear servicios con node de forma nativa y con express, Así como alojamiento de contenido estático y dinámico mediante handlebars.

Puedes ver los ejercicios de node en github.com/jolugama/nodejs-ejemplos

Inicio de proyecto

Creamos el package.json

$ npm init

Http

Para crear un servidor de forma nativa, sin instalar bibliotecas, se usa http.

const http = require('http');

http.createServer((req, res) => {
        // 1. Podemos crear página web con un body que pone hola mundo
        //  res.write('Hola Mundo');

        // 2. Podemos devolver un servicio
        res.writeHead(200, {
            'Content-Type': 'application/json'
        });

        const salida = {
            status: 200,
            data: {
                name: 'Jose',
                ciudad: 'Madrid',
                sexo: 'v'
            }
        }
        res.write(JSON.stringify(salida));

        // siempre hay que teminar despues de usar write. 
        // Si no, se queda bloqueado.
        res.end();
    })
    .listen(4444)
console.log('Escuchando el puerto 4444');

Express

Se define como un framework web minimalista para node. Con unas pocas lineas puedes crear un servicio. la diferencia en cuanto al uso de http de forma nativa de node es grande, ahorrándonos tiempo.

https://www.npmjs.com/package/express

Su instalación es sencilla:

$ npm install express --save

Servicio con respuesta Json

En este ejemplo tenemos 2 path:

  • el primer path lanzamos una html con el body poniendo: 'hola mundo'.
  • el segundo path devolvemos un json.
const express = require('express');
const app = express();

app.get('/datos1', (req, res) => {
    res.send('Hola mundo');
})

app.get('/datos2', (req, res) => {
    const salida = {handlebars
        status: 200,handlebars
        data: {handlebars
            name: 'Jose',handlebars
            ciudad: 'Madrid',handlebars
            sexo: 'v'handlebars
        }handlebars
    }handlebars
    res.send(salida);handlebars
})handlebars
handlebars
console.log('escuchando en el puerto 400handlebars0');
app.listen(4000);

Páginas estáticas

const express = require('express');
const app = express();

app.use(express.static(__dirname+'/public_html'));

console.log('escuchando en el puerto 4000');
app.listen(4000);

Si se accede a http://localhost:4000/ se visualiza el index.html que se aloja en la carpeta public_html. Si hay más páginas, estas deben indicarse junto con su extensión: http://localhost:4000/otra.html

Páginas dinámicas: handlebars

Motor de visualización de Express.js para handlebars.js. Su uso es sencillo y sirve para poder usar los templates que por ejemplo usa angular y angularjs, todo manejado desde node.

https://www.npmjs.com/package/hbs

$ npm install hbs --save

Ejecutamos de nuevo nodemon, esta vez queremos escuchar todas las extensiones hbs, css, html …

$ nodemon nombreDelArchivo -e js,hbs,html,css
const express = require('express');
const app = express();

const hbs = require('hbs');

// Exoress HBS engine
hbs.registerPartials(__dirname + '/views/shared');
app.set('view engine', 'hbs');

// de esta manera importamos todo el contenido de un js
require('./hbs/helpers'); 

// con path / cargamos index.hbs, lo renderizamos, y pasamos los datos name y mydate
app.get('/', (req, res) => {
    res.render('index', {
        name: 'jose luis garcía',
        mydate: new Date().toDateString()

    })
})

app.get('/about', (req, res) => {
    res.render('otra', {
        name: 'Jose Luis García',
        mydate: new Date().toDateString()

    })
})


console.log('escuchando en el puerto 4000');
app.listen(4000);

Del anterior código: require('./hbs/helpers'); Los helpers son datos que podemos pasar a cualquer path, de esta forma el código no se repite.

helpers.js

const hbs = require('hbs');

// helpers
hbs.registerHelper('getCiudad', () => {
    return 'madrid'; 
})

hbs.registerHelper('capitalize', (txt) => {
    return txt.charAt(0).toUpperCase() + txt.slice(1);
})
 
... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.