Introduction
meteor.js is a library that allows you to make real-time web applications from start to finish without any other supporting libraries or tools. When you install meteor.js, you get everything you need to develop both the client and server side of your application. That’s quite a big deal in this age of being faced with having to cherry pick from the many client/server-side technologies available today for your application.
The downside to using meteor.js is that it requires a server to be running the meteor process. So if you have any sort of VPS (Virtual Private Server) hosting (HostMonster, DreamHost, etc), then you may need to build your meteor app elsewhere.
For the sake of this post, we will be deploying to meteor’s free development hosting option.
Installing
From your terminal of choice (mac, SSH, etc), simply install meteor.js via curl like so:
curl https://install.meteor.com/ | sh
For windows, you can download the installer https://www.meteor.com/install. If you are doing this in a shared environment, such as a site on HostMonster, you’ll end up with a warning message with a few options.
Couldn't write the launcher script. Please either:
(1) Run the following as root:
cp "{Environment Specific Path}/.meteor/packages/meteor-tool/1.0.35/meteor-tool-os.linux.x86_64/scripts/admin/launch-meteor" /usr/bin/meteor
(2) Add "$HOME/.meteor" to your path, or
(3) Rerun this command to try again.
Typically, due to not having root access, your best bet is #2. Note: the areas bolded above may be different in your environment. Adjust accordingly. To do this, type this in your terminal window:
PATH=$PATH:$HOME/.meteor
You can test this right away by typing meteor in your terminal. If you were successful, it will give you a warning about not being in a project directory. This only changes the path for this particular terminal session. If you want to make it more permanent, you can edit your .bashrc file. My .bashrc file is located at ~/.bashrc and look something like this after adding the meteor path to it.
alias php="php-cli" export HPATH=$HOME export PATH=$PATH:$HPATH/.meteor
Deploy Your First meteor.js Application
Navigate to the directory you want to create your first meteor.js application. In my case, I created a subfolder in my public_html directory. Once there, create your first app:
meteor create project-name
meteor.js will do it’s thing and after a few seconds, your barebones meteor app will be ready to go. By default, meteor will create a build directory (.meteor), and html, css, and js files. Depending on your meteor version you may get slightly different contents in your html/js.
At this point you can deploy your project to meteor’s free hosting by typing
meteor deploy project-name.meteor.com
and after a few prompts, your project will be visible at http://project-name.meteor.com.
Applying Some meteor.js Fundamentals
Once you’re done basking in the glory of your first published meteor app, we will start poking at the html/js files. In your html file, you will see an example of meteor’s template structure.
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
{{> hello}} will output the contents of everything inside of <template name="hello"></template>. Inside the hello template that there is a template variable named greeting. This corresponds to some code in the project-name.js file.
if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to demo.";
};
...
}
You can have regular javascript variables, but in order to make it a template variable it can be created a variety of ways.
Template.hello.greeting = function() {
return 'This is a greeting';
}
//-- standard javascript variable
var foo = 'This is foo.';
//-- ..turned template variable
Template.hello.foo = function() {
return foo;
}
Template.hello.sum = function() {
a = 2;
b = 2;
c = (a + b);
return c;
}
One of the most efficient ways is to create template variables via helpers.
Template.hello.helpers({
list: [{'label': 'One' }, {'label': 'Two'}, {'label': 'Three'}],
sum: function() {
return (2+2);
}
});
Once we have some template variables defined, we can output them in our template. Depending on the kind of variable, we can do this a few ways. Using our example variables above, our modified template could look like this;
<template name="hello">
<h1>{{greeting}}</h1>
<ul>
{{#each list}}
<li>{{label}}</li>
{{/each}}
</ul>
<h3>{{sum}}</h3>
<p>{{foo}}</p>
</template>
Since list is an array of objects, we can use meteor’s {{#each}} to iterate through it and output each item’s properties.
Now you have the basics of meteor.js down. Keep in mind that meteor.js excels at real-time applications. Chat rooms, messaging, anything the could benefit from live data. As web applications start to mature past the already robust features of AJAX/REST driven development, meteor.js could be one of the key players in the next stack of web development.