Enviando una aplicación con Vue.js a producción

Clase 16 de 17 • Curso Básico de Vue.js 2016

Gabriel Alejandro Nuñez Natera

student•

Aquí les dejo un tutorial que hice para hacer que la imagen de logo de la aplicación logre cargarse sin problemas en Github Pages. Espero que les sirva 😃

Daniel Muñoz Martín

student•

Me sirvió mucho tu aporte ! Muchas gracias 😄

David Daniel Castillo Nava

student•

Buenísimo aporte!!

kuai mare carrasquero

student•

Excelente curso introductorio de vue.js esperando con ansias la versión avanzada. muchas gracias @sachalifszyc y platzi!

Esleyder Ordoñez

student•

Hay un curso profesional de Vue.js

Lo dicta el profesor
Nacho Anaya.

Daniel Quispe

student•

A continuar con este gran framework 😃

Jean León

student•

Hola, solo quería comentarles que el motivo por el cual no sale el logo de vue es porque se omitió nuevamente ejecutar npm run build despues de hacer los cambios.

Irving Sarmiento

student•

Ya es un poco tarde desde que fue lanzado el curso (1 año aprox) pero les dejo mi enlace a mi proyecto del curso:

Last.fm VueJS

Juan Miguel Caberta Ramirez

student•

Muy bueno que te quedo!!

jonathan diaz Diaz Diaz

student•

Estuvo interesante el curso, me gusta que es muy rapido de implementar y que la parte de configuracion ya viene integrado cuando se crea el proyecto, el concepto que tiene se me parece en algunas cosas a angular2, en la parte de utilizacion de componentes y como se emiten eventos.

Bueno inicio para Vue.js, bueno profe saludos

Sacha Lifszyc

teacher•

Muchas gracias, me alegro que te haya gustado el curso!

Carlos Vargas

student•

Hola! Como puedo hacer para combinar vue.js con laravel? Mi landing page esta en vue pero el login lo tengo en php, al momento de hacerle href a mi archivo login.php lo que hace es descargar el archivo .php, y como hago para ejecutar xampp y el compilador de vue al mismo tiempo?

Julio Cesar Castro Alcala

student•

Excelente curso profesor !! para aportar un poquito, la parte del que no se ve el logo en github pages es porque hizo falta correr el comando npm run build y hacer un commit en el repositorio de esos archivos para que se actualizaran los cambios. Saludos y quedo pendiente para más contenido sobre vue.js

Damaris Quiroz

student•

En mi caso al crear el repositorio e intentar hacer el git push recibia el siguiente error:
Permission Denied (publickey)

Pueden ver la solucion aca)

Raul Arturo Valdivia Cruz

student•

me da esto luego

$ ssh-keygen -t rsa -C "rravc00@hotmail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/RRavc/.ssh/id_rsa):

me podrias ayudar ?

Francisco Peñalo Feliz

student•

Aqui está mi tutorial para hacer deploy a GitHub Pages de manera mas sencilla utilizando Vue CLI 3.

Edward Steven Ramos Palacios

teacher•

Gracias por tu aporte!

Benjamín Parra

student•

Realmente muy bueno el curso, me entretuve bastante, en algunos casos tuve que ver el video más de una vez para entender completamente pero como estaba entretenido no me hacía problema.

Muy buen relator que explica al detalle las funcionalidades y con ejemplos claros.

Vamos a dar la prueba ahora.

Angel Infanti

student•

Para los que tengan el problema : mixed content: the page at cambien http a https en la url de la API

Luis Rogelio Reyes Hernandez

student•

tambien podeis reemplazar el link del build.js por: dist/build.js esto funciona por que eso es un path relativo y no absoluto a diferencia de /dist/build.js por lo cual accede a https://creator_repo.github.io/nombre_repo/dist/build.js , en lugar de https://creator_repo.github.io/dist/build.js , lo mismo aplica para la imagen , y recuerden hacer build luego de cambiar la imagen ya que el archivo .vue debe ser compilado para funcionar

Gael Geovani Manzanares Quiñones

student•

Yo lo solucione configurando webpack así, y en html haciendo referecia al path de js con "./"

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
          publicPath: process.env.NODE_ENV  === 'production' ? '/course-vue-js-labs/dist' : '/dist',
        }
      }```

Brayan Ccari

student•

Hice un deploy con Netlify, realmente es super facil usarlo y rapido. Comparto mi proyecto final!

ISHIDA SOFTWARE

student•

Al momento de construir el proyecto me da el siguiente error, trate de solucionarlo cambiado las dependencias de desarrollo pero el error persiste:

ERROR in build.js from UglifyJs
Name expected [./src/api/index:3,0][build.js:13281,6]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! platzimusic@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the platzimusic@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\angel\AppData\Roaming\npm-cache\_logs\2019-06-30T17_30_32_521Z-debug.log

este es mi archivo de dependencias:

 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

Ayuda por favor!

Diego Forero

Team Platzi•

Puedes compartir tu archivo index.js que esta en src/api

Aarón González

student•

🤔 debe de haber una carpeta llamada src/api y dentro de ella un index.js. ¿Nos puedes compartir el código del archivo?

Luis Gonzalez

student•

Con Firebase Hosting me funcionó mejor y no hubo problema por la imagen y ya incluye el certificado para el HTTPS 😃
LINK

Ernesto Ledesma

student•

gogl92, estuve probando con firebase, pero me arroja un error de 404, en el firebase.json, como tienes configurada la ruta? gracias!

Diego Hernán Moreno Amaya

student•

Estuvo excelente el curso, Sacha explica muy buen, gracias por todo 😄

Mauricio Hernan Cabrera

student•

Utilizando lo aprendido en vue.js

Yefferson Guarnizo

student•

excelente curso 😃

Les dejo mi proyecto del curso, este es de gifs, una api que presta GYPHY.

link: crazyGifs
github: crazyGifs

Fredy Bustos

student•

Les dejo mi ejercicio del curso PlaziMusic
excelente curso. gracias sacha…

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
          publicPath: process.env.NODE_ENV  === 'production' ? '/course-vue-js-labs/dist' : '/dist',
        }
      }```

ERROR in build.js from UglifyJs
Name expected [./src/api/index:3,0][build.js:13281,6]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! platzimusic@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the platzimusic@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\angel\AppData\Roaming\npm-cache\_logs\2019-06-30T17_30_32_521Z-debug.log

 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  } 

Enviando una aplicación con Vue.js a producción

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?