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.
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
Open the project in your text-editor of choice and change the files in
src/pages/home to reflect the following:
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.
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.
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:
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.
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
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.