Building An App In 45 Minutes With Meteor

Advertisement

The other day, I finally accomplished one of my long-standing goals: to go from one of those “Wouldn’t it be cool…” ideas to a working, live app in less than 1 hour. 45 minutes, actually.

It all started with a design meet-up in San Francisco1. I can honestly say this was the best meet-up I’ve ever been to: Even though it was announced only two days in advance, more than 200 people RSVPed, and a good number of them showed up. It was a great chance to put faces to familiar names, as well as to make new friends.

But I got to talking with so many people that I didn’t have a chance to get contact info for everybody. So, the next day, I asked the organizers about it and they suggested that everyone who attended leave a link to their Twitter account in a shared Google Doc.

That would work, but I was afraid it would prove to be too much effort. If I’ve learned one thing in my years as a designer, it’s that people are lazy. Instead, what if I built an app that lets the user add their Twitter account to a list in a single click?

The app would work something like this:

  1. The user signs into Twitter,
  2. A link to their Twitter profile appears on the page,
  3. That’s pretty much it!

With my list of requirements complete, I set to work to see how fast I could build this, and I thought it’d be interesting to walk you through the process.

At first, take a peek at how the final app looked like:

Our very bare-bones (but working!) app.2
Our final bare-bones (but working!) app.

You can also see a demo of the finished product3, and find the code on GitHub4. (Note: Give it some time to load. Apps hosted on Meteor’s free hosting service often slow down under a lot of traffic.)

A word of warning: This won’t be a traditional tutorial. Instead, it will be a play-by-play walkthrough of how I coded the app in one hour, including the usual dumb mistakes and wrong turns.

Introducing Meteor

I decided to build the app with Meteor5. Meteor is a fairly young JavaScript framework that works on top of Node and has a few interesting characteristics.

The Meteor homepage6
Meteor’s home page

First, it’s all JavaScript, so you don’t need to deal with one language in the browser and another on the server. That’s right: the same language you use to set up jQuery slider plugins can also be used to query your app’s database! The added benefit of this is that your app now has only a single code base — meaning you can make the same code accessible from both the client and server if you need to.

Meteor is also reactive, meaning that any change to your data is automatically reflected everywhere throughout the app (including the user interface) without the need for callbacks. This is a powerful feature. Imagine adding a task to a to-do list. With reactivity, you don’t need a callback to insert the new HTML element into the list. As soon as Meteor receives the new item, it automatically propagates the change to the user interface, without any intervention on your part!

What’s more, Meteor is real time, so both your changes and the changes made by other users are instantly reflected in the UI.

Like many other modern frameworks, Meteor also speeds up your Web app by transforming it into a single-page Web app. This means that instead of refreshing the whole browser window every time the user changes the page or performs an action, Meteor modifies only the part of the app that actually changes without reloading the rest, and then it uses the HTML5 pushState API to change the URL appropriately and make the back button work.

Not having to update the whole page enables another very powerful feature. Instead of sending HTML code over the network, Meteor sends the raw data and lets the client decide how to render it.

Finally, one of my favorite features of Meteor is simply that it automates a lot of boring tasks, such as linking up and minifying style sheets and JavaScript code. It also takes care of routine stuff for you on the back end, letting you add user accounts to the app with a single line of code.

I’ve been experimenting with Meteor for the past six months, using it first to build Telescope127 (an open-source social news app), and then in turn using Telescope as a base to create Sidebar8 (a design links website), and I’ve just released a book9 about it. I believe that, more than any other framework, Meteor helps you get from idea to app in the shortest possible amount of time. So, if all of this has made you curious, I recommend you give it a try and follow along this short walkthrough.

Step 0: Install Meteor (5 Minutes)

First, let’s install Meteor. If you’re on Mac or Linux, simply open a Terminal window and type:

curl https://install.meteor.com | /bin/sh

Installing Meteor on Windows is a little trickier; you can refer to this handy guide10 to get started.

Step 1: Create The App (1 Minute)

