Category

Category: Meteor

Using Angular Material with Meteor

When I first started developing mobile applications with Meteor, I struggled a little bit trying to figure out how to integrate Angular Material to my application. After some extensive research, I was finally able to integrate Angular Material. The steps bellow worked for me

  1. Create a meteor app:
    • $ meteor create my-simple-app
  2. Navigate to the project:
    • $ cd my-simple-app
  3. Install node modules:
    • $ meteor npm install
  4. Check if project is working by running:
  5. To use Angular in our app, we first need to remove the default UI package of Meteor, called Blaze. We remove it by running:
    • $ meteor remove blaze-html-templates
  6. Now we need to replace it with UI package for angular:
    • $ meteor add angular-templates
  7. Update the code in file client/main.html
    1
    2
    3
    4
    5
    6
    7
    8
    <head>
        <title>My Simple App</title>
    </head>
    <body>
        <div class="container" ng-app="my-simple-app">
            /* Your angular material code goes in here */
        </div>
    </body>
  8. Update the code in file client/main.html
    1
    2
    3
    4
    5
    6
    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
     
    angular.module('my-simple-app', [
        angularMeteor
    ]);
  9. Before we can Install angular-material, we need to install its dependencies first:
    • $ meteor npm install angular-aria –save
    • $ meteor npm install angular-animate –save
  10. Then we now install Angular Material
    • $ meteor npm install angular-material –save
  11. In client/main.html, we include angular-meteor CSS within the head tag
    1
    2
    3
    4
    <head>
        <title>My Simple App</title>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    </head>
  12. Next, we want to inject the angular-material module into our Angular application. Update client/main.js code to:
    1
    2
    3
    4
    5
    6
    7
    8
    import angular from 'angular';
    import angularMeteor from 'angular-meteor';
    import ngMaterial from 'angular-material';

    angular.module('myApp', [
        angularMeteor,
        ngMaterial
    ]);
  13. That’s it, now we can use angular-material in our application layout.

Deploying Meteor App to Heroku

Follow the steps bellow to get this project running on Heroku for your personal testing.

Required softwares:

  1. Upload your project to Github.
  2. Clone github project to your computer.
    • $ git clone https://github.com/ACCOUNT_USERNAME/NAME_OF_PROJECT.git
  3. Navigate to the cloned folder.
    • In windows: $ cd meteor-app-todo-list
  4. $ heroko login
    • Fill up credentials
    • If you do not have an account yet, you can register for one at http:/heroku.com
  5. $ heroku apps:create NAME_OF_PROJECT
    • Creates the project depending on the name provided.
  6. Set Buildpack for Heroku Instance
    • $ heroku buildpacks:set https://github.com/AdmitHub/meteor-buildpack-horse.git
      • Meteor needs a buildpack in order to be executed by the Heroku dyno manager. As Heroku’s cedar stack has no default language/framework support, the buildpack determines the framework for us. Unfortunately, Heroku does not have official Meteor support. To get around this, we will use a third-party custom buildpack.
  7. Create a new mongodb instance
    • $ heroku addons:create mongolab:sandbox
  8. Add Environment Variables in heroku:
    • $ heroku config:add MONGO_URL=<MONGODB_URI value>
      • You can get MONGO_URL by running: $ heroku config
    • $ heroku config:add ROOT_URL=https://NAME_OF_PROJECT.herokuapp.com
  9. Check if we can push to heroku:
    • $ git remote -v
      • Should give you a list of git URLS (github and heroku github).
      • if heroku link is not in the list, you can manually add it like this:
        • $ git remote add heroku https://git.heroku.com/NAME_OF_PROJECT.git
  10. Deploy our code:
    • $ git push heroku master

Optional

  • Deploy app to your mobile device using Heroku project URL as server:
    $ meteor run android-device –mobile-server https://YOU_HEROKU_APP_SLUG.herokuapp.com/