DEV Community: David Ruiz

Cómo crear un servidor web en tu proyecto vanilla javascript

David Ruiz — Tue, 28 Nov 2023 18:17:14 +0000

Para crear un servidor web en tu proyecto vanilla Javascript, te recomiendo seguir los siguientes pasos:

1. Inicializa el proyecto.

Abre un terminal en la carpeta donde estás trabajando en tu proyecto y escribe el siguiente comando:

npm init -y

Este comando va a inicializar un nuevo proyecto y crear un archivo package.json con valores predeterminados:

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Si deseas personalizar estos valores deberás escribir el comando sin el -y al final, es decir quedaría así: npm init

Nota: para poder ejecutar el comando npm, debes tener instalado node primero en tu computador. Si no lo tienes, o no estas seguro de cómo saber si lo tienes instalado, acá te explico instalarlo.

2. Istala el paquete `serve` de `npm`

Para hacer esto, en el terminal escribe el siguiente comando:

npm install --global serve

Para ver más detalles sobre el paquete serve en npm haz clic aquí

3. Configura un script para ejecutar el comando

Ve a tu archivo package.json y agrega la siguiente línea "start": "serve src/ -s" en el objeto scripts:

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.html",  // La página que se va a mostrar
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "serve src/ -s" // La línea que tienes que agregar
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

También podrás ver que modificamos la línea donde se especifica desde dónde se va a lanzar la página. En el ejemplo el archivo principal está alojado en dentro de la carpeta SRC y tiene el nombre index.html (este archivo debe existir en tu proyecto)

Listo, con esto puedes ir a tu consola y ejecutar el servidor con el siguiente comando

npm start

Con esto se inicializará el servidor generalmente en el puerto 3000 si no se encuentra ocupado. Podrás ver el servidor funcionando si te sale algo parecido a la siguiente captura, en tu terminal:

Para acceder a la página, solamente tienes que ir a la dirección que te indica http://localhost:3000 si quieres verla de forma local o http://172.18.48.1:3000 si quieres vela dentro de tu red.

Y si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻

Cómo instalar Node en tu computador

David Ruiz — Tue, 28 Nov 2023 16:34:28 +0000

Antes de proceder a instalar node en tu computador, una buena idea es verificar si ya lo tienes instalado.

Para verificar esto, abre una terminal en tu computador y escribe el siguiente comando:

node -v

Esto te va arrojar la versión actual de node que tengas instalado. Una posible respuesta sería algo así: v20.10.0.

Si no lo tienes instalado, puedes descargar el instalador desde acá. Vas a encontrar una página parecida a esta captura:

Como puedes ver hay dos versiones. La LTS y la Current. Te recomiendo descargar la versión LTS (Long Term Support) que es la versión estable, mientras que la Current puede fallar en ciertas circunstancias.

Ya en la página, simplemente elige tu sistema operativo para iniciar la descarga. Ejecuta el instalador descargado y dale todo a siguiente hasta el final. Y con eso ya estará instalado.

Si vuelves a ejecutar el comando node -v ya deberías ver la versión.

Nota: Algunas veces es necesario reiniciar el computador para ver completar la instalación, así que si después de ejecutar el comando aún no ves la versión, reinicia tu equipo.

Y si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻

Cómo instalar JEST en un proyecto con ECMAScript Modules (import/export)

David Ruiz — Wed, 15 Nov 2023 17:09:37 +0000

Para instalar Jest en tu proyecto, basado en ESM (ECMA Script Modules), es decir usando import/export como método para importar y exportar módulos, debemos hacer lo siguiente:

1. Instalación de Jest y dependencias

Ejecuta el siguiente comando en tu terminal para instalar Jest y sus dependencias de desarrollo:

npm install --save-dev jest

Este comando instala las dependencias necesarias en la carpeta node_modules, y crea los archivos package-lock.json y package.json. El archivo principal con el que trabajaremos es package.json.

2. Configuración de scripts en el `package.json`

Dentro del archivo package.json verás que se ha instalado ya la dependencia de Jest:

{
  "devDependencies": {
    "jest": "^29.7.0"
  }
}

Dentro de este archivo agregaremos un objeto extra, el mismo que nos permitirá ejecutar el comando test en el terminal:

"scripts": {
  "test": "jest --coverage"
},

