WhatsApp Clone with Meteor CLI and Ionic :1. Bootstrapping

by - April 02, 2017


Start by installing the Meteor platform if you haven't already (See reference).
Create a new project by running these commands in your command line:
$ meteor create whatsapp
$ cd whatsapp
Your app now contains a live and ready example. To run our app simply type the following on the command line:
$ meteor
We can also run our app inside the iOS simulator or Android emulator, we just need to add the platform so Meteor will build the project for the new platform:

$ meteor add-platform ios
$ meteor add-platform android
You can find more information about Meteor CLI and build tool here:
For now, let’s remove unnecessary files:
$ rm -rf server client
Next, we will replace Blaze (Meteor's default templating engine) with AngularJS's template engine:
$ meteor remove blaze-html-templates
$ meteor add angular-templates
We also need to make sure Ionic is installed along with its dependencies:
$ meteor add dab0mb:ionic-assets
$ meteor npm install angular@^1.5.8 --save
$ meteor npm install angular-animate@^1.5.8 --save
$ meteor npm install angular-sanitize@^1.5.8 --save
$ meteor npm install angular-ui-router@^0.3.1 --save
$ meteor npm install ionic-scripts --save
$ meteor npm install babel-runtime --save
If you're an iOS user you might encounter some issues related to double tapping not being submitted correctly. This is caused due to a package automatically included by Meteor and it is called mobile-experience so we can have a more native feeling for our app once running on a mobile device, which is not always right across the board. This package is simply a cluster of the following packages:
  • fastclick - Avoid the 300ms touch delay.
  • mobile-status-bar - Avoid the status bar information covering up your app content.
  • launch-screen - Cover the app with a launch image so that people don’t have to see things loading.
You can already figure out that the fastclick is a potential basis for our issue. So we will install the same packages mobile-experience provides us with, with an exception of fastclick:
$ meteor add mobile-status-bar
$ meteor add launch-screen
And finally, we will install angular-meteor, of which this tutorial is all about:

$ meteor npm install angular-meteor --save

You May Also Like