Te has suscrito correctamente a Omniscientia
¡Excelente! A continuación, completa el pago para obtener acceso completo a Omniscientia
¡Bienvenid@! Has iniciado sesión correctamente.
¡Perfecto! Tu cuenta está completamente activada, ahora tienes acceso a todo el contenido.
Tu información de facturación está actualizada.
Artículo añadido a la lista de artículos pendientes.
Algo ha fallado al actualizar tu información de facturación.
Artículo borrado de la lista de artículos pendientes.
Ha ocurrido un error al añadir el artículo a la lista de artículos pendientes.
El artículo que intentas añadir ya está en tu lista.
Tu primera aplicación web con Node.js parte 2

Tu primera aplicación web con Node.js parte 2

Como crear tu primera aplicación web con Node.js parte 2

Ivan Gil
Ivan Gil
4 minutos de lectura
Dificultad : Medio | Con un poco de maña

Bienvenid@ a la segunda parte de ¡¡COMO DOMINAR EL MUNDO CON UN ROBOT 😈!!, perdón que eso es para más adelante 😅. Hoy veremos COMO CREAR TU PRIMERA APLICACIÓN WEB CON NODE.JS 🤓 y si te acabas de incorporar, aquí te dejo el enlace a la primera parte 😁👍.

Si sigues todos los pasos que te indico, vas a poder hacerlo, pero sí tienes algunas nociones de programación lo verás todo mucho más claro. Si quieres ir al grano pasa al apartado Resumen rápido de todo lo realizado donde me salto las explicaciones.

¿Qué haremos?

Crearemos un servidor web y generaremos una web para el navegador.

Cuando digo navegador me refiero a:

  • Google Chrome
  • Edge Chromium
  • Internet explorer 😨, ¡¡¡POR FAVOR NO USES INTERNET EXPLORER 😱!!! si tu ordenador lo tiene instalado ya va siendo hora de cambiarlo 🤨... (el ordenador)
  • Firefox
  • Brave browser
  • Opera
  • ...

¿Cómo lo haremos?

Para llevar a cabo esta misión me ayudaré del Framework Koa.js.

Si no sabes que es un framework o marco de trabajo pronto publicaré un artículo explicándolo en profundidad y nombraré los más importantes y/o populares, pero por ahora te diré que es un código que sirve como punto de partida para ganar tiempo, porque como se suele decir... No se trata de reinventar la rueda.

Gente asintiendo con la cabeza

¿Por qué usar Koa.js? Lo malo y lo bueno

He elegido Koa.js porque es sencillo, ligero, robusto y tiene un montón de ventajas como la facilidad para manejar errores, permite usar nuevas características como las promesas (ya hablaremos de esto otro día) y su rendimiento respecto al resto es más rápido, precisamente por su sencillez.

Astronauta aplaudiendo

Lo malo es que su comunidad es muy pequeña 🙄 en comparación al resto y no siempre hay tutoriales y documentación suficiente, pero eso no implica que no sea genial y precisamente es un buen motivo para hablar de él en este blog, así lo documentamos 😎

Empecemos a programar

Lo primero que voy a hacer será crear el archivo principal.

El archivo principal

En el anterior artículo creamos el archivo app.js como base, así que voy a abrirlo y pondré este código en su interior:

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hola mundo!';
});

app.listen(3000);

Lo que hago en primer lugar es llamar a Koa.js[1] (porque lo vamos a necesitar), después creo una variable llamada app que será nuestra aplicación y le digo a Node que app es una nueva aplicación que usa Koa (new Koa())

Ahora simplemente indicamos a nuestra app que cuando se la llame nos tiene que devolver un contenido que será Hola mundo! (esta vez directamente sobre la web y no por consola).


  1. Con el comando require solicitamos archivos, pero no es necesario ni indicar la ruta si se trata de un módulo NPM (npm install) ni tampoco la extensión del archivo .js/.hbs/.... ↩︎

Llamamos/ejecutamos nuestra app

Escribo en la consola (NO LO HAGAS TODAVÍA, SI LO HACES AHORA, TE SALDRÁ UN ERROR, ¡SIGUE LEYENDO!) node app.js y accedo a la URL (dirección web) localhost:3000 (localhost es mi propio equipo y :3000 es el puerto por donde sale a internet, esto se lo he indicado con app.listen(3000), se puede cambiar el puerto por otro que te guste más pero cuidado que otras aplicaciones usan otros puertos y si ya está en uso puede darte errores)

Si intento ejecutar node app.js recibiré un error, esto es porque estoy llamando a una aplicación que usa Koa pero en ningún momento la he instalado 😅.

Vamos a solucionarlo 😋.

Instalando dependencias/módulos necesarios

Lo primero que haré será abrir la consola en la raíz (el directorio principal) de la ruta de mi aplicación, en mi caso W:\Blog\proyecto porque mi archivo estaba en W:\Blog\proyecto\app.js

Ahora que ya estoy en la carpeta del proyecto y desde la consola escribo:
npm install koa
Esto lo que hará será instalar koa en mi aplicación (si lo haces verás que en tu carpeta de proyecto aparece una nueva carpeta que se llama node_modules, ahí es donde se guardan las librerías y los frameworks)

También puedo añadir el comando -save o --s para hacer que se instale, pero además se guarde en la app, de forma que si alguna vez borro la carpeta node_modules la app sabrá que le hace falta instalar koa.

Quedaría algo así:
npm install --save koa

Resumen rápido de todo lo realizado

  1. Creamos el fichero base llamado app.js con el siguiente contenido:
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hola mundo!';
});

app.listen(3000);

2. Instalamos Koa.js con el comando:

npm install koa

3. Ejecutamos nuestra aplicación

node app.js

4. Navegamos hasta nuestra aplicación

Imagen con ruta http en localhost

Resultado final

Resultado final de aplicación web de artículo omniscientia.es
Imagen que muestra el resultado de la aplicación web que hemos creado

Ahora ya tenemos una estructura básica para la web, los siguientes artículos pueden incluir generar diferentes rutas para la web (conócenos, contacto, blog, ...), servir archivos estáticos (imágenes, videos, podcast, …), incluir un formulario de contacto, dar estilo y color a cada elemento de la web, agregar menús y animaciones …

¿Qué te parece?  ¿Por donde te gustaría que continuásemos la aplicación web? Puedes dejar tu comentario un poco más abajo y 🙄 prometido que los miraré.

Gente asintiendo