Este script habilita la ejecución del comando npm test, que a su vez ejecuta Jest con la opción --coverage para generar informes de cobertura.

El archivo completo debería quedar de la siguiente forma:

{
  "devDependencies": {
    "jest": "^29.7.0"
  },
  "scripts": {
    "test": "jest --coverage"
  }
}

3. Configuración de Babel

Instala la dependencia babel-jest con el siguiente comando:

npm install --save-dev babel-jest

babel-jest es un adaptador que permite a Jest trabajar con Babel para la transformación de código. Jest utiliza transformadores para entender y ejecutar código que puede no ser nativo de Node.js, como el código escrito en ECMAScript 6 (ES6) o superior.

Luego, agrega la siguiente configuración al objeto "jest" dentro de el archivo package.json para indicar a Jest que utilice Babel para transformar los archivos con extensiones .js y .jsx:

"jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }

El archivo package.json de tener la siguiente estructura:

{
  "devDependencies": {
    "babel-jest": "^29.7.0",
    "jest": "^29.7.0"
  },
  "scripts": {
    "test": "jest --coverage"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

4. Instalación de Presets de Babel

Ejecuta el siguiente comando para instalar el preset de Babel para entornos de desarrollo:

npm install @babel/preset-env --save-dev

Finalmente agrega un nuevo archivo llamado babel.config.json en la raíz del proyecto con el siguiente contenido:

{
  "presets": ["@babel/preset-env"]
}

Listo, esta es la configuración necesaria para trabajar con Jest en tu proyecto basado en ESM. El siguiente paso sería crear tus tests. Si aún no sabes como crear uno, te recomiendo este post donde te enseño a crear tu primer test con Jest.

Y si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻

Introducción a Jest y su importancia en el desarrollo de software

David Ruiz — Thu, 05 Oct 2023 00:23:05 +0000

Jest es una de las bibliotecas de testing más populares y ampliamente utilizadas en el mundo del desarrollo de software, especialmente en el ecosistema de JavaScript. Fue desarrollada por Facebook y es mantenida por un equipo de ingenieros de Facebook y la comunidad de código abierto. Jest se destaca por su simplicidad, velocidad y capacidad para realizar pruebas tanto en aplicaciones de front-end como en back-end.

A continuación, exploraremos la importancia de Jest en el desarrollo de software y sus características clave:

👉 Automatización de Pruebas:

Jest permite automatizar el proceso de prueba de código. Esto significa que puedes escribir pruebas una vez y ejecutarlas repetidamente, lo que ahorra tiempo y reduce la posibilidad de errores humanos al probar manualmente cada cambio en el código.

👉 Facilidad de Uso:

Jest es conocido por su sintaxis simple y amigable para los desarrolladores. Incluso aquellos que son nuevos en las pruebas pueden aprender a usar Jest de manera efectiva rápidamente. Esto fomenta la adopción de prácticas de prueba en equipos de desarrollo.

👉 Rápido y Eficiente:

Jest está diseñado para ser rápido. Utiliza técnicas como la ejecución en paralelo para acelerar las pruebas, lo que es crucial en proyectos grandes donde las pruebas pueden tomar mucho tiempo.

👉 Integración con Frameworks y Bibliotecas:

Jest se integra fácilmente con frameworks y bibliotecas populares como React, Angular, Vue y Node.js. Esto lo hace ideal para proyectos que utilizan estas tecnologías.

👉 Pruebas Unitarias y de Integración:

Jest es versátil y admite pruebas unitarias y de integración. Puedes usarlo para probar pequeñas unidades de código (como funciones) o para realizar pruebas de extremo a extremo (end to end) en todo un sistema.

👉 Reportes Claros:

Jest proporciona informes de prueba claros y legibles que muestran el estado de las pruebas y los errores en caso de que ocurran. Esto facilita la identificación y corrección de problemas en el código.

👉 Cobertura de Código:

Jest puede generar informes de cobertura de código, lo que significa que puedes medir cuánto de tu código está siendo probado. Esto es útil para identificar áreas del código que necesitan pruebas adicionales.

👉 Comunidad Activa:

Jest tiene una comunidad activa de desarrolladores y una amplia base de usuarios. Esto significa que puedes encontrar recursos en línea, bibliotecas adicionales y soporte de la comunidad para resolver problemas.

👉 Mantenimiento Continuo:

Dado que Jest es mantenido por Facebook y una comunidad dedicada, puedes esperar actualizaciones regulares y mejoras en la biblioteca para mantenerla actualizada con las últimas prácticas y estándares de desarrollo.

En resumen, Jest es una herramienta fundamental en el desarrollo de software moderno, ya que facilita la creación de software de alta calidad al garantizar que el código funcione como se espera. Al automatizar las pruebas y proporcionar una forma eficiente de realizar pruebas unitarias y de integración, Jest ayuda a los desarrolladores a mantener la calidad del software, reducir errores y acelerar el proceso de desarrollo. Su simplicidad y velocidad lo convierten en una elección popular entre los desarrolladores de JavaScript y una herramienta esencial en el kit de herramientas de cualquier equipo de desarrollo serio.

Si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻

🧪¿Qué es y para qué sirve el TESTING en Javascript?

David Ruiz — Wed, 27 Sep 2023 23:02:25 +0000

El "testing" en JavaScript se refiere a una práctica fundamental en el desarrollo web que implica probar y verificar que el código JavaScript que se ha escrito para una página web funcione correctamente. Para entenderlo mejor, pensemos en un ejemplo sencillo.

Imagina que estás construyendo una casa. Antes de permitir que las personas vivan en ella, quieres asegurarte de que todo esté seguro y funcione correctamente. Entonces, haces una serie de pruebas, como verificar que las puertas se abran y cierren correctamente, que las luces se enciendan y apaguen, y que no haya fugas de agua. El "testing" en JavaScript es similar a estas pruebas, pero se aplica al código de una página web en lugar de una casa.

Aquí hay algunas razones importantes por las que es crucial aplicar el "testing" en JavaScript:

Detectar Errores Temprano: Al escribir código JavaScript para una página web, es muy fácil cometer errores, como escribir mal una variable o una función. El "testing" permite detectar estos errores temprano, antes de que la página web se publique en Internet, lo que ayuda a evitar problemas que podrían ser costosos y complicados de solucionar más adelante.
Asegurar el Funcionamiento Correcto: Las páginas web modernas suelen ser complejas, con muchas interacciones y funcionalidades. El "testing" garantiza que todas estas partes funcionen correctamente y que los usuarios puedan usar la página web sin problemas, desde hacer clic en botones hasta enviar formularios.
Mantener la Calidad: El "testing" es fundamental para mantener la calidad de una página web a medida que se hacen cambios y actualizaciones. Cuando se introduce nuevo código o se modifica el existente, las pruebas permiten asegurarse de que no se rompa nada de lo que ya funcionaba.
Mejorar la Seguridad: El "testing" también ayuda a identificar vulnerabilidades de seguridad en el código JavaScript. Esto es esencial para proteger la información de los usuarios y evitar ataques cibernéticos.
Aumentar la Confianza: Cuando sabes que tu código ha sido probado y funciona correctamente, tienes más confianza en la calidad de tu página web. Esto puede ser importante tanto para los desarrolladores como para los usuarios.

En resumen, el "testing" en JavaScript es una práctica esencial que implica verificar y validar que el código de una página web funcione correctamente. Ayuda a detectar errores temprano, asegura el buen funcionamiento de la página, mantiene la calidad, mejora la seguridad y aumenta la confianza en el desarrollo web. Es una parte fundamental del proceso de construir y mantener sitios web de alta calidad.

Si quieres saber cómo empezar con el testing en Javascript, te recomiendo leer este artículo sobre Jest

Y si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻

DEV Community: David Ruiz

Cómo crear un servidor web en tu proyecto vanilla javascript

1. Inicializa el proyecto.

2. Istala el paquete serve de npm

3. Configura un script para ejecutar el comando

Cómo instalar Node en tu computador

Cómo instalar JEST en un proyecto con ECMAScript Modules (import/export)

1. Instalación de Jest y dependencias

2. Configuración de scripts en el package.json

3. Configuración de Babel

4. Instalación de Presets de Babel

Introducción a Jest y su importancia en el desarrollo de software

🧪¿Qué es y para qué sirve el TESTING en Javascript?

2. Istala el paquete `serve` de `npm`

2. Configuración de scripts en el `package.json`