Definición de rutas con Express JS para su aplicación
Rutas — Antes de comenzar a escribir código para su aplicación, tomarse un tiempo para pensar en su arquitectura básica ayuda a darle una buena estructura para trabajar.
En este artículo, exploramos cómo configurar rutas simples. Cada ruta definida cargará una nueva página cuando se acceda como una URL en el navegador.
La mayoría de los desarrolladores front-end comenzarán a escribir código para su aplicación desde el navegador. Pero ayuda saber cómo configurar un back-end simple para manejar el enrutamiento de la página y también permitir que el navegador realice solicitudes como llamadas a la API.
Antes de comenzar, asegúrese de haber instalado Node JS para el sistema operativo de su computadora. Utilice el siguiente mensaje para comprobar si ya está instalado o no.
$ node -v
Primero lo primero…
configure un directorio de proyecto. Estoy usando la línea de comandos de Linux, así que puedo usar el siguiente comando para hacer esto.
$ mkdir project-name
No olvide cambiar el directorio a su proyecto con $ cd project-name
. Luego, inicialice su proyecto con npm, que es el administrador de paquetes para el nodo e instalará dependencias del proyecto como expressjs y scripts de configuración para probar en el navegador (esto se describe más adelante).
$ cd project-name $ npm init //I accepted all the default values by pressing enter
Después de inicializar su proyecto con npm, verá que aparece un archivo package.json
en el directorio de su proyecto. Ahora instale express con el siguiente comando. Una vez instalado, debería ver que el paquete aparece bajo dependencias en el archivo package.json
.
$ npm install express --save
Cree un archivo llamado index.js
en el directorio de su proyecto y agregue el siguiente código.
const express = require('express') const app = express() app.get('/', function (req, res) { res.send('Home Page') }) app.get('/page1', function (req, res) { res.send('page1') }) app.listen(3000)
Arriba creamos un objeto de aplicación que usa el marco express js. Usamos el método get()
disponible en el objeto para definir una ruta y enviar una respuesta al navegador que solicitó la página. Definimos dos rutas /
para la página de inicio y /page1
para cualquier otra ruta que quieras definir.
Para finalizar…
Finalmente, el método listen()
en la aplicación le permitirá acceder a las rutas definidas desde la barra de direcciones del navegador. Pero primero debe ejecutar el archivo index.js
de esta manera.
$ node index.js
O en su archivo package.json
, puede agregar el siguiente script y escribir npm start
en su símbolo del sistema para ejecutar el script.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
Acceda a la página de rutas que definió desde el navegador con lo siguiente.
http://localhost:3000/ http://localhost:3000/page1