[vc_row el_class=”blog-info”][vc_column][vc_single_image source=”featured_image” img_size=”full” style=”vc_box_rounded”][vc_empty_space height=”40px”][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text el_class=”font-weight-bold”]

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.

[/vc_column_text][vc_empty_space height=”40px”][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/6″][/vc_column_inner][vc_column_inner width=”2/3″][vc_column_text]

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

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row el_class=”social-info”][vc_column width=”1/6″][/vc_column][vc_column width=”2/3″][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text][social_share_button themes=’theme1′][/vc_column_text][/vc_column_inner][vc_column_inner el_class=”youtube-inner-col” width=”1/2″][vc_column_text][likebtn theme=”youtube” lang=”auto” show_like_label=”0″ white_label=”1″ alignment=”right”][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_row_inner el_class=”social-info-inner”][vc_column_inner width=”1/4″][vc_single_image image=”921″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text]

Diego Pacheco

Ingeniero en Sitemas, MBA (Babson College). Desarrollador PHP/Java/JavaScript. Fundador & CEO de EpicStudio. Entusiasta de las tecnologías web (JavaScript, Vue, Laravel, AWS, Docker) Viajes, Negocios, Surf y Growth.[/vc_column_text][asvc_list_item icon_fontawesome=”fa fa-calendar-o” icon_size=”14px”]Programar una reunión[/asvc_list_item][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/6″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Rutas con Express JS para su aplicación

Definición de rutas con Express JS para su aplicación

Primero lo primero…

Para finalizar…

Diego Pacheco

Recent Post