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.
¿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.
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).
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
- 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
Resultado final
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é.
