Oleksandr Matsibora. Deployment of web-GIS application (Vue.js, Leaflet.js) with CI/CD workflow in GitHub Actions to Google Firebase web-hosting

Author
Oleksandr Matsibora
Published

DOI

Using of cloud infrastructure becomes more and more popular because of it's reliability, availability and security. Almost all popular providers of cloud services suggest limited “free plans” or “free tiers” for regular users and developers. That is a promising chance to deploy web-GIS single page applications (SPA) to the free cloud web-hosting.

As usual, the deployment of a Vue.js application is quite an easy and straightforward process because of many available online instructions and integrated command line interface (CLI) tools. So, to make this technical experiment more complex, there were configured continuous integration and continuous deployment (CI/CD) workflow of Quasar Framework web-GIS single page application to Google Firebase web hosting via GitHub Actions.

Deployment of web-GIS application (Vue.js, Leaflet.js) with CI/CD workflow in GitHub Actions to Google Firebase web-hosting

"Urban hiking web-GIS" – is a typical fully client-side SPA, where all data (including spatial) and configuration are stored in JSON and geoJSON files.

The main features of “Urban hiking web-GIS” application are:

  • an original layer management approach

  • using 2 vector layers to describe each route (photos and route polyline)

  • zooming to each route after selecting related checkbox

  • show/hide all routes in Tartu together

  • using WMS layers provided by Estonian Land Board (EPSG:3301)

Deployment process of Vue.js app to Firebase web hosting is described in detail in the official documentation, but if we use vue-based Quasar Framework with yarn package manager it requires some additional configuration. After installing the “firebase-tools” package, logging in to Firebase account and during hosting initialization it is necessary (apart from everything) to point out the public folder to “dist/spa” and setup a few additional steps to the script before each deployment:

  • run: rm -rf node_modules

  • run: yarn install --frozen-lockfile

  • run: yarn add @quasar/cli

  • run: quasar build

Conclusion:

Setting up of CI/CD workflow of Quasar Framework web-GIS SPA deployment to Google Firebase web hosting via GitHub Actions was very successful thanks to detailed documentation, Firebase CLI and of course “Spark” no-cost billing plan. That is an excellent opportunity to become familiar with elements of Google Cloud infrastructure and have reliable web-hosting for web-GIS SPA.

Useful links: