Starting With MeteorJS
Recently I started to switch my projects to javascript programs. I discovered meteorJS which seems a good option to develop web apps.
Installing meteorjs
- Linux/OSx: Run the command: curl https://install.meteor.com/ | sh
- Win: Download the installer and install it
Starting a new project
Type "meteor create appname" in your desired folder. The project consist of 3 files: appname.js, appname.html and appname.css. To start the server go to in the created folder and type "meteor".
Collections
MeteorJs is using MongoDb which is already packed inside the framework, so there is no need to install something for that. Let's start creating a site to hold a bunch of sites. For the beginning we clean up the existing code removing the existing dummy functionality. We'll have something like this:
sites.css:
// this is an empty file
sites.js:
// for the moment not much here:
if (Meteor.isClient) {
// this executes in the client, but nothing here
}
if (Meteor.isServer) {
// this executes in the client, but nothing here
}
sites.html:
<head>
<title>Sites</title>
</head>
<body>
<h1>Sites</h1>
{{>sites}}
</body>
<template name="sites">
<p>This template will display a list of sites</p>
</template>
You can notice the only thing we did was to create a template which display a simple text and to render it using {{>sites}} inside the main html code.
Collections
In this step we are going to create a collection to hold our list of sites.
In the js file we add the following:
- code to define the mongo collection called "sites"
- in the isClient we bind the mongo collection to the template, so the template knows the collection
- we add a new function to the Meteor.startup which gets executed when the server starts. This function is checking if the mongo sites collection contains some data. If none is found it's adding some default data to the collection
// defines the collection
Sites = new Mongo.Collection("sites");
if (Meteor.isClient) {
// bind the mongo collection to the template
Template.sites.helpers( { sites:Sites.find() } );
}
if (Meteor.isServer) {
Meteor.startup(function () {
if (Sites.find().count() == 0){
Sites.insert( { name:"www.meteor.com", description:"Official Meteor Site" } );
Sites.insert( { name:"factorypattern.com", description:"Programming Tutorials" } );
}
console.log( "Adding default sites in Meteor.startup " + Sites.find().count() );
});
}
We also have to modify the template inside the html file:
<head>
<title>Sites</title>
</head>
<body>
<h1>Sites</h1>
{{>sites}}
</body>
<template name="sites">
{{#each sites}}
<div>
{{name}}
{{description}}
</div>
{{/each}}
</template>
Styling the project using bootstrap
Meteor provides an easy way to add new modules to the projects. Instead of copying files manually you can simply use the command "meteor add packagename" to install new packages. You can explore the repository online to look up for packages on atmospherejs.com. We can simply add bootstrap using "meteor add twbs:bootstrap"(details about the package here).
Once we added bootstrap we can style the our list using bootstrap tags.
Adding sites using bootstrap modal dialog
Let's add a new template and render it before rendering the sites templete {{>addsite}}:
<template name="addsite">
<form>
<input type="text" name="name"/><br/>
<input type="text" name="description"/><br/>
<button class="btn btn-success">Save</button>
</form>
</template>
We re going to add now some jquery code to