MEVN Curso - Mongodb, Express, Vuejs y Nodejs, Parte 2 - Frontend con Vuejs
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- El Stack MEVN, tiene como objetivo crear aplicaciones web modernas con Javascript como principal lenguaje tanto el Frontend como en el Backend y la Base de datos.
En este curso crearemos un aplicación CRUD que es una Single Page Applications o Aplicaciones de una sola página utilizando Vue.js. y esta estará alojada en un servidor Nodejs que usara Express como framework del lado servidor y Mongodb como Base de datos.
CURSO DE VUEJS:
• Vue.js | Curso y Ejemplos
CURSO DE MONGODB:
• Curso de Mongodb
CURSO DE EXPRESS:
• Express | Node.js Fram...
TUTORIAL DE VISUAL STUDIO CODE:
• Visual Studio Code, Ed...
CÓDIGO FINAL DEL PROYECTO, VISITA MI SITIO WEB PARA MÁS CURSOS Y TUTORIALES:
www.faztweb.com
blog.faztweb.com
FAZT CODE - TH-cam:
/ @faztcode
PATREON
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
SLACK
goo.gl/q5UAoo
*¿TE SALTO UN ERROR EN npm run webpack?*
Paso 1:
Ve al archivo .babelrc y reemplazalo por el siguiente codigo.
{
"presets": [
"@babel/preset-env"
]
}
Paso 2:
Ejecuta este comando.
npm install -D babel-loader @babel/core @babel/preset-env
Paso 3:
*Rezar*
npm run webpack
también funciona para este error
"(...) TypeError: Cannot read property 'bindings' of null (...)"
que aparece cuando usas class Task en min 32:21
Gracias, Capo! Este comentario merece una cerveza fria!!!
Excelente, "rece" y no me salio el error... Gracias 😉
Mil gracias
Muchas gracias
Perfecto Fazt!! La verdad es que eres muy claro al hablar y se entiende perfectamente todo lo que tratas de transmitir, a pesar de ser cosas no sencillas. Enhorabuena!!!
Era justo lo que estaba buscando.. el stack MEVN
Fazt, creo que debes hacer un nuevo stack mevn debido a que muchas cosas quedaron obsoletas xd llevo 2 horas teniendo errores con vue-loader-plugin
pues yo lo hice y el único error fue exclude de node_modules
@@diegobuezo17 como hiciste con v-for a mi no me muestra lo que tengo almacenado
@@diegobuezo17 cómo lo resolviste? yo seguí esta "solución" pero no me funcionó: stackoverflow.com/questions/33001237/webpack-not-excluding-node-modules#:~:text=%20In%20order%20to%20exclude%20node_modules%20and%20native,in%20order%20to%20exclude%20other%20node_modules.%20More%20
Ya me funcionó, solo instalé el módulo @babel/core: www.npmjs.com/package/@babel/core
Gracias Fazt, eres una gran persona :) gracias a ti estoy aprendiendo muchas tecnologías :) sobre todo MEVN :)
Por si les sale error en npm run webpack
Hagan lo siguiente:
Paso 1:
Ve al archivo .babelrc y reemplazalo por el siguiente codigo.
{
"presets": [
"@babel/preset-env"
]
}
Paso 2:
Ejecuta este comando.
npm install -D babel-loader @babel/core @babel/preset-env
Paso 3:
Tener de esta manera su archivo webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/app/index.js',
output: {
path: __dirname + '/src/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins:[
new VueLoaderPlugin()
]
}
Si tienen problemas con el comando de Webpack (npm run webpack), pueden utilizar esta alternativa, a mi me funciona de maravilla:
*Solo lleguen hasta la configuracion de Babel 7*
markus.oberlehner.net/blog/setting-up-a-vue-project-with-webpack-4-and-babel-7/
chalinga tus videos wuey... hace una tercera parte pss.... algo mas avanzado, te agradeceria... , gracias por compartir tus conocimientos
Muy bueno Fazt!! Muy claro y bien explicado!! y buenisimo que sea desde cero, incluyendo la configuracion de webpack!! Piensas hacer una tercera parte incluyendo cuestiones de autenticacion y seguridad? seria buenisimo como para cerrar el circulo de la aplicacion!!
si les sale este error "webpack-cli error cannot find module 'vue/compiler-sfc'' solo deben instalar "npm add vue@next" y despues "npm add @vue/compiler-sfc -D"
Hola Colegas, aqui coloco la solucion al problema de la actualizacion del preset. Primero agregan esto al .babelrc {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
} luego ejecutan esta linea npm install --save-dev @babel/core @babel/preset-env y listo. Reinicien el npm run dev .
Para los que tengan el error con babel solo ejecuten esto:
npm install @babel/core --save
y ya podran ejecutar bien el comando npm run webpack
Muy bien explicado
Muchas muchas gracias por este video.! Ha sido muy util.!
Demasiado Pro. Muchas gracias!
¿Cómo podría hacer uno para usar vuetify en vez de bootstrap?, es que si intento usar vuetify me lanza un montón de errores.
Algo que me gustaria agregar, Fazt explica bien pero la metodologia de enseñar es que se requiere (se me pegó eso) explicar el trasfondo de las propiedades, es decir; entiendo la logica y basicamente su funcionamiento pero no entiendo el porque la existencia de esa propiedad ejemplo JSON.stringlify(this.task) o content-type, no entender el porque existen, porque su sintaxis es asi y me deja como una plantilla a usar asi porque asi es como funciona pero no se claramente porque existe tal cual, asi que me manda a ver documentacion para ver porque lo esta usando y darme cuenta que me hace falta retroceder a profundizar JS puro. Rara vez se equivoca o le sale error en la explicacion asi que si me llego a equivocar o cometer errores, no sabre como corregirlos porque aprendi por la linea de que todo esta correctamente codeado.
@58:16 Linea 114 solo podrías poner this.task = data
Excelente vídeo! hubiera sido genial explicar cómo desplegarlo (Por ejemplo en Heroku o Vercel no sé). Solo tuve un problema con mongo (bastante tonto jaja) y había que instalar babel/@core también. De resto excelente curso Fazt.
estoy recien comenzando a ver este video, mi consulta es... el front va a ir en el mismo proyecto que el backend, es decir no va a haber dos proyectos separados como en react por ejemplo?
Hola Fazt genial tus videos. Muchas gracias!!! Por favor podrias hacer un curso con el stack MERN. Muchas gracias nuevamente!!! por favor sigue así
De hecho hoy subo el stack MEAN, y en estos días estoy publicando el stack MERN :)
Muchas gracias, estas a otro nivel, super :)
El link de slack dice que ya no esta disponible ese link...revisalo Fazt. Muy bueno la explicación, mirare si me animo a mostrarlo como desplegarlo en heroku. Puede ser una buena opcion para los nuevos, y usar mlab.
Hola Fazt
Muy buenas noches
Espero y puedas ver esto pero es que tengo una duda
presento un presento por el minuto 18:33
Al momento de compilar nuevamente el code no me sale lo que le agregue a la etiqueta h1
y no sé que pasa
revise todo y está muy bien, re hice code de acuerdo al video y sigue sin salir el h1
En 38:00 todo bien, se guarda en la base de datos y todo, pero no hay manera que haga el .then( res => console.log(res)) en la consola
Excelente, como mencionan los compañeros si es posible seria bueno una actualizacion al menos en las secciones en dnde se meciona babelrc... excelente muchas gracias.
Excelentes vídeos Fazt, deberías enseñarnos como hacer cuando tenemos varios .vue poder enlazarlos y controlarlos mediante rutas por favor
Fast pudieras hacer una serie con SVELTE full stack.
Tio Fazt, existe la posibilidad de que subas estos cursos como podcast en Spotify (se que es necesario ver imagenes, pero a veces solo al escuchar la explicación se fija mejor la información)
Gracias por tu aporte al conocimiento.
para quienes tiene problemas con el npm run webpack despues de darkle yes y nada
npm cache clean --force
y de nuevo npm run webpack
Pero, despues de configurar el webpack, cuando se instalo babel y vue-loader vuelve a fallar webpack entonces:
npm r @babel/core
npm r babel-loader
npm i babel-loader@7
npm i babel-core
y de nuevo npm run webpack... y listo!
deberían crear un framework para usar el stack MEVN con un solo comando es decir que con solo ejecutar un comando en la terminal me creen todo el scaffolding y se instalen todas las librerias que corresponde al stack MEVN y listo. seria lo mejor que puede pasar
pues hazlo tu 🤷♂️
Ya lo hice y me va super bien y ahorro mucho tiempo
@@colommbiano super!
Cómo lo hiciste??
Fazt felicidades, sos bueno transmitiendo el conocimiento. Gracias.
Podrías revisar el enlace de slack? dice que ya no está disponible
Me gustaría añadir rutas para VueJs, sin embargo, me genera conflicto entender como acoplarlas teniendo en cuenta habrá problema incluso con la rutas de REST API del servidor creado.
en el 44.40, me ha funcionado con v-for="task in tasks" en vez de v-for="task of tasks"
const data = await fetch(url)
Va más rápido
Amigos, una posible solucion a algunos problemas en webpack es en "module: {
loader: [ cambiar loader por rules, es decir : module: {
rules: [
Terminado, muy ameno el tutorial, felicidades n_n/
Felicidades por terminarlo, un gusto que te sirviera :)
Buenas, a la hora de poner estilo en los componentes de vue, o hasta al asignarles clases de webpack no renderiza nada. Pero sin eso anda correctamente. Alguien sabe algo al respecto?
Para cuando tuto de electron? Me interesa mucho
Muy Pronto, ya estoy planeando cuando grabarlo :)
Estimado he visto tus videos y he visto que usas el html "html-webpack-plugin" para recargar el browser , como podria hacerlo para este stack porque el html webpack plugin no toma el index.js que usamos con express.
tu vídeo esta muy bien echo saludos desde mexico, pero una pregunta en la mayoría de tus vídeos usas ejs, por que en este caso usando vuejs no lo usaste, hay alguna diferencia usándolo con vue y ejs o algo por el estilo ??
Gracias Martin. en cuanto a lo de ejs, tambien es posible usarlo, solo que en este caso como use el index.html dentro de la carpeta public, no era necesario un motor de plantilas, pero si necesitas usarlo puedes hacerlo perfectamente. :)
gracias!!!
App.vue:1 Uncaught Error: Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of undefined (reading 'styles')
Alguien sabe resolver este error?
si les pasa esto, deben mirar la compatibilidad del vue-loader. Poner en la terminal lo siguiente: npm install vue-loader@ --save-dev
Lo ue no me quedo claro es en que momento hace la conexión a la BD :(
Al tratar de correr solo lo de la carpeta public no reconoce las rutas no-referrer-when-downgrade
Me sale " Module build failed: Error: Cannot find moduke 'babel-core'" " in ./src/app/index.js
Hola Marcelo, en ese caso instala babel-core con: npm install babel-core
Corregido!
¡Muchas gracias! aunque ya lo habia arreglado
instala babel-cli "npm i babel-cli -D" y listo!
alguien tuvo un problema al momento de ejecutar el comando npm run webpack con el error ERROR: Cannot find module '@babel/core' ?
primero desinstala babel-core(si lo tienes instalado): npm remove babel-core -D
y luego instala la version 7 : npm install @babel/core -D
Gracias !!!
@@jaimeenciso608 Eso.! Gracias.!
¿Cualquiera puede meter información si tiene la url de la api?
Me parece un hueco de seguridad, y de igual manera que cualquiera pueda pedir los datos (haciendo de cuenta que esta misma app está en producción).
¿Cómo hago que cada usuario tenga su propia lista de tarea PRIVADA?
Obviando la parte de crear un login, ¿qué tengo que aprender para esto?
Se puede gestionar con API KEYS, con un sistema de sesiones...
El video solo tenía como fin mostrar este conjunto de tecnología. Claramente para un proyecto real, el cual vas a desplegar en un ambiente productivo, requiere muchas más consideraciones no nombradas (Como gestión de auditoría o manejo de excepciones). Para el caso particular que mencionas de seguridad por usuario, podrías usar un modelo básico de autenticación y autorización basado en tokens con OAuth
ME Sale este error.. como lo puedo solucinar?
C:\Users\JhonEscudero\Documents\Proyecto\LaOca> npm i babel-loader -D
npm WARN vue-loader@15.7.0 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN LaOca@1.0.0 No description
npm WARN LaOca@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ babel-loader@8.0.5
updated 1 package and audited 11214 packages in 8.312s
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
PS C:\Users\JhonEscudero\Documents\Proyecto\LaOca>
Una pregunta y que pasa con la base de datos? queda en ese archivo js al final tambien?
Hola amigo, tengo una duda.. el archivo bunled.js lo crea pero mi sistema no lo reconoce.. tiene el codigo adentro, pero al parecer no puede ser leido. de echo en las propiedades dice 0 bytes.
esto es lo que tengo en mi .json
{
"name": "mevn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon src/index.js",
"webpack": "webpack --mode development --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"mongoose": "^5.1.6",
"mongose": "0.0.2-security",
"morgan": "^1.9.0",
"nodemon": "^1.17.5"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"vue": "^2.5.16",
"vue-loader": "^15.2.4",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
}
}
como se hace cuando el formulario crear o editar lo haces en una modal
Hola! Estoy intentando correr el comando npm install webpack pero me devuelve el siguiente error "Maximum call stack size excedeed". ¿Alguien sabe como solucionar? He intentado varias cosas ya pero nada... Agradeceria mucho la ayuda
Porque la aplicacion es lenta? solucion ?
Esperando la actualización 🥺
a pesar de ser de 2018 esta bastante actualizado
que tal me sale este error cual crees que es el problema:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
Todo lo tengo igual a tu ejemplo...y todo dependencias descargas ..
Gracias
¿Pudiste solucionar ese problema? Me pasa lo mismo, para los archivos .Vue.
Hola como agrego y muestro una imagen ?
𝗤𝗨𝗜𝗘𝗡 𝗠𝗘 𝗣𝗨𝗘𝗗𝗘 𝗔𝗬𝗨𝗗𝗔𝗥 𝗖𝗢𝗡 𝗘𝗦𝗧𝗘 𝗘𝗥𝗥𝗢𝗥 ?? ==> al integrar router vue y desplazarme mediante mi navbar no tengo problema, pero al refrescar en la ubicación actual el servidor me arroja un error Cannot GET (mi ruta)... lo curioso es que si le quito el mode histori a mi router funciona el refrescar pero por si solo me agrega un molesto /# en mi ruta. POR FAVOR QUIEN ME PUEDA AYUDAR CON ESTO
El history se usa si haces un spa, chequeate bien esos conceptos quizas no estas agregando correctamente tus rutas en tu vue router
Que sería mejor usar fetch o axios?
axios, es una biblioteca que tiene mucho más soporte, en navegadores no tan modernos, pero eso depende de cual sea los navegadores de los cuales van a acceder tus usuarios.
Segun la documentacion de Vue AXIOS es el recomendado.
como haria si quiero agregar otras paginas?
SSR?
"(...) TypeError: Cannot read property 'bindings' of null (...)"
Anyone get this error when create the class Task?
npm install @babel/preset-env --save-dev
mete esto dentro .babelrc
{
"presets": ["@babel/preset-env"]
}
Me sale muchos errores al ejecutar npm run webpack :(
Pon el orden de tus comentarios a mejores respuestas y en el primero que te sale esta la solucion a ese problema.
por que me pide instalar babel-loader@7 o @6 y con la version 8 me manda error
solo escribe "npm install @babel/core -D" y funciona luego perfecto, no tienes que configurar nada mas :)
waltermaniaco pero me refiero al código amigo ....
Jhonatan Galindo escribe esto en la consola npm i babel-core
bundle.js