Firebase: Cloud voor frontend developers

Bij Profit4Cloud hebben we het nogal vaak over de Cloud. Maar we hebben niet alleen Cloud-fanatici. Onder ons zijn ook frontend developers die zich vooral bezig willen houden met het bouwen van apps d.m.v. JavaScript, HTML en CSS.

Toch heb je bij het maken van een app meestal ook een backend nodig. En dat is waar Firebase een oplossing biedt.

Firebase is een ontwikkelplatform (van Google, in Google’s Cloud) gericht op frontend ontwikkelaars. Een zogenaamd backend-as-a-service. Het geeft de mogelijkheid om je applicatie te hosten (je moet je code toch ergens laten), maakt het makkelijk om gebruikers in te laten loggen (social login, maar ook nieuwe user pools) en maakt het mogelijk om apps aan te sluiten op een ‘database’ met JSON als formaat van opslag. Dit alles, uiteraard, in de Cloud. Simpel.

Hoe simpel?

Installeer de tools.

$ npm install -g firebase-tools

 

Login.

$ firebase login

 

Maak een directory aan voor je eerste project.

$ mkdir ~/development/firebase/demo

 

Navigeer naar die directory en init:

$ firebase init

You're about to initialize a Firebase project in this directory:

 /Users/dicke/development/firebase/demo

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. 
 ◉ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

 

Er volgen nog wat vragen over paden en of je JavaScript of TypeScript wil gebruiken. Als de init gereed is kun je aan de slag!

$ find .
.
./.firebaserc
./public
./public/index.html
./public/404.html
./firebase.json
./database.rules.json

 

In de index.html file vind je meteen werkende code die deze firebase app initialiseert en verbindt met je Google Cloud backend.

Wijzingen push je simpel naar de Cloud met:

$ firebase deploy

 

Happy coding!