Creating a Meteor app is pretty easy. Once you’ve installed Meteor, all you need to do is go back to the Terminal and type this:

meteor create myApp

You’ll then be able to run your brand new app locally with this:

cd myApp
meteor myApp

In my case, I decided to call my app twitterList, but you can call yours whatever you want!

Once you run the app, it will be accessible at http://localhost:3000/ in your browser.

Step 2: Add Packages (1 Minute)

Because I want users to be able to log in with Twitter, the first step is to set up user accounts. Thankfully, Meteor makes this trivially easy as well. First, add the required Meteor packages, accounts-ui and (since we want users to log in with Twitter) accounts-twitter.

Open up a new Terminal window (since your app is already running in the first one) and enter:

meteor add accounts-ui
meteor add accounts-twitter

You’ll now be able to display a log-in button just by inserting {{loginButtons}} anywhere in your Handlebars code.

A more complex version of the accounts-ui widget, as seen in Telescope11
A more complex version of the accounts-ui widget, as seen in Telescope127.

I didn’t want to have to bother with styling, so I decided to also include Twitter Bootstrap with my app.

I went to the Twitter Bootstrap website, downloaded the framework, extracted the ZIP file, copied it to my app’s Meteor directory, and then hooked up the required CSS files in the head of my app’s main file.

Ha ha, not really. What is this, 2012? That’s not how it works with Meteor. Instead, we just go back to the Terminal and type:

meteor add bootstrap

Client Vs. Server

I guess at this point I should briefly tell you more about how Meteor apps work. First, we’ve already established that a Meteor app’s code is all JavaScript. This JavaScript can be executed in the browser like regular JavaScript code (think a jQuery plugin or an alert() message), but can additionally be executed on the server (like PHP or Ruby code). What’s more, the same code can even be executed in both environments!

So, how do you keep track of all this? It turns out Meteor has two mechanisms to keep client and server code separate: the Meteor.isClient and Meteor.isServer booleans, and the /client and /server directories.

I like to keep things clean; so, unlike the default Meteor app that gets generated with meteor create (which uses the booleans), I’d rather use separate directories.

Also, note that anything that isn’t in the /client or /server directories will be executed in both environments by default.

Since our app is pretty simple, we won’t actually have any custom server-side code (meaning that Meteor will take care of that part for us). So you can go ahead and create a new /client directory, and  move twitterList.html and twitterList.js (or however your files are called) to it now.

Step 3: Create the Markup (10 Minutes)

I like to start from a static template and then fill in the holes with dynamic data, so that’s what I did. Just write your template as if it were static HTML, except replace every “moving part” with Handlebars13 tags. So, something like this…

 <a href="http://twitter.com/SachaGreif">Sacha Greif</a></p>

… becomes this:

 <a href="http://twitter.com/{{userName}}">{{fullName}}</a>

Of course, those tags won’t do anything yet and will appear blank. But we’ll match them up with real data pretty soon. Next, I deleted the contents of twitterlist.html and got to work on my HTML. This is the code I had after this step:

<head>
  <title>Who Was There?</title>
</head>
<body>
  <div class="container">
    <div class="row">
    <div class="span6">
      <div class="well">
        <h4>Did you go to the <a href="http://www.meetup.com/Meteor-SFBay/events/115875132/">Designer Potluck</a>? Sign in with Twitter to add your name.</h4>
        {{loginButtons}}
      </div>
      <table class="table">
         <tr>
<td>
  <a target="_blank" href="http://twitter.com/{{userName}}"><img src="{{image}}"/> {{fullName}}</a>

</td>
</tr> 
      </table>
    </div>
  </div>
</div>
</body>

Step 4: Configure Twitter Sign-In (3 Minutes)

You’ll have noticed the {{loginButtons}} Handlebars tag, which inserts a log-in button on your page. If you try to click it right now, it won’t work, and Meteor will ask you for additional information.

You need to fill in your app's Twitter credentials.14
You’ll need to fill in your app’s Twitter credentials. Larger view15.

To get this information, we first need to tell Twitter about our app. Follow the steps on the screen and create a new Twitter app16; once you’re done, try logging in. If everything has worked right, you should now have a user account in the app!

Creating a new Twitter app.17
Creating a new Twitter app. Larger view18.

To test this out, open your browser’s console (in the WebKit inspector or in Firebug) and type this:

Meteor.user()

This will retrieve the currently logged-in user, and, if everything has gone right, it will give you your own user object in return (something like Object {_id: "8ijhgK5icGrLjYTS7", profile: Object, services: Object}).

Step 5: Split It Into Templates (5 Minutes)

You’ll have noticed that our HTML has room to display only a single user. We’ll need some kind of loop to iterate over the whole list. Thankfully, Handlebars provides us with the {{#each xyz}}{{/each}} helper (where xyz are the objects you want to iterate on, usually an array), which does just that.

We’ll also split the code into a few templates to keep things organized. The result is something like this:

<head>
  <title>Who Was There?</title>
</head>

<body>
  <div class="container">
    {{> content}}
  </div>
</div>
</body>

<template name="content">
  <div class="row">
    <div class="span6">
      <div class="well">
        {{loginButtons}}
      </div>
      <table class="table">
      {{#each users}}
        {{> user}}
      {{/each}}
      </table>
    </div>
</template>

<template name="user">
 <tr>
<td>
  <a target="_blank" href="http://twitter.com/{{userName}}"><img src="{{image}}"/> {{fullName}}</a>
</td>
</tr> 
</template>

Step 6: Hook Up Our Template (5 Minutes)

Our template is all set up, but it’s iterating over empty air. We need to tell it what exactly this users variable in the {{#each users}} block is. This block is contained in the content template, so we’ll give that template a template helper19.

Delete the contents of twitterlist.js, and write this instead:

Template.content.users = function () {
  return Meteor.users.find();
};

What we’re doing here is defining Template.content.users as a function that returns Meteor.users.find().

Meteor.users is a special collection created for us by Meteor. Collections are Meteor’s equivalent of MySQL tables. In other words, they’re a list of items of the same type (such as users, blog posts or invoices). And find() simply returns all documents in the collection.

We’ve now told Meteor where to find that list of users, but nothing’s happening yet. What’s going on?

Step 7: Fix Our Tags (5 Minutes)

Remember when we typed this?

<a target="_blank" href="http://twitter.com/{{userName}}"><img src="{{image}}"/> {{fullName}}</a>

The {{userName}}, {{image}} and {{fullName}} are just random placeholders that I picked for the sake of convenience. We’d be pretty lucky if they corresponded to actual properties of our user object! (Hint: they don’t.)

Let’s find out the “real” properties with the help of our friend, the browser console. Open it up, and once more type this:

Meteor.user()

The object returned has all of the fields we need. By exploring it, we can quickly find out that the real properties are actually these:

  • {{services.twitter.screenName}}
  • {{services.twitter.profile_image_url}}
  • {{profile.name}}

Let’s make the substitutions in our template and see what happens.

It works! Our first and only user (you!) should now appear in the list. We’re still missing some fields, though, and only the user’s full name appears. We need to dig deeper into Meteor to understand why.

A Database On The Client

We haven’t really touched on what Meteor does behind the scenes yet. Unlike, say, PHP and MySQL, with which your data lives only on the server (and stays there unless you extract it from the database), Meteor replicates your server-side data in the client and automatically syncs both copies.

This accomplishes two things. First, reading data becomes very fast because you’re reading from the browser’s own memory, and not from a database somewhere in a data center.

Secondly, modifying data is extremely fast as well, because you can just modify the local copy of the data, and Meteor will replicate the changes for you server-side in the background. But this new paradigm comes with a caveat: We have to be more careful with data security.

Step 8: Make the App Secure (1 Minute)

We’ll address data security in terms of both writing and reading. First, let’s prevent people from writing whatever they want to our database. This is simple enough because all we need to do is remove Meteor’s insecure package:

meteor remove insecure

This package comes bundled with every new Meteor app to speed up development (letting you insert data client-side without having to set up all of the necessary checks and balances first), but it is obviously not meant for production. And because our app won’t need to write to the database at all (except for creating new users — but that’s a special case that Meteor already takes care of), we’re pretty much done!

More On Security

While we’re on the topic of security, Meteor apps also come with a second default package, autopublish, which takes care of sending all of the data contained in your server-side collections to the client.

Of course, for a larger app, you probably won’t want to do that. After all, some of the information in your database is supposed to remain private, and even if all your data is public, sending all of it to the client might not be good for performance.

In our case, this doesn’t really matter because we do want to “publish” (i.e. send from the server to the client) all of our users. Don’t worry, though — Meteor is still smart enough not to publish sensitive information, such as passwords and authentication tokens, even with autopublish on.

Step 9: Add Follow Buttons (8 Minutes)

While visitors can now click on a name to go to their Twitter profile, simply displaying follow buttons for each user would be much better. This step took a little tinkering to get right. It turns out that Twitter’s default follow button code doesn’t play nice with Meteor.

After 15 minutes of unsuccessful attempts, I turned to the Google and quickly found that for single-page apps, Twitter suggests using an iframe instead.

This worked great:

<iframe style="width: 300px; height: 20px;" src="//platform.twitter.com/widgets/follow_button.html?screen_name={{services.twitter.screenName}}" height="240" width="320" frameborder="0" scrolling="no"></iframe>

Step 10: Deploy (1 Minute)

The last step is to deploy our app and test it in production. Once again, Meteor makes this easy. No need to find a hosting service, register, launch an instance, and do a Git push. All you need to do is go back to the Terminal and type this:

meteor deploy myApp

Here, myApp is a unique subdomain that you pick (it doesn’t have to be the same as the app’s name). Once you’ve deployed, your app will live at http://myapp.meteor.com. Go ahead and ask a few people to register: You’ll see their Twitter profiles added to the list in real time!

Going Further

Of course, I had to gloss over a lot of key Meteor concepts to keep this tutorial light. I barely mentioned collections and publications, and I didn’t even really talk about Meteor’s most important concept, reactivity. To learn more about Meteor, here are a few good resources:

  • Documentation20, Meteor
    This is a required reference for any Meteor developer. And it’s cached, meaning you can even access it offline.
  • EventedMind21
    Chris Mather puts out two Meteor screencasts every Friday. They’re a great help when you want to tackle Meteor’s more advanced features.
  • Discover Meteor22
    I’m obviously biased, but I think our book is one of the best resources to get started with Meteor. It takes you through building a real-time social news app (think Reddit23 or Hacker News24) step by step.
  • Blog25, Discover Meteor
    We also make a lot of information available for free on our blog. We suggest looking at “Getting Started With Meteor26” and “Useful Meteor Resources27.”
  • Prototyping With Meteor28
    A tutorial we wrote for NetTuts that takes you through building a simple chat app.

I truly believe Meteor is one of the best frameworks out there for quickly building apps, and it’s only going to get better. Personally, I’m really excited to see how the framework evolves in the next couple of months. I hope this short tutorial has given you a taste of what Meteor’s all about and has made you curious to learn more!

(il) (ea) (al)

Footnotes

  1. 1 http://designerpotluck.eventbrite.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2013/05/whowasthere-ss-500.png
  3. 3 http://smashingdemo.meteor.com
  4. 4 https://github.com/DiscoverMeteor/twitterList
  5. 5 http://meteor.com
  6. 6 http://meteor.com/
  7. 7 http://telesc.pe
  8. 8 http://sidebar.io
  9. 9 http://www.discovermeteor.com
  10. 10 http://win.meteor.com/
  11. 11 http://telesc.pe/
  12. 12 http://telesc.pe
  13. 13 http://handlebarsjs.com
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_1_tiny.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_1_tiny.png
  16. 16 https://dev.twitter.com/apps/new
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_2_tiny.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2013/06/sm_meteor_app_2_tiny.png
  19. 19 http://docs.meteor.com/#template_helpers
  20. 20 http://docs.meteor.com
  21. 21 http://eventedmind.com
  22. 22 http://www.discovermeteor.com
  23. 23 http://reddit.com
  24. 24 http://news.ycombinator.com
  25. 25 http://www.discovermeteor.com/blog
  26. 26 http://www.discovermeteor.com/2013/01/30/getting-started-with-meteor/
  27. 27 http://www.discovermeteor.com/2013/02/10/useful-meteor-resources/
  28. 28 http://net.tutsplus.com/tutorials/javascript-ajax/prototyping-with-meteor/

↑ Back to topShare on Twitter

Sacha Greif is the creator of Sidebar, a site+newsletter that gives you the 5 best design links of the day. He has also published Discover Meteor, a book about the Meteor JavaScript framework. You should follow him on Twitter.

Advertising
  1. 1

    Thank you for a wonderful post! Enjoyed it a lot.

    Would love to read about best practices in hosting meteor.js with an independent domain on azure, that supports node.js, for example.

    3
  2. 3

    This is a brilliant and simple idea. Why not start create a Potluck app where folks can easily create their own groups/gatherings that event participants can sign into? Your example is much better than asking everyone to join a Facebook group for example.

    1
  3. 6

    I have been tinkering with Meteor for a couple of weeks and just decided to totally dive in last night. The speed in which you can scaffold a prototype is unbelievable, this will change front end forever!

    0
    • 7

      I remember the beginning of last year when I discovered bootstrap thinking how insanely fast I could now build sites. Now that I can build applications in meteor and wrap them in bootstrap I am getting the feeling that the hardest part of development will be thinking of things to build fast enough!

      1
  4. 8

    this was a great tutorial, much more comprehensive than the docs. Also, the ease of {{loginButtons}} kind of blew my mind. haha

    0
  5. 9

    Great example! Thank you for the resources as well, will probably take a look at your book.

    0
  6. 10

    Daniel Montgomery

    June 13, 2013 8:15 pm

    Thanks for this tutorial. It’s well written and very exciting. I haven’t tried any of the tools here before, but this looks like a great place to jump in and start trying it!

    0
  7. 11

    Daniel Montgomery

    June 13, 2013 8:49 pm

    For step 6, I was getting an error that Template was not defined.

    I changed the code to this,

    if (Meteor.isClient) {
    Template.content.users = function () {
    return Meteor.users.find();
    };
    }

    I’m not sure what this issue was there, but maybe this will help someone if they encounter the same issue.

    Thanks again.

    1
    • 12

      My bad! I actually forgot to mention one key step, which is moving both files (twitterList.html and twitterList.js) to the /client directory. Thanks for pointing it out, I fixed the article.

      0
  8. 13

    I have been working through the Manning Node.js, MongoDB, and Single Page Application books over the last couple weeks. Meteor is amazing looking. I will be starting my first app with these tools probably early next week. It looks like Meteor will be the tool I use to build a rapid prototype. Thanks for this tutorial.

    0
  9. 14

    What are we going to do today Sam? What we do everyday pinky…use meteor to try and take over the world.

    Seriously, mind = blown

    0
  10. 15

    Cassandra Sandquist

    June 14, 2013 4:45 am

    I don’t really know anything about Meteor, so when you said “Delete the contents of twitterlist.js, and write this instead:” I deleted what was in the file and then my app was crashing with a the message:

    Your app is crashing. Here’s the latest log.

    ReferenceError: Template is not defined
    at app/myApp.js:1:16

    Turns out, I shouldn’t have deleted everything but instead read the file and found out that there is two important if statements to differentiate between client and server, d’oh.

    Thanks for the great tutorial!

    0
  11. 17

    I got lost in step 3, setting up the twitter auth component,
    Don’t I need to have my subdomain and deploy at this point?
    What do I put in for my Website and Callback URL?

    But we don’t deploy until step 10.

    thanks!

    0
  12. 19

    I enjoyed playing with meteor a few months ago, and you make me take another look! Thanks for attending it to me again: would love to se your next tutorial.

    When i got to this part:

    “…I went to the Twitter Bootstrap website, downloaded….

    Ha ha, not really. What is this, 2012? That’s not how it works with Meteor. Instead, we just go back to the Terminal and type:

    meteor add bootstrap


    I was laughing so hard I had to (try to) explain it to my wife. ( Which would have taken 45 minutes as well :))

    0
  13. 20

    As a completely unbiased person in terms of Meteor I can definitely say that Sacha’s book Discover Meteor is awesome. I’m about 1/2 way through it and my experience with Meteor has gone from “hey, I can create a prototype with this” to “hey, I can create an entire application with this”. Well written article Sacha. Thanks for what yall are doing for the Meteor community.

    0
  14. 21

    Thanks very nicearticle.
    Just for information `meteor –port ‘custom_port’` to use a different port

    0
  15. 22

    Hey!
    Thank you for a nice intro to Meteor. I have two questions/doubts.
    1. Some of the readers keep saying Meteor is good for rapid prototyping. Does it mean it’s not a good idea to use Meteor in production code in application used by hundreds or thousands?
    2. Will it always be free? If yes, how can I be sure there will be releases in the future? How does anybody earn money on this project? I mean when you decide on a framework you’re gonna use you’d like to know it’s a good and reliable long-term solution.

    0
    • 23

      Ricky Duckworth

      June 18, 2013 12:50 pm

      Having used Meteor for a while now I’m fairly certain that meteor has a good future (unfortunately it’s monopolized now so the likes of Derby.js don’t really have a chance).

      I wouldn’t use Meteor for 100,000’s of visitors yet, no.

      It looks like it will always be free. They secured an $11m funding grant from a technology investor, should keep them going for a while. They have new releases every couple of weeks. http://meteor.com/blog

      I personally love Meteor and believe it’s the future of web development.

      0
      • 24

        They have a plan on how to make money with enterprise software, so don’t worry about that. It’s a model similar to what 10gen is doing with MongoDB.

        And to answer your other question, Meteor hasn’t even reached 1.0 yet, so obviously using it for a major production app at this stage still caries a bit of a risk. So while I do believe Meteor has a bright future ahead of it, it’s perfectly reasonable to prefer waiting until it’s a little bit more mature before using it in a bigger project.

        That being said, since it’s pretty easy to get started with Meteor, I personally think it can’t hurt getting a head start now ;)

        0
  16. 25

    45 Minutes is fast! Thanks for sharing.

    1
  17. 26

    Hi Greif,
    I extremely enjoyed this excellent post. I did never know more about Meteor ever before but it looks great tool for creating app in short span of time. I really liked Meteor and its explain the process of turning a simple HTML wireframe into functional application. Appreciate your writing and step by step guide on building fast apps.

    0
  18. 27

    Nicole Mahramus

    July 9, 2013 6:05 pm

    Sacha, your CSS tutorial was really easy reading and a perusal of this article has inspired me. Especially, you’ve “downloaded” (decreased) my mind’s tech chaos tremendously. Well accomplished! Nicole Mahramus

    0
  19. 28

    This tutorial is very useful, the step by step guide has made me learn more for a small time web designer in Kenya am so pleased, keep it up, good work.

    0
  20. 29

    Great article, I can’t wait for the next part :) So easy!

    0
  21. 30

    Many thanks folks for the thread… But alas it’s way beyond me… The closest I’ve got to programming is MS excel…. Stop laughing …pleassee!!!!
    Anyway have been searching EVERYWHERE for an iPad app that’s the same as a Veh logbook showing the same as a book you buy in a store…. Everything is US ie: IRS, Miles and gallons…. I’m an Aussie (from Australia for those that don’t know) which is ATO, kph and Ltrs
    Can someone please steer me in the right direction. I have books and thousands of pieces of paper that I want to digitise into an iPad app: that’s by Veh, Bus/pvt, kph/ltr etc etc etc
    many thanks in advance
    Chad

    0
  22. 31

    Hello. Thanks for the book, and for this great article. Coming from an HTML5 (Zurb Foundation, which I find better than Bootstrap) and PHP background, I need to wrap my head around this.

    Questions:

    1. It looks like Meteor is good for “apps” but not for websites. The code source seems to have nothing in the BODY tag. Is this SEO friendly? For websites powered by WordPress for example, I doubt Meteor is going to be a replacement anytime soon. Is this accurate? (A google for this comes up with the “spiderable” app, which is a hash tag, but Google won’t appreciate this thanks to the “content duplication” principle–we can’t have one version shown to users and another to spiders. So I am looking for something that is natively, naturally SEO friendly)

    2. Given that I have to learn this whole new world of Meteor or Derby or Sails, do you think Meteor is the best suited now?

    3. How easy is it to wrap Meteor based “apps” into mobile apps? That’s a key consideration for us. With the likes of Cordova or PhoneGap, we can do that with HTML5 apps, but Meteor might be faster I suppose if done right. Are there any examples of this?

    Thanks!

    0
  23. 32

    Hi, Many thanks for the great tutorial. Such a great thread to start learning meteor. Everything’s working fine to me till step 3, then I am stuck

    Putting the piece of code as suggested in the picture into twitterlist.html file does not return any appearance result in my browser, the screen is totally blank. However, if I remove the “moving part” (Handlebars) as you stated, which is, in this case, {{loginButtons}} or {{fullNam}} in the code, it shows only the static html part, like the “Did you go to the Designer Potluck? Sign in with Twitter to add your name.” phrase. Then I re-add the Handlebars, the browser shows nothing again.

    Was I missing any packages that are supposed to be installed? Or was I configuring meteor incorrectly?

    Thanks in advance.

    0
  24. 33

    Nice tuto, thx you !!

    There is a mistake in source code of the third step :

    {{loginButtons}} should be {{> loginButtons}} as it refers to a template.

    4
  25. 34

    Had the demo working locally but on updating to Meteor 0.9 it’s not rendering. Any ideas?

    3
  26. 35

    I’m seeing different and non-working results when following this tutorial using Meteor 0.9.4. Is there any chance you could update this tutorial? It would be hugely appreciated for a completely new Meteor user. (I’ve been using headless Debian but I can’t get it to work on a fresh install due to a MongoDB error, so am having a number of frustrations trying to get it working.) Also, a minor thing like ‘meteor add bootstrap’ installing Bootstrap 2.x instead of the current stable 3.2 would be beneficial to new users also.

    Thanks for a great tutorial. :)

    0
    • 36

      It works also with meteor 0.9.4, if you pay attention to:
      – use {{> loginButtons}} instead of {{loginButtons}} as mentioned in some comment
      – if you split in multiple templates, attach the “users” helper to the template with the {{#each}} tag (in the article is still “content”, but that’s up to you)

      One thing, seems that accounts-twitter, without autopublish on, publish only the profile.name and not the services.twitter object… so no img nor twitter id.
      Anyone found some documentation on how to configure which data is passed to the client?
      I played a bit with Accounts.addAutopublishFields() but no luck.

      0
      • 37

        At the end I managed by adding:
        Meteor.publish(null, function() {
        return Meteor.users.find()
        });
        as it’s done by the accounts-base package code…

        Still don’t understand why
        Meteor.publish(“users”, function() {
        return Meteor.users.find()
        });
        don’t work :/
        don’t work… :/

        0
  27. 38

    Thank you for your post.
    I made a tool called watho (watho.net) to find a job and work at home.

    0
  28. 39

    Awesome. I’m gonna try building an app now with Meteor! :D

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top