Como hacer DEPLOY de aplicaciones Vue js + Webpack en Heroku

En este post veremos como desplegar apps de Vue js creados con webpack en Heroku.

Primero debemos crear una aplicacion en Heroku, nos dirigimos a https://dashboard.heroku.com para ello.

Ahora para crear una aplicación  Vue js con Webpack y VUE-CLI , debemos tener instalado lo necesario que dice la guia de Vue.

Los pasos para crear una aplicación son:

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Al hacer npm run dev   nuestra aplicacion correra en modo local, para levantar o hacer deploy en heroku debemos seguir los siguientes pasos:

1. Crear los archivos necesarios para que nuestra aplicacion este lista para produccion, eso lo logramos con:

$ npm run build

2. Al ejecutar npm run build  se creara la carpeta /dist  que contendra los archivos estaticos compilados listos para producción. Ahora dentro de esa carpeta creamos un archivo llamado package.json, que es diferente al que esta en la raiz del proyecto.

El archivo /dist/package.json  contendra lo siguiente:

{
 "name": "proyecto",
 "version": "1.0.0",
 "description": "mi proyecto vue js",
 "author": "el autor",
 "private": true,
 "scripts": {
   "postinstall": "npm install express"
 }
}

3. Ahora dentro de la carpeta /dist, también creamos un archivo llamado server,js.

El archivo /dist/server.js  contendra lo siguiente:

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

4. Ahora en la linea de comandos iniciamos sesion en Heroku, para ello primero debemos instalar el Cliente de Heroku, segun el sistema operativo que tenemos. Tambien debemos tener instalado GIT.

Una vez instalado git y el cliente de Heroku, ejecutamos lo siguiente en la consola:

$ heroku login

Ponemos nuestro correo electronico y contraseña de la cuenta con que creamos Heroku.

4. Ahora dentro de la carpeta /dist  de nuestra aplicacion Vue js con webpack ejecutamos los siguientes comandos de git.

$ git init
$ heroku git:remote -a mi-app-heroku

5. Para subir nuestro proyecto vue js de nuestra computadora en local para que se ejecute en internet gracias a Heroku, lo hacemos mediante git, con los siguiente comandos, seguimos dentro de la carpeta /dist

$ git add .
$ git commit -am "primer commit"
$ git push heroku master

Empezara a subir los archivos de la carpeta /dist que fueron creados con el comando npm run build a Heroku. Si nos sale algun error en este ultimo proceso, repetir los pasos 4 y 5.

6. Finalmente nos vamos a la URL que Heroku nos da para ver nuestra aplicacion Vue js con Webpack desplegada.

Recomendaciones: Este metodo funciona si creamos nuestra aplicacion con webpack, ya que si se creo con webpack-simple no podremos hacer deploy en Heroku.

Si quieren aprender mas de Vue js, les recomiendo seguir este Curso Online de Vue js totalmente GRATIS.


Si este tutorial les sirvio de ayuda no duden en dejar su comentario. Gracias!!