Flutter + Firebase Auth + Shelf Backend

Overview

Build a Simple Notes App using Flutter Web, Firebase Auth and Dart for our backend.

Getting Started

Bootstrap

Initialize your project using the notes_app_shelf

$ globe create -t notes_app_shelf

Setup Firebase Project

You must create a Firebase account, generate Firebase Admin Service Account and download.

To generate a private key for your service account:

  • In the Firebase console, open Settings > Service Accounts
  • Click Generate New Private Key, then confirm by clicking Generate Key
  • Securely store the JSON file containing the key.

Setup Local Variables

  • Export GOOGLE_APPLICATION_CREDENTIALS env var by adding this line to your .bashrc or .zshrc file.

    export GOOGLE_APPLICATION_CREDENTIALS=$(cat <path-to-service-account-file>.json)
    
  • Create a .env in the server directory and add the FIREBASE_PROJECT_ID variable

    FIREBASE_PROJECT_ID=
    

Link Frontend with Firebase

Follow the guide at https://firebase.flutter.dev/docs/cli to link the frontend project with existing/newly created Firebase project.

You should have a firebase_options.dart generated after completing this step.

Running Project

Server

In the server directory, run the command below to start the Dart Shelf server.

$ dart run bin/server.dart

Frontend

In the frontend directory, run the command below to start the Flutter Web App.

$ flutter run -d chrome

Deployment

Setup Globe CLI

You can deploy with a single command on Globe. To install the Globe CLI, run the following command:

$ dart pub global activate globe_cli

To login with your Globe account, run the following command:

$ globe login

Deploy Server

In the server directory, run the following command:

  • Link Project to Globe

    $ globe link
    

    Globe Link Screenshot

  • Navigate to your project settings on Globe dashboard and add environment as shown below.

    Globe Environment Variables

  • Deploy to Globe

    $ globe deploy
    

    Globe Deployment Success

Deploy Frontend

Inside frontend/lib/main.dart file, replace https://your-project.globeapp.dev with the Deployment URL from our server deployment.

Now run this command to deploy your frontend 🚀

$ globe deploy