Deploying with(out) a Glitch

This is the second post of a serie (first one is here)going into some technical details about a migration project for G+ communities — if you want to retrieve G+ data, take a look at this tutorial.

In my first post on this subject, I explained how we could use Google Apps Script to retrieve Google+ data before saving them in a Firebase database and display them using Firebase Hosting.

But most Google+ users who wish to export their data are not developers and will need to go through some technical steps:

  • Create a Firebase project
  • Use Apps Script to import Google+ data in a Firebase Database
  • Deploy a web app with Firebase Hosting to display the data retrieved from G+

Creating a Firebase project is not very complex. Once you have a Google account, you can create a project with a few clicks (Google doesn’t even ask you to enter any credit card info — the free quota is quite generous and enough for our needs here).

Re-using the code written with Apps Script to export the data is also relatively easy. Apps Script projects are stored as files in Google Drive, you can make a copy in one click and don’t need to install anything on your computer, it’s a cloud IDE, you simply click on the “play” button in the editor to begin the export and that’s all.

It is also quite easy for me to deploy this Apps Script code as a web app, avoiding the need for users to copy the project and edit some code — something I did a few days ago.

To display the data exported, it’s another story… 😓 Until a few months ago, to deploy a web app on Firebase Hosting, you needed to install a code editor on your computer and run a few commands in a terminal (retrieve the web app code I’ve written from GitHub, install the Firebase CLI — along with Node.js and NPM, deploy the code on your Firebase project,…).

📢 But Google announced during the Firebase Summit 2018 the Firebase Management and Hosting APIs. This means that we can now automate the deployment of a web app to Firebase Hosting! Even better, Google partnered with two web-based IDEs, StackBlitz and Glitch so people can deploy to Firebase Hosting from those IDEs with the click of a button! ✌️

Here’s the recorded session where Google announced the Firebase Hosting API and its integration in Glitch.

Glitch is a web-based code editor… but also more than that. There’s a virtual machine running behind each project you create, you have access to a full shell, can install any npm package and use it to demo and prototype server-side Node.js apps. Here’s a great intro if you want to learn more.

In my case, it’s really useful because with a few clicks I can create a Glitch project linked to my GitHub repository (each time I update the code of the web app in GitHub, I can quickly update Glitch at the same time).

Glitch comes with an easy sync with GitHub and integration with Firebase.

And people can make a copy of this Glitch project in one click (it’s called a “remix”). They will see a “Deploy to Firebase” button in Glitch UI, from which they will be able to select the Firebase project they have created. Glitch will use the Firebase Hosting API to push the code of the web app on their Firebase project. And that’s all they need to do — nothing to install on their computer, no command line to enter in any terminal!

Note that this mostly saved me a lot of time, as I can provide an easy-enough way for people to reuse my web app template without writing any extra code. But in reality, it would be even better to use this new Firebase Hosting API directly in the Apps Script code so that everything is done in one step for the user. An additional benefit would be that Apps Script could periodically check for updates on GitHub and automatically update the copy of the Firebase project for each user (currently if I add a new feature like the ability to sort and search through posts, people will have to reopen my Glitch project, copy it again and click again on the “Deploy to Firebase” button).

Third article of this serie is published! — Use Firebase Functions to make your Firebase data searchable & deploy them with Glitch