The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Ionic/Meteor Tutorial

Uri Goldshtein is a software developer at Meteor Development Group and frequently writes about Ionic on Meteor’s blog For the Ionic 2 version of this tutorial, click here.

With Angular-Meteor, Meteor became a great backend solution for Angular and Ionic apps. Meteor now has official support for Angular with its third party libraries, and Ionic has added official support for Meteorโ€™s packaging system.

Each platform has its own CLI and build process solutions, so you can choose your favorite. I’ve written two versions of an Ionic/Meteor tutorial, to help you get started:

Using the Ionic CLI
Using the Meteor CLI and build process

In these tutorials, we’ll create a full WhatsApp clone using Angular and Ionic. We’ll use Meteorโ€™s realtime collections for the chat and Meteorโ€™s simple Authentication packages for SMS-based authentication.

It’s great to see the power of these two solutions working together!

  • hitmantb

    Great article, two questions:

    1) Which of the two approaches do you recommend?

    2) How do I actually package Ionic into an APK and deploy the Meteor server component? I have no problem getting this to work on development machine thanks to your tutorial, but deployment is a major hassle.

    I normally use Parse so there is no server deployment. In this case I need to deploy Meteor server application to Digital Ocean? But how does Ionic APK knows which server to talk to?

    • Urigo

      That’s a great question!

      1) It’s of course a personal choice and the 2 has pluses and minuses.

      I would say the best thing is to try them both and see for yourself.

      I personally prefer Meteor’s CLI. it’s just abstracts more about the hassle but it is new for people.

      2) With the Meteor build tool it’s just one command line.

      You can deploy to Meteor’s servers by using the `meteor deploy` command

      or to your own server with the `meteor bundle` command.

      There are many resources on how to deploy a Meteor server, here is a short list specific to Digital Ocean – https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=meteor%20up%20digital%20ocean

      To create an APK or IPA it’s also just running one command line, here is a link to a tutorial about that – http://angular-meteor.com/tutorials/angular1/running-your-app-on-android-or-ios-with-phoneGap

      On letting the APK know which server to talk to, in Meteor you can find it on the deployments tutorial I’ve sent you (depends on where you deploy your app).

      And if you are using the Ionic CLI, you can find the explanations here – https://github.com/idanwe/meteor-client-side#usage

      • rajkotecha

        Have tried option 1 twice now. Hitting error:

        TypeError: $scope.$meteorCollection is not a function

        Here are my includes in index.html: (note I’m using PHPstorm and all of these includes are correctly resolving)

        <!– cordova script (this will be a 404 during development) —

      • hitmantb

        Wow thanks so much for the detailed answer! I will try the Meteor CLI approach, but does that make me lose ionic features like native scrolling, fast click, etc? Does ionic’s packaging process add stuff to the APK that Meteor does not, or it is 100% HTML/CSS/JS and once your Cordova there is no difference?

        The biggest advantage of Meteor is indeed the way it abstracts things. When I saw it for the first time, how you can use collection to CRUD the database AND sync it locally without any database code, it was jaw dropping. A front end designer can access the database like a plain Javascript object without writing any node/express set() get(), it was amazing.

        However, because of this, Meteor is pretty opinionated and more or less an all-or-none thing. It is got very low jobs on indeed.com compared to say, Django and node/express individual components because of this, and I think Meteor without going all in is kind of defeating the purpose.

        • Urigo

          You won’t loose native scrolling when using the Meteor CLI.
          Meteor still uses PhoneGap behind the scenes so you can also use any Cordova plugins and also all the ng-cordova modules.

      • rajkotecha

        Hey Urigo, I haven’t had a chance to get in front of the keyboard and try out the updated Ionic CLI tutorial.

        That said I’m thinking the Meteor CLI approach cuts out the dependency on meteor-client. Am I correct on that?

        If so I think I’ll have a go at going that route.

        I have an existing app Ionic CLI based that I’d need to port. From what’ve seen the port wouldn’t be too hard. Just renaming files to ng.html for the most part. Am I missing anything major in your opinion?

        • http://angular-meteor.com/ Urigo

          No, porting is really easy just like you said.
          I’ve also released a new version of angular-meteor (1.0.3) that fixes some issues with the Ionic CLI

          • rajkotecha

            Ok will try it out this weekend. I’ve had a lot of success with 1.0.1. and an Ionic CLI based app:
            1. Get the Whatsapp tutorial mongo collections scenario working (I.e. Realtime updates) using Ionic CLI

            2. Integrated Meteor with my own ionic app that I mentioned earlier

            3. Used Meteors account-password framework for users that didn’t want to use social login (I had already implemented social using hello.js

            4. Successfully moved Meteor server to Heroku using mongolab

            I’m quite excited about all of this! thank you! ๐Ÿ™‚

          • http://angular-meteor.com/ Urigo

            Wow that’s amazing work!
            I’m really happy and would love to hear your feedback, maybe even in your own blog post

          • roktecha

            yeah definitely. I set up a blog 2d ago to capture some of the tactical stuff (quick how-to’s mostly for my own future reference).

            Maybe something broader around “experience using ionic / Angular and Meteor” to build apps quickly OR how to get started if you’re just starting out OR server deployment options and what some of the ramifications might be (meteor native vs heroku vs aws vs ?) …

            do any of those sound like they’d be interesting?

          • http://angular-meteor.com/ Urigo

            All sounds great!

      • mixersoft

        I’m still using the Ionic CLI, but I put my ionic project under `/path/to/meteor/public` and I can access the webApp at the same location as the server, e.g. using: `http://localhost:3000/index.html`. This seems to allow me to use the Ionic CLI for the frontend, and Meteor CLI for the backend.

    • Raka Adi Nugroho

      how about firebase ? for backend database

      • http://angular-meteor.com/ Urigo

        You can use Firebase with Meteor as well.
        You can connect to Firebase from your Meteor server backend or connect to it from your Angular FrontEnd.
        Maybe I should do a blog post about that as well..

        • http://caravanaweb.com.br juarezpaf

          @Urigo:disqus interact with Firebase using Meteor server backend? Please write this blog post. ๐Ÿ˜€

  • bmlsayshi

    That tutorial was good, but as a meteor user I’m very confused because this seems way more complicated than it needs to be. Can you tell me what advantages were gained by using angular in this situation? Other than being able to use iconic I don’t see any advantages and I see several disadvantages. I’m probably missing something, so I would like to know what I’m not seeing.

    • http://angular-meteor.com/ Urigo

      Well, I personally think that the Meteor build process is the best in the industry right now as a complete solution. there are other interesting tools, like WebPack, but there is nothing that competes with the completeness of Meteor, and there is a chance that in future versions we will use more of WebPack and similar tools under the hood.

      About the FrontEnd Framework, using Angular, Blaze or React – that’s a discussion that could last forever.

      I personally think that Angular 1.x has the most resources and the largest community.

      Blaze is the simplest one. very smart framework and execution.

      React is very powerful, getting a lot of traction and is better architected then Angular 1.x.

      But I think Angular 2.0 is better architected then all of them with better performance.

      Hopefully it will be out soon and we could all be using it.

      You can already start using it here: http://angular-meteor.com/tutorials/angular2/bootstrapping

      • bmlsayshi

        Right, but my question is why would one use angular at all instead of pure meteor? It seemed much messier in this case. What was gained by using angular?

        • http://angular-meteor.com/ Urigo

          Better structure for large frontend application.
          Easier migration to Angular 2.0.
          Existing knowledge in Angular in case you have it.

          • rajkotecha

            I’m new to Meteor and only just learned functional angular and Ionic (over the last several weeks).

            So angular-meteor cuts my start time to consuming meteor services a lot (once I get over the initial hurdles ๐Ÿ˜‰

            For my next app perhaps I’d look at a different route to leveraging ionic … But might be faster to just stick with what I know.

    • hitmantb

      You have to use Meteoric if you want to use Blaze with ionic, which is always going to be behind Ionic itself. Also Blaze is an extremely small community, nobody outside of Meteor uses it, for resume building alone you should pick up Angular or React. Much bigger communities, much easier to Google for answers.

      Now Meteor has official support for both, Blaze is dead in my book.

  • Raka Adi Nugroho

    how to start this project, i like this tutorial now.

    • http://angular-meteor.com/ Urigo

      Click on the links in the post

  • rajkotecha

    This is a real step forward, Meteor is great for making realtime updates easy.

    That said …

    The instructions as stated don’t work. Seem Imran’s comments below which net to the following bower.json file and did work for me:

    {
    “name”: “HelloIonic”,
    “private”: “true”,
    “devDependencies”: {
    “ionic”: “driftyco/ionic-bower#1.1.0”
    },
    “dependencies”: {
    “moment”: “~2.10.6”,
    “angular-meteor”: “1.0.1”
    },
    “resolutions”: {
    “angular”: “1.4.4”,
    “meteor-client-side”: “~1.2.0”
    }
    }

    • http://angular-meteor.com/ Urigo

      I’ve just released angular-meteor 1.0.3 that solves those issues above

      • http://marcel-k.net Marcel-K

        I followed the instructions and ended up with the following bower.json and index.html:

        {
        “name”: “HelloIonic”,
        “private”: “true”,
        “devDependencies”: {
        “ionic”: “driftyco/ionic-bower#1.1.0”
        },
        “dependencies”: {
        “moment”: “~2.10.6”,
        “meteor-client-side”: “~1.2.0”,
        “angular-meteor”: “~1.0.4”
        }
        }

        this gave me the error’s where Package.ecmascript is undefined and ‘meteor-angular’ module could not be found (same index.html as tutorial).

        The bower.json roktecha posted above does work without error.

        Mabe there is a version discrepancy here somewhere?

        • roktecha

          I’ve since updated to 1.0.3 and it worked for me. I haven’t tried 1.0.4 yet.

          • fiq

            my current angular-meteor is 1.0.4. How can i downgrade to 1.0.3 since its got an error on 1.0.4? Thanks in advance

          • roktecha

            See Marcel’s comment above? Notice he has an entry for angular-meteor in his bower file. You should have something like that. You need to change the 4 to a 3. And then run bower update.

            If you’re new to bower just google their basic help. You should find it quite straightforward.

            Hope this helps

          • http://angular-meteor.com/ Urigo

            There is a new 1.2.0 version, should work

  • mardo111

    Hey Urigo!, Great work so far, we love you at the meteor community ๐Ÿ™‚

    One quick question: Do you know if there’s a way to upload to the ionic’s platform and share via ionic view ( http://view.ionic.io/ ) using Meteor’s CLI?

  • http://chattur.co Ross Martin

    Great article and tutorials thank you. Is there any chance SASS support is possible in Ionic using the Meteor CLI and build process? I chimed in on this GitHub issue for the old meteor-ionic package (https://github.com/Urigo/meteor-ionic/issues/57) . I don’t see a repo for the official driftyco:ionic meteor package.

    Thanks!

    • http://chattur.co Ross Martin

      @Urigo:disqus Can you please give some insight on this? Thank you.

  • Eric Sage

    This is really great. Is there a way to make ionic2 work with meteor + angular2? I’d also like to know how to make it all work with es6 instead of typescript.

    • David Castro

      I too would be interested in seeing an example of ionic 2 working with meteor + angular2. If you find anything, please post back.

  • Ignat Galkin

    Hi there! what happens with tutorial for ionic CLI? will it updated or it closed at all?

    • roktecha

      see my response to MichaelR above.

  • MichaelR

    What happened to the ionic cli tutorial? The link is dead…

    • roktecha

      I’m not sure why the link is broken, might just be a mistake. The tutorial is still available here:

      http://www.angular-meteor.com/tutorials/whatsapp/

      @Urigo:disqus: it is concerning that the link is broken, can you get back to us with an update as to whether that’s a bug or an indication of a shift in the direction the project is taking?

      Thanks!

    • T.V. Vignesh

      @michaelreiser:disqus , @roktecha:disqus : I reported an issue here: https://github.com/Urigo/angular-meteor/issues/1537 and now its fixed (after 1 year :P)

  • davy zhang

    Has anyone noticed the 404 of the “Using the Ionic CLI”‘s url which links to http://www.angular-meteor.com/ionic-tutorial/

  • Eddy

    1 417388 error Uncaught Error: argument 2 must be an object, http://localhost:8100/lib/angular-meteor/dist/angular-meteor.bundle.js, Line: 10666

    • Rodrigo

      i’m getting the same error. Any updates?

    • http://www.akro.com.au Rodrigo

      @disqus_ZSXtnMl5of:disqus? have you had any luck in getting rid of this error?

  • http://www.akro.com.au Rodrigo

    Hi Guys! hope you’re all well. Just wondering if anyone has had a chance to look into this issue yet?

    1 417388 error Uncaught Error: argument 2 must be an object, http://localhost:8100/lib/angular-meteor/dist/angular-meteor.bundle.js, Line: 10666

  • kokokenada

    What is the Ionic CLI equivalent to: “meteor run android-device –mobile-server my_app_name.meteor.com” to enable testing and debugging? http://stackoverflow.com/questions/35076386/how-do-you-use-the-ionic-cli-to-debug-a-meteor-app

  • s3v3n

    Thank you for your great tutorial, but why you didn’t complete in the ionic cli tutorial the user profile and send image support? Can we copy this part from meteor tutorial?

  • steeelampe

    Hey, great Tutorial!
    One question remains for me: If you take the Ionic CLI Way, how do you integrate plugins like accounts-facebook, which don’t have a bower install for the client side libs like accounts-password?
    Thanks!

    • roktecha

      I haven’t checked recently so there may be a meteor way to do this.

      Assuming there isn’t, I tried two different frameworks successfully. One was Cordova based and one was client JavaScript based.

      https://github.com/nraboy/ng-cordova-oauth

      https://adodson.com/hello.js/#hellologout

      I went with the latter. (Hellojs).

      The tough parts are:
      1. using Meteor for non-social and hellojs for social. And making sure new users are auto confirmed without sending a confirmation email etc.

      2. Implementing all of the Meteor exception cases for non-social (forgot password, password reset, etc) Esp. Hosting meteor on Heroku.

      I think 2 is always going to be work though … Unless you go with the default Meteor UI

  • http://hunterleaman.com/ Hunter Leaman

    Is it possible to integrate Meteor into an existing Ionic 2 + Angular 2 project?

    • http://angular-meteor.com/ Urigo

      Yes ๐Ÿ™‚
      Check out the updated Ionic 2 Meteor tutorial

  • Anonymous

    I am new to meteor, I am following your whatsapp-ionic-meteor tutorial. But I am unable to send image messages, Although I have written a method to accept images at server side. I have described my issue briefly here :

    http://stackoverflow.com/questions/36664488/match-error-while-accepting-image-at-server-side-using-meteor

    I need help very desperately.. Its related to my academic project, So please help me out as early as possible.. Thank you so much. Please do reply. Thank you! ๐Ÿ™ ๐Ÿ™

  • Youssef

    Wow, nice post!

    Thanks for sharing this.

  • Tchello

    Guys, some one has the app already? If yes, please contact me ASAP skype: mcnacarato.

  • Julio Campos

    What version of IONIC and Meteor were used to build the tutorial of whatsapp
    ?

  • http://angular-meteor.com/ Urigo

    We’ve updated all tutorials to the latest versions and also update the Ionic 2.0 tutorials as well.
    Check it out!