Express es una infraestructura de aplicaciones web Node.js mínima y flexible que proporciona un conjunto sólido de características para las aplicaciones web y móviles.
Instalación
Suponiendo que ya ha instalado Node.js, cree un directorio para que contenga la aplicación y conviértalo en el directorio de trabajo.
$ mkdir myapp
$ cd myapp
Utilice el mandato
npm init
para crear un archivo package.json
para la aplicación. Para obtener más información sobre cómo funciona package.json
, consulte Specifics of npm’s package.json handling.
$ npm init
Este mandato solicita varios elementos como, por ejemplo, el nombre y la versión de la aplicación. Por ahora, sólo tiene que pulsar INTRO para aceptar los valores predeterminados para la mayoría de ellos, con la siguiente excepción:
entry point: (index.js)
Especifique
app.js
o el nombre que desee para el archivo principal. Si desea que sea index.js
, pulse INTRO para aceptar el nombre de archivo predeterminado recomendado.
A continuación, instale Express en el directorio
app
y guárdelo en la lista de dependencias. Por ejemplo:
$ npm install express --save
Para instalar Express temporalmente y no añadirlo a la lista de dependencias, omita la opción
--save
:$ npm install express
Ejemplo Hello world
En primer lugar, cree un directorio denominado
myapp
, cámbielo y ejecute npm init
. A continuación, instale express
como una dependencia, según se describe en la guía de instalación.
En el directorio
myapp
, cree un archivo denominado app.js
y añada el código siguiente:
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
La aplicación inicia un servidor y escucha las conexiones en el puerto 3000. La aplicación responde con “Hello World!” para las solicitudes al URL raíz (
/
) o a la ruta raíz. Para cada vía de acceso diferente, responderá con un error 404 Not Found.
Ejecute la aplicación con el siguiente mandato:
$ node app.js
A continuación, cargue http://localhost:3000/ en un navegador para ver la salida.
Generador de aplicaciones Express
Utilice la herramienta de generador de aplicaciones,
express
, para crear rápidamente un esqueleto de aplicación.
Instale
express
con el siguiente mandato:
$ npm install express-generator -g
Muestre las opciones de mandato con la opción
-h
:
$ express -h
Usage: express [options][dir]
Options:
-h, --help output usage information
--version output the version number
-e, --ejs add ejs engine support
--hbs add handlebars engine support
--pug add pug engine support
-H, --hogan add hogan.js engine support
--no-view generate without view engine
-v, --view add view support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
-c, --css add stylesheet support (less|stylus|compass|sass) (defaults to plain css)
--git add .gitignore
-f, --force force on non-empty directory
Por ejemplo, el código siguiente crea una aplicación Express denominada myapp. La aplicación será creada en una carpeta llamada myapp en el directorio de trabajo actual y el motor de vistas será asignado a Pug:
$ express --view=pug myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.pug
create : myapp/views/layout.pug
create : myapp/views/error.pug
create : myapp/bin
create : myapp/bin/www
A continuación, instale las dependencias:
$ cd myapp
$ npm install
En MacOS o Linux, ejecute la aplicación con este mandato:
$ DEBUG=myapp:* npm start
En Windows, utilice este mandato:
> set DEBUG=myapp:* & npm start
A continuación, cargue
http://localhost:3000/
en el navegador para acceder a la aplicación.
La aplicación generada tiene la siguiente estructura de directorios:
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
7 directories, 9 files
La estructura de la aplicación creada por el generador es sólo una de las muchas formas de estructurar las aplicaciones Express. Puede utilizar esta estructura o modificarla según sus necesidades.
Direccionamiento básico
El direccionamiento hace referencia a la determinación de cómo responde una aplicación a una solicitud de cliente en un determinado punto final, que es un URI (o una vía de acceso) y un método de solicitud HTTP específico (GET, POST, etc.).
Cada ruta puede tener una o varias funciones de manejador, que se excluyen cuando se correlaciona la ruta.
La definición de ruta tiene la siguiente estructura:
app.METHOD(PATH, HANDLER)
Donde:
app
es una instancia deexpress
.METHOD
es un método de solicitud HTTP.PATH
es una vía de acceso en el servidor.HANDLER
es la función que se ejecuta cuando se correlaciona la ruta.
En esta guía de aprendizaje se supone que se crea una instancia de
express
denominada app
y que el servidor está en ejecución. Si no está familiarizado con la creación y el inicio de una aplicación, consulte el Ejemplo Hello world.
El siguiente ejemplo ilustra la definición de rutas simples.
Responda con
Hello World!
en la página inicial:
app.get('/', function (req, res) {
res.send('Hello World!');
});
Responda a la solicitud POST en la ruta raíz (
/
), la página de inicio de la aplicación:
app.post('/', function (req, res) {
res.send('Got a POST request');
});
Responda a una solicitud PUT en la ruta
/user
:
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user');
});
Responda a una solicitud DELETE en la ruta
/user
:
app.delete('/user', function (req, res) {
res.send('Got a DELETE request at /user');
});
Servicio de archivos estáticos en Express
Para el servicio de archivos estáticos como, por ejemplo, imágenes, archivos CSS y archivos JavaScript, utilice la función de middleware incorporado
express.static
de Express.
Pase el nombre del directorio que contiene los activos estáticos a la función de middleware
express.static
para empezar directamente el servicio de los archivos. Por ejemplo, utilice el siguiente código para el servicio de imágenes, archivos CSS y archivos JavaScript en un directorio denominado public
:
app.use(express.static('public'));
Ahora, puede cargar los archivos que hay en el directorio
public
:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
Express busca los archivos relativos al directorio estático, por lo que el nombre del directorio estático no forma parte del URL.
Para utilizar varios directorios de activos estáticos, invoque la función de middleware
express.static
varias veces:
app.use(express.static('public'));
app.use(express.static('files'));
Express busca los archivos en el orden en el que se definen los directorios estáticos con la función de middleware
express.static
.
Para crear un prefijo de vía de acceso virtual (donde la vía de acceso no existe realmente en el sistema de archivos) para los archivos a los que da servicio la función
express.static
, especifique una vía de acceso de montaje para el directorio estático, como se muestra a continuación:
app.use('/static', express.static('public'));
Ahora, puede cargar los archivos que hay en el directorio
public
desde el prefijo de vía de acceso /static
.
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
No obstante, la vía de acceso que proporciona a la función
express.static
es relativa al directorio desde donde inicia el proceso node
. Si ejecuta la aplicación Express desde cualquier otro directorio, es más seguro utilizar la vía de acceso absoluta del directorio al que desea dar servicio:
app.use('/static', express.static(__dirname + '/public'));
Fuente:
https://expressjs.com/es/