¿Cómo preparar el entorno para un proyecto en Node.js?
Iniciar un nuevo proyecto en Node.js no solo implica la instalación de dependencias y la escritura de código, sino también la configuración adecuada del entorno de desarrollo. Esto asegura que el trabajo sea eficiente, replicable y se adhiera a las mejores prácticas. Exploremos cómo configurar el entorno de nuestro proyecto integrando herramientas esenciales como git, linter y otras prácticas recomendadas.
¿Cómo crear la estructura inicial del proyecto?
Crea una carpeta para el proyecto: Usa el comando mkdir seguido del nombre del proyecto. Por ejemplo:
mkdir mystore
cd mystore
Abre esta carpeta en tu editor de preferencia, en este caso utilizaremos Visual Studio Code:
code .
Inicializa el proyecto con npm: Desde la terminal, ejecuta:
npm init -y
Esto generará un archivo package.json con una configuración básica.
Inicia un repositorio git: Para versionar el proyecto, ejecuta:
git init
¿Qué configuraciones iniciales se deben considerar?
En esta etapa, crearemos archivos de configuración esenciales.
Archivo .gitignore:
Evita rastrear archivos innecesarios en el repositorio. Puedes generar un .gitignore para Node.js usando gitignore.io:
# Agrega Node y sistemas operativosnodewindows
linux
macos
Copia la configuración generada en tu archivo .gitignore.
Configuración de EditorConfig:
Unifica la configuración del editor para un equipo de desarrollo homogéneo. Requiere la extensión EditorConfig para VSCode.
Archivo .eslintrc.json:
Define las reglas del linter para mantener estándares de codificación. Puedes usar estándares como ES6:
Una vez configurado todo el entorno, es momento de realizar pruebas para garantizar que todo funcione correctamente.
Prueba en entorno de desarrollo:
Ejecuta:
npm run dev
nodemon observará cambios en los archivos .js, recargando automáticamente el servidor.
Prueba en entorno de producción:
Usa el comando:
npm start
Esto correrá una instancia simple de Node para producción.
Con estos pasos, tu entorno de desarrollo y producción estará listo. Implementar estas prácticas te permitirá mantener una estructura de trabajo ordenada y eficiente. ¡Sigue aprendiendo y mejorando tus habilidades de desarrollo!
La instalación de paquetes : npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -D
Muchas gracias! Sin embargo quería dejar una nota (por si alguien Copia y pega):
Al final, antes del "-D" debería decir "prettier" y no "pritter"
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
El comando tiene un pequeño typo pero no es nada grave
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
Asi es bro... a escribir iba pero ya nos diste el apoyo...
Gracias me sirvió el comando.
Aquí les dejo la configuración de .editorconfig
# Editor configuration, see https://editorconfig.orgroot =true[*]charset = utf-8indent_style = space
indent_size =2insert_final_newline =truetrim_trailing_whitespace =true[*.js]quote_type = single
[*.md]max_line_length = off
trim_trailing_whitespace =false
Grande Pa, gracias!
Muchas gracias
Configuración del entorno de desarrollo
⠀⠀⠀⠀
Hola!, les dejo las definiciones de los siguientes conceptos para reafirmar las bases que ya tenemos sobre el desarrollo. 😁
⠀⠀⠀⠀
Git Ignore:
⠀⠀⠀⠀
Son archivos ignorados que suelen ser artefactos de compilación y archivos generados por el equipo que pueden derivarse de tu fuente de repositorios o que no deberían confirmarse por algún otro motivo. Ejemplo: node_modules.
Linters:
⠀⠀⠀⠀
Herramientas que realizan la lectura del código fuente
Detectan errores/warnings de código
Variables sin usar o no definida, llave sin cerrar...
⠀⠀⠀⠀
Nodemon:
⠀⠀⠀⠀
Es una herramienta que ayuda a desarrollar aplicaciones en Node.js al reiniciar la aplicación autómaticamente cuando hay cambios en el archivo.
⠀⠀⠀⠀
⠀⠀⠀⠀
Contiene la configuración del entorno que específiques
⠀⠀⠀⠀
Editor Config:
⠀⠀⠀⠀
Todos los desarrolladores tendrán la misma configuración del proyecto.
**La config del eslint para copiar desde los apuntes **
Uno de mis problemas con muchos cursos de platzi, y que me di cuenta cuando empecé a tomar cursos externos, es que no se centran en el tema y confunden a la gente más novata con configuraciones extra que no quedan claras para que son. Hay buenas prácticas que son buena idea ponerlas en práctica pero si lo mezclan con cursos sin hacer una aclaración de que necesitan saber antes es muy problematico
buen aporte
Pasos:
Crear carpeta del proyecto
Inicializar proyecto con npm
Inicializar git
Crear archivos de configuración
Crear archivo index.js
Crear scripts dentro del package.json
Instalar dependencias
Probar entornos desde los scripts npm
Thanks friend.
Para los que les interese, en la ultima version de Node.js trae un flag llamado --watch, eso nos evita tener que instalar nodemon. Solo se necesita agregar en el package.json lo siguiente:
"dev":"node --watch index.js"
buenísimo !!
Resumen del video:
Configuramos nuestro entorno de trabajo:
gitignore
linters
nodemon: servidor de desarrollo
.
Creacion de archivos necesarios:
Comando npm init -y:
para crear el archivo package.json y gestionar nuestros paquetes y crear tareas.
Comando git init
para iniciar un repositorio
Creamos un archivo .gitignore:
para indicar que debe ignorar git
Creamos archivo .editorconfig:
para configurar nuestro editor
Creamos archivo .eslintrc.json
para las reglas de nuevas practicas
Esto hará que nuestro editor formatee automáticamente los archivos con el estándar elegido al guardar el archivo
Excelente aporte!
Hola a todos, como dato curioso desde la version 18 de NodeJS ya no es necesario que se use nodemon, ya que se puede usar el comando node --watch "archivo a ejecutar en tiempo real" para realizar exactamente la misma funcionalidad. Les comparto la forma en la que lo estoy trabajando.
También puedes copiar el package.json y correr uno de los sig. comandos
// npmnpm install
// yarnyarn install
package.json
{"name":"playground","version":"1.0.0","main":"index.ts","description":"API for a store","license":"MIT","scripts":{"dev":"nodemon index.ts","start":"node ./dist/index.js","lint":"eslint . --ext .ts"},"author":"Enrique Ruvalcaba","devDependencies":{"@types/node":"^18.11.9","@typescript-eslint/eslint-plugin":"^5.42.0","@typescript-eslint/parser":"^5.42.0","eslint":"^8.27.0","nodemon":"^2.0.20","prettier":"^2.7.1","ts-node":"^10.9.1","typescript":"^4.8.4"}}
.editorconfig
# Esta configuración es para que todos los desarrolladores tengan una misma configuración
# Editor configuration, see https://editorconfig.orgroot =true[*]charset = utf-8indent_style = space
indent_size =2insert_final_newline =truetrim_trailing_whitespace =true[*.js]quote_type = single
[*.md]max_line_length = off
trim_trailing_whitespace =false
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
gitignore para las configuraciones
En VS instalar el Pluying EditorConfig
3.En Terminal ejecutar: npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
npm run dev
npm run start
Importante y primero que todo ya estando ubicado en la carpeta del proyecto.
1. npm init -y
2 git init
Saludos,
// Este serie el proceso correcto para las configuraciones
/* Crear la carpeta /
$ mkdir my-store
$ cd my-store / Para ubicarnos en dicha carpeta*/
$ code . /* Para abrir visual Studio Code /
$ npm init -y / Estando en la carpeta del proyecto ejecutar y por defecto, para que me cree package.json en el directorio del proyecto*/
$ git init /* Para inicializar el repositorio /
$ / Link de gitignore para las configuraciones https://www.toptal.com/developers/gitignore/
$ / En VS instalar el Pluying EditorConfig /
$ npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D / Para que funcione el entorno se instala las dependencias, teenr un entorno de desarrollo y un servidor /
$ npm run dev / Para ver el entorno de desarrollo nodemon*/
$ npm run start /* Para correr en produccion */
Aquí la configuración del .editorconfig y una descripción de que hace cada línea:
# Editor configuration, see https://editorconfig.orgroot =true[*] # Configuraciones aplicables a todos los archivos del proyecto
charset = utf-8 # Juego de caracteres UTF-8indent_style = space # Utilizar espacios para la indentación
indent_size =2 # Tamaño de la indentación:2 espacios
insert_final_newline =true # Agregar una nueva línea al final de cada archivo
trim_trailing_whitespace =true # Eliminar los espacios en blanco al final de cada línea
[*.js] # Configuraciones específicas para archivos JavaScriptquote_type = single # Utilizar comillas simples para las cadenas de texto en JavaScript[*.md] # Configuraciones específicas para archivos Markdownmax_line_length = off # Desactivar la limitación de longitud máxima de línea en Markdowntrim_trailing_whitespace =false # Mantener los espacios en blanco al final de las líneas en Markdown```Y aquí del .eslintrc.json
```js
{"parserOptions":{"ecmaVersion":2018// Especifica la versión de ECMAScript utilizada (2018 en este caso)},"extends":["eslint:recommended","prettier"],// Extiende las reglas recomendadas de ESLint y añade reglas de Prettier"env":{"es6":true,// Habilita las características de ES6"node":true,// Habilita las variables y funciones globales de Node.js"jest":true// Habilita las variables y funciones globales de Jest},"rules":{"no-console":"warn"// Advierte cuando se utiliza console.log()}}```Y este es el comando que instala todas las dependencias necesarias:npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -D
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D *
Equipo de desarrollo de Platzi, que tal si adicionan un boton que diga "copiar" el cual al abrir el contenido de un archivo que este ligado al video, lo copie en el porta papeles y solo sea pegarlo en nuestro editor?. Solo una sugerencia, seria bueno tenerlo
Hola, es una gran sugerencia, la pasaré al equipo de ingeniería para llevarlo a cabo.
**Configuración del Entorno de desarrollo
**
Seleccionar un espacio en tu disco y crear una carpeta
Aperturamos nuestro proyecto en el editor de codigo
Volvemos a nuestra consolo he inicializamos npm
npm init -y
// -y nos da una configuracion por defecto
Aprovechamos he inicializamos Git
git init
Creamos el archivo .gitignore en nuestro proyecto de forma manual
Creamor el archivo .editorconfig para la configuración de nuestro edito, asi todos los desarrolladores tendran la misma configuracion para el editor
💡 Para que esto funcione correctamente debemos tener instalado en nuestro VS la extensión EditorConfig for VS Code
Creamos el archivo .eslintrc.json para todas las reglas de buenas practicas
Creamos el archivo index.js para iniciar nuestr app
Hasta ahora solo hemos creado los archivos vacios, procedemos a llenarlos
gitinore: accedemos a la página y seteamos las especificaciones para que nos genere automaticamente la configuración recomendada
editorconfig:
# Editor configuration, see https://editorconfig.orgroot =true[*]charset = utf-8indent_style = space
indent_size =2insert_final_newline =truetrim_trailing_whitespace =true[*.js]quote_type = single
[*.md]max_line_length = off
trim_trailing_whitespace =false
Ahora agregamos algunas tareas a nuestro packaje.json
{"name":"my-store","version":"1.0.0","description":"","main":"index.js","scripts":{**"dev":"nodemon index.js","start":"node index.js","lint":"eslint"//Con esto nos aseguramos de cumplir con las buenas practicas**},"keywords":[],"author":"","license":"ISC"}
Luego de esto, para que funcione necesitamos instalar nuestras dependencias de desarrollo, asi que vamos a nuestra terminal:
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D// la -D indican que son solo dependencias para entorno de Desarrollo
Una vez completada la instalación de las dependencias, procedemos a probar nuestros entornos de Desarrollo y producción
npm run dev
npm run start
Si te da el error de
unexpected token '.'
Yo personalmente utilizo NVM, solo googlea NVM e instala, te permitirá tener varias versiones de Node.
Con la versión 16.13.2 funciona sin ningún problema ya que es un bug de NPM version 8
Excelente herramienta para el trabajo, pues normalmente uno necesita trabajar con versiones antiguas de Node.js, por lo que hay que cambiar de versiones.
Hola,
Acá les comparto un skeleton para sus proyectos en Javascript Vanilla, se incluyen algunas de las recomendaciones sugeridas por el instructor (no todas, pero si otras), se incluyen el .gitignore, babel, webpack, eslint, prettier, algunas de GitHub, el private: true para evitar que por defecto tus paquetes se publiquen como "públicos" en la web de NPM, etc... -> skeleton javascript vanilla
