Re-architecting a Firebase app with Node.js, MongoDB, and Ionic 3 (Angular 4)

manticarodrigo Node.js Leave a Comment

One of the biggest concerns when using Firebase’s api is migrating to proprietary servers when scalability becomes an issue. Node.js is the newest and most sensible solution to modern app needs.

The Ionic Framework is a complete tool for Angular 4 apps intended for Cordova/Phonegap multi-platform use (Web App, Android, iOS, Windows Phone, etc).

To learn how to migrate from Firebase, I found Arvind Ravulavaru’s blog post extremely helpful in mimicking Firebase’s core features. With a Node.js, Express.js, Socket.io stack, it is easy and intuitive to construct a real-time connection to a MongoDB database.

This tutorial shows you how to implement Arvind’s basic Todo App in an Ionic 3 project. Make sure to look at Arvind’s post to get a better understanding of the structure behind the project.

Here’s a link to the finished Ionic 3/Node.js github repo.

Front-end

Assuming you have already installed Node.js and npm on your computer, you can install the Ionic Framework by running npm install -g cordova ionic.

Then you can begin a new project by running ionic start todoApp tabs which will create a todoApp folder with the Angular project inside.

Next, open terminal and cd todoApp into the todoApp folder and run ionic serve.

Open the project in your text-editor of choice and change the files in src/pages/home to reflect the following:

These files make up the home component which will give you a basic HTML template, JavaScript (TypeScript) logic, and CSS (SCSS) styles to view, add, edit, and delete todo items.

Next, in your terminal window create a new provider with the Ionic CLI by running ionic g provider Socket. Also run npm install socket.io-client --save.

Modify src/providers/socket/socket.ts and src/app/app.component.ts as such:

This will initialize my Ionic provider version of Arvind’s DataManager class. This is the provider responsible for communicating with our server with websockets in real time. Anyone connected to the “room” will receive updates as soon they are sent to the server.

Back-end

Normally, for modern apps, it makes sense to separate the server into it’s own directory/repository with it’s own package.json and create a RESTful API to communicate across many devices with the front-end.

For simplicity’s sake, we will include the server files in the same front-end project.

Run npm install express mongojs socket.io ejs cookie-parser body-parser --save.

Create a new file at the root of the project called server.js and modify like so:

This file will initialize an Http server with new Express app as a parameter. Finally, we initialize a WebSocket server using Socket.io with the Http server as a parameter. We are also adding in our routes which we will add next and finally starting the server and listening on port 2000.

From the project root, create a new directory sockets and inside create the following files:

In the todos.db.js file, make sure you put in the URI/URL of a running local instance of MongoDB or a cloud service such as mLab. Usually, you will want to store this kind of configuration under it’s own directory along with other configurations.

The rest of the file has CRUD (Create, Read, Update, Delete) functions for our todos in the MongoDB database.

The file todos.ws.js is in wraps those functions into socket.io calls for a real-time experience using MongoDB as a database. And finally, index.js is called from ourĀ server.js at the root of the project directory. The server is initialized with the simple command line node index.js.

As you can see, this is a basic but powerful approach to real-time servers. This will give you the building blocks to create complex back-end architecture, serving data in real-time to your users. Node.js has practically no limits in one of the most promising tech stacks for the future of multi-platform app experiences. There is a lot more we can do with Node.js and more examples of those will be coming soon.

Leave a Reply

Your email address will not be published. Required fields are marked *