La instalación de paquetes : npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -D
Introducción
¿Qué es Express.js?
Configuración del entorno de desarrollo para este curso
Instalación de Express.js y tu primer servidor HTTP
Routing con Express.js
CRUD
¿Qué es una RESTful API?
GET: recibir parámetros
GET: parámetros query
Separación de responsabilidades con express.Router
Instalación de Postman o Insomia
POST: método para crear
PUT, PATCH y DELETE
Códigos de estado o HTTP response status codes
Servicios
Introducción a servicios: crea tu primer servicio
Crear, editar y eliminar
Async await y captura de errores
Middlewares
¿Qué son los Middlewares?
Middleware para HttpErrors
Manejo de errores con Boom
Validación de datos con Joi
Probando nuestros endpoints
Middlewares populares en Express.js
Deployment
Consideraciones para producción
Problema de CORS
Deployment a Heroku
Próximos pasos
Continúa en el Curso de Node.js con PostgreSQL
Aportes 51
Preguntas 12
La instalación de paquetes : npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -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
⠀⠀⠀⠀
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
⠀⠀⠀⠀
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.
⠀⠀⠀⠀
gitignore.io:
⠀⠀⠀⠀
Contiene la configuración del entorno que específiques
⠀⠀⠀⠀
Editor Config:
⠀⠀⠀⠀
Todos los desarrolladores tendrán la misma configuración del proyecto.
Aquí les dejo la configuración de .editorconfig
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
**La config del eslint para copiar desde los apuntes **
{
"parserOptions": {
"ecmaVersion": 2018
},
"extends": ["eslint:recommended", "prettier"],
"env": {
"es6": true,
"node": true,
"jest": true
},
"rules": {
"no-console": "warn"
}
}
Pasos:
Adicionalmente se pueden hacer un par de configuraciones adicionales si utilizan visual studio code
Instalar el plugin Prettier y creamos en la raiz del proyecto el archivo .pretttierrc y dentro colocamos esta configuración
{
"semi": true,
"trailingComma": "none",
"singleQuote": true,
"printWidth": 60
}
y creamos el directorio .vscode y dentro el archivo settings.json con el siguiente contenido
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.printWidth": 90,
"editor.formatOnSave": true
}
Esto hará que nuestro editor formatee automáticamente los archivos con el estándar elegido al guardar el archivo
Les dejo la página para obtener la configuración del archivo .gitignore: https://toptal.com/developers/gitignore
Resumen del video:
Configuramos nuestro entorno de trabajo:
.
Creacion de archivos necesarios:
.
Contenidos de los archivos:
.gitignore:
https://www.toptal.com/developers/gitignore
.editorconfig:
Debemos instalar el plugin de VSC y escribir el siguiente contenido
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
{
"parserOptions": {
"ecmaVersion": 2018
},
"extends": ["eslint:recommended", "prettier"],
"env": {
"es6": true,
"node": true,
"jest": true
},
"rules": {
"no-console": "warn"
}
}
Ahora instalamos dependencias de desarrollo
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prittier -D
Finalmente escribimos las tareas en package.json
"scripts": {
"dev": "nodemon index.js",
"start": "node index.js",
"lint": "eslint"
},
Aquí les dejo mis apuntes de las clases en Notion. Espero que les sirvan! 😃
.
https://bit.ly/3mLoAVQ
Les recomiendo esta extensión para VSC, para generar el archivo .gitignore
https://marketplace.visualstudio.com/items?itemName=piotrpalarz.vscode-gitignore-generator
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
Hecho! Soy la única que piensa que el profesor explica muy bien?
Si vienen del curso de fundamentos de Node.js, posiblemente ya tengan instalado nodemon de manera global, verificando con el comando:
npm list -g --depth 0
Así que solo deje el comando de la siguiente manera:
npm i eslint eslint-config-prettier eslint-plugin-prettier prettier -D
Tengo el siguiente problema,
AL parecer por más que detengo el servidor, el proceso sigue corriendo en segundo plano, siempre tengo que matar el proceso manualmente y es un poquito aburrido hacerlo.
Hay una forma de que no me pase eso?
Estos son los comandos de la terminal que se ejecutan una vez que se crea la carpeta del proyecto para tener el repositorio y los archivos listos para configurar:
npm init -y
git init
touch .gitignore .editorconfig .eslintrc.json index.js
Configuracion lograda!!! git local y git hub hechos!!!
Si, si me funciona. Ja ja ja.
**Configuración del Entorno de desarrollo
**
npm init -y
// -y nos da una configuracion por defecto
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 https://www.toptal.com/developers/gitignore y seteamos las especificaciones para que nos genere automaticamente la configuración recomendada
editorconfig:
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
{
"parserOptions": {
"ecmaVersion": 2018
},
"extends": [
"eslint:recommended",
"prettier"
],
"env": {
"es6": true,
"node": true,
"jest": true
},
"rules": {
"no-console": "warn"
}
}
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
Me salen estos errores y quede estancado si alguien puede aydarme a solucionar seria muy bueno
Nunca habia visto un .gitignore tan bloated :V! WTF!!!
La instalación de paquetes :
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
ESlint es un analizador de código que permite organizar las concesiones de software en función de ciertas reglas.
.
root
Indica que esta configuración es para el proyecto, en general.parserOptions
Define la versión de ECMAScript y el tipo de recursos, por ejemplo módulos.extends
Permite agregar reglas a la configuración.env
Define el tipo de entornos que ejecuta la aplicación.rules
Define las propiedades que representan estados de producción..
{
"root": true,
"parserOptions": {
"ecmaVersion": 2020
},
"extends": ["eslint:recommended", "prettier"],
"env": {
"browser": true, // support frontend apps
"node": true // support backend apps
},
"rules": {
"no-console": "error"
}
}
Es un editor de texto/código que permite instalar extensiones según sea la necesidad
.
VSCode posee diferentes archivos con los cuales podemos configurar nuestro workspace (conjunto de proyectos) o workdirectory (directorio de proyecto).
.
launch.json
Permite lanzar procesos, por lo general adjudicados a nuestro debugger.settings.json
Permite extender la configuración general de nuestro VSCode con la particular del directorio o espacio en curso..
{
"configurations": [
{
"name": "Global debugger",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/src/index.js",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
"envFile": "${workspaceFolder}/src/config/.env"
},
]
}
name
nombre del procesotype
entorno a operarrequest
el tipo del proceso a ejecutarprogram
archivo a ejecutarruntimeExecutable
definición el engine o binarioenvFile
adjuntar las variables de entorno{
"editor.formatOnSave": true
}
editor.formatOnSave
configurar el editor para formatear al guardadMe sentí pro instalando las dependencias.
Ya quedo todo los requisitos,
Hola comunidad !
Si te encuentras con el siguiente error:
**npm : File cannot be loaded because running scripts is disabled on this system. For more information, see about_Execution_Policies at **
al tratar de correr un comando en powershell o en VSC
Lo solucioné de la siguiente forma:
esto permitirá que tengas el permiso para correr el comando en tu proyecto.
Links y codes mencionados:
gitignore:
https://www.toptal.com/developers/gitignore
#################
#code .editorconfig
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
#################
//code eslintrc.json
{
"parserOptions": {
"ecmaVersion": 2018
},
"extends": ["eslint:recommended", "prettier"],
"env": {
"es6": true,
"node": true,
"jest": true
},
"rules": {
"no-console": "warn"
}
}
/////////////////////////////
//code package.json
"scripts": {
"dev": "nodemon index.js",
"start": "node index.js",
"lint": "eslint"
},
/////////////////////////
Dependencias de Desarrollo a instalar desde consola:
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
Este profesor explica muy bien 😃 este curso me parece muy interesante a por ello 😃
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
.editorconfig
:
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.js]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false
.eslintrc.json
:
{
"parserOptions": {
"ecmaVersion": 2018
},
"extends": [
"eslint:recommended",
"prettier"
],
"env": {
"es6": true,
"node": true,
"jest": true
},
"rules": {
"no-console": "warn"
}
}
package.json
:
{
"name": "my-store",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon index.js",
"start": "node index.js",
"lint": "eslint"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^8.5.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"nodemon": "^2.0.15",
"prettier": "^2.5.1"
}
}
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
entorno listo 😄
Si quieren usar yarn para la instalaion de paquetes en lugar de npm
yarn add nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier
--dev
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier pritter -D
Si no les corre el script dev pueden reemplazarlo de esta manera.
"dev": "nodemon ./js/index.js localhost 3000"
En mi caso yo tenía una carpeta dentro llamada js
Que buena esa herramienta para que todos tengamos la misma configuración del entorno de desarrollo
Tareas en el package.json
Creación del gitignore
index.js
Estas dependencias permiten que nuestra pagina se refresque de manera autónoma
Configuración del entorno de desarrollo
Mucho contenido importante resumido en 7 minutos de clase me gustan estas clases asi continuando con el ultimo curso del JS Challenge
instalacion
npm install nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
probar entornos de desarrollo y producción:
npm run dev
Se corre nodemon y lo que hace es que escucha todos los archivos javaScript
Correr en modo producción:
npm run start
Se corre como un servidor de node.
Link Toptal
https://www.toptal.com/developers/gitignore
Para evitar error al ejecutar el comando dev si previamente esta corriendo node lo modifique así:
"scripts": {
"dev": "killall node; nodemon index.js",
"start": "node index.js",
"lint": "eslint"
},
Tener en consideración que hace un kill a node en general lo que puede ser peligroso si tienes otros servicios corriendo con node, en mi caso lo mantengo controlado porque solo lo utilizo para prácticas.
Instalaci{on de paquetes
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
Saludos Platzinautas
Todo queda ejecutandose OK
Gracias.
aprendí mucho en esta clase, espero que se vuelva cada vez mejor este curso
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.