Build a personal Markdown notebook with Firebase Storage

Build a personal Markdown notebook with Firebase Storage

Brief at a glance

Last time, Firebase realtime database was used to build a comment system for my blog. The whole Firebase tools are such easy to use, and I’ve had a pleasant experience with them. Then I dig it deeper and comes out this single page app – an online Markdown Notebook.

Actually, the realtime database itself is capable of storing the Markdown content. However, consider the storage limits for a Firebase Spark Plan (free), I switched to Storage and wanna a try.

Firebase plans

Because of the same reason above, I put the word personal in the title. But everyone is welcome to play around with it. It’s hosted with GitHub Pages; you can download the repo at https://github.com/flinhong/firenote.

Editor.md and Semantic UI

OK, let me explain a little bit about it - Markdown Notebook. The UI is based on Semantic. At the very beginning, I was just want to learn how to use the UI system, but then I found it’s interesting to do something with it. That’s why I choose the editor.md, it’s appearance is consistent with Semantic.

Appearance

What’s more, editor.md is a well designed open source markdown editor and not difficult to use. I just extend its ability with cloud storage for free.

The Notebook structure

In this Markdown Notebook, the Firebase realtime database is used to record the notes information – notebook name, note name, and the update time. Everytime the user login (only Google account authentication used), it pulls down notes information from database not download the file from storage.

The markdown contents are stored as files in the Firebase cloud storage using the same structure as the realtime database. Every note must sit into a notebook and the Markdown file loads into the same notebook folder.

Notes structure

Save and delete the note

Just as the same operation in Firebase database, we should first set a .ref() to the note to store.

Since Firebase authentication is used, the data and files are put under the user’s space, and set the rules that only the user can read and write:

var userID;
var userName;

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        userName = user.displayName;
        userID = user.uid;
    };
});

var databaseRef = firebase.database().ref().child(userID);
var storageRef = firebase.storage().ref().child(userID);

var noteName = "some given name";

var notedataRef = databaseRef.child("notebookname/" + noteName);
var notefileRef = storageRef.child("notebookname/" + noteName);
// just for showing the idea

Whenever you click save (or ctrl+s), put the textarea content into a markdown file (text/plain) and upload it to Firebase storage:

var noteContent = $("#noteContent").text();
var file = new Blob([noteContent], { type: "text/plain" });

var uploadTask = notefileRef.put(file);

In this process, check whether the file exists in the Firebase storage. If it already exists, I just simply delete it then upload it again as an update operation.

For deleting the notes, I found that I didn’t need to delete the notebook as Firebase simply remove empty database node and empty storage folder, just delete the note itself is OK. In the database, use .remove(); but in the storage, use .delete().

Download the file from Firebase storage

It’s easy to put (upload) files into the Firebase storage, but when I was trying to download them, the CORS (Cross-Origin Resource Sharing) settings stopped the operation.

If you are going to build your version of the app, you should follow this Configuring CORS on a Bucket to configure CORS using gsutil.

And then download the markdown file and get the content with jQuery:

notefileRef.getDownloadURL().then(function(url) {
    var jQxhr = $.get(url, function(data){
        mainEditor.cm.setValue(data);                
    });
}).catch(function(error) {
// Handle any errors
});

The above process is triggered by click the note’s name in the open menu.

Further

At present, it involves lots of bugs. I believe you can make it even better. But be honestly, there’s lots of Markdown editor on the market, the most possibility of this one is for personal use and customise it as you like.

Then next step, I might add an export function that generate PDF files for the notes and customise the preview CSS.

avatar

Frank Lin

Code learning...

Say something Login