Desplegar en Heroku una app con vanilla JS empaquetada con Parceljs (Final)

Jose Cantos
Nov 4 · 2 min read

En la segunda parte de este artículo , dejamos nuestra aplicación preparada minificada y comprimida tanto con gzip como con brotli(br).


Ahora en este artículo final vamos a desplegarla en Heroku, antes de desplegarla tendremos que configurar un servidor en Express que nos sirva nuestros ficheros estáticos.

Para ello instalamos las siguientes dependencias:

npm install express express-static-gzip

El segundo paquete es para servir los ficheros comprimidos. Ahora creamos un fichero server.js en el ráiz de nuestra aplicación con el siguiente código:

const express = require('express');const { join } = require('path');const PORT = process.env.PORT || 7000;const expressStaticGzip = require('express-static-gzip');const app = express();app.use('/', expressStaticGzip('dist', {enableBrotli: true,customCompressions: [{encodingName: 'deflate',fileExtension: 'zz'}],orderPreference: ['br']}));app.get('/*', (req, res) => {res.sendFile(join(__dirname, 'dist', 'index.html'));});app.listen(PORT, () => {console.log('server is running on port :' + PORT);}).on('error', function (err) {if(err.errno === 'EADDRINUSE') {console.log(`----- Port ${PORT} is busy, trying with different port ----`);} else {console.log(err);}});

Como se puede ver en el código servimos nuestros ficheros estáticos usando el middleware expressStaticGzip , y luego tenemos una sola ruta que sea la ruta que sea sirve nuestro fichero index.html que se encuentra en nuestra carpeta dist.

Finalmente tendremos que añadir la siguiente linea en nuestro fichero package.json (la parte de scripts) para que en Heroku cuando la despleguemos nos haga el build de nuestro aplicación ya que la carpeta dist no la subiremos al repo.

"parcel:build": "parcel build index.html","heroku-postbuild": "parcel build index.html"

Ya con esto hecho solos nos quedaría subirlo a nuestro repo con git y luego desplegarla en Heroku.

Existen varias formas de desplegar en Heroku pero nosotros usaremos la mas sencilla que sería subirla directamente desde nuestro repo de git.

Es decir una vez creemos la app en Heroku en las opciones de despliegue ( Deployment method) tendremos que decirle que vamos a usar Github.

Luego nos pedirá las credenciales de nuestro github y que seleccionemos nuestro proyecto y la rama (normalmente la rama master).

Luego ya le damos a deploy branch, y en un rato ya tendremos nuestro app desplegada en Heroku, construida con Parcel y servida comprimida con Brotli.

Os dejo un ejemplo de esta app, que aunque es algo mas completa que la de este artículo sigue la misma filosofía:

Se puede acceder a la app en el siguiente enlace:

Con esto finalizamos los 3 artículos de creación y despliegue de una app realizada en Vanilla JS construida con ParcelJS.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade