Using FeathersJS as an open source alternative to Firebase

Firebase is a popular backend-as-a-service platform to build mobile or web applications that connect to a RESTful or real-time API. It makes it easy to get an application up and running quickly but if you are looking for more hosting options (Firebase plans can get pricy and you are locked into the platform) or are curious about full stack development in NodeJS, Feathers is an open source alternative that provides very similar functionality, but giving you much more control.

In this post I’d like to show how you can very simply create your own self-hosted clone of the real-time SlackerYou (jQuery + Firebase) chat demo that Wes created for HackerYou but with Feathers instead of Firebase.

To get started, let’s clone the SlackerYou repository (or your own fork ) which we will then modify to use our own server.

git clone git@github.com:HackerYou/SlackerYou.git
cd SlackerYou

If you want to try out everything right away, clone the Feathers SlackerYou by running:

git clone git@github.com:feathersjs/SlackerYou.git
cd SlackerYou
npm install
npm start

The server will be available at http://localhost:3030

Creating the Feathers server

Creating a real-time server using Feathers is actually really quick. With NodeJS installed, in the repository folder we can run

npm install feathers body-parser feathers-nedb

which will install the feathers, body-parser (to make it possible to send JSON to the REST API) and feathers-nedb packages. NEDB is a standalone file-system database so we won’t have to set up our own database server. Putting it all together looks like this:

We create a new Feathers application, enable connecting via REST and websockets (Socket.io in this case) and add the JSON body parser. Then we register a messages service that uses an NEDB database called messages. Last we add a static webserver for the current folder (so that we can host the HTML and JavaScript files) and run everything on port 3030. We can start the server with

node app.js

Our messages endpoint is now running at http://localhost:3030/messages (but currently just showing an empty array).

Changing the jQuery client

The SlackerYou client is still talking to Firebase so now it is time to update the HTML and jQuery parts to use our own newly created Feathers server instead. The only thing to change in index.html is to load Socket.io and feathers-client instead of the Firebase JavaScript:

Next we can update scripts.js. We can re-use almost all of the existing code including the createMessage method that adds a new message with jQuery. What will change is everything that is specific to Firebase. Instead, we first create a Socket.io connection to our server, then create a Feathers client and connect to the messages service:

// Create a Socket.io connection
var socket = io();
// Create a Feathers client that uses that connection
var app = feathers().configure(feathers.socketio(socket));
// Get the messages service
var messages = app.service('messages');

In the form submit handler we just need to replace

messagesRef.push(message);

With

messages.create(message);

Then we can replace the bottom of the script with the Feathers way of listening to new messages and getting all messages when a user loads the page:

// Add new messages
messages.on('created', addMessage);// Find all existing messages and add them to the page
messages.find(function(error, messages) {
 if(messages) {
  messages.forEach(addMessage);
 }
});

Everything put together looks like this:

That’s it! If you now go to http://localhost:3030/ you have a working real-time chat that stores its messages in a file database (you can see all messages at http://localhost:3030/messages).

Adding timestamps

Now it is time for some polishing. Right now, when a new user comes to the page our chat will always load all messages in no particular order (although it might be by the time of creation it is not guaranteed). The best way to get all messages in the correct order is to add a created_at timestamp to each message on the server and have find always sort the messages by that timestamp (oldest first). Then we also want to only return the last (newest) 10 messages. This is where feathers-hooks come in. Hooks allow us to hook into a service before or after a service method runs (but before it gets sent to the client). To get hooks we run

npm install feathers-hooks

And then we can register hooks, like adding a created_at timestamp to a message before it gets sent to the database like this:

app.service('messages'). before({
  create: function(hook, next) {
    // Add the created_at date
    hook.data.created_at = new Date();
    // Go to the next step (save to database)
    next();
  }
});

The complete server now looks like this:

To see the effect of the hooks, let’s delete the old database and restart the server:

rm -rf db-data
node app.js

Now we have our own self-hosted real-time chat that only loads the newest 10 messages.

Conclusion

Firebase is great to get up and running quickly without a backend but if you are looking for an open source option with more freedom or are curious about full stack development with NodeJS, Feathers is a great way to get very similar functionality with only a few lines of code. If you want to learn more, for example how to use other databases like MongoDB, write your own services or how to use other JavaScript frameworks to build real-time applications, head over to the Feathers website or the docs.