Meteor.js - is the full stack JavaScript web framework that is accessible to all coding skill levels. Especially for beginners.


It has just been released in a fully featured release candidate form for the Windows Operating System.


In recognition of this achievement, this article will show you the simple steps if you're starting out on Windows.

Pre-Requisites:

  • Basic HTML/CSS Understanding.
  • Sublime Text 3 (or any text editor).

Let's Begin:

Step 1) Install the Meteor.js Platform onto your computer

Github hosts the Windows Meteor Preview Release at:

https://github.com/meteor/meteor/wiki/Preview-of-Meteor-on-Windows

Download and install the platform. (Current version 1.1 RC)

Step 2) Create a new Meteor Application:

Open up a command prompt. "cmd.exe" from your windows desktop search and enter:

        > meteor create myFirstApp

Step 3) Navigate to the project application:

        > cd myFirstApp

Step 4) Run the Application:

        > meteor

Ok - Now you have created a base meteor application using the command line (The application is a simple Button Click Counter) .
And you can view the application in your browser at the following URL: http://localhost:3000

To Exit your App hit ctrl-c (x2) twice.

        > ctrl+c

Time to view your full application in a Text Editor - like Sublime Text or Atom.
Drag your new project folder (it is likely to be inside your Hard Drive inside the C:\Users\username\ directory) into one of these Text Editors or a Dev Environment like Visual Studio.

You should see:

sublime-text


This gives you an overview of all your Meteor project files.

Let's take a quick look at the files themselves:
myFirstApp.htmlThis is the html file which gives you the view of the application. i.e. what you see in the browser when you navigate to localhost:3000. You don't need to include Doctype or html tags as the Meteor Platform adds these later at build time. Note the special {{> hello}} expression. This refers to the template defined below the body and tells the application to replace it with the template that is labelled 'hello'.

myFirstApp.js This file contains the JavaScript Code that controls the dynamic behaviour of the application. The code is split into 2 sections. Meteor.isClient and Meteor.isServer that contains JavaScript that runs on the client (browser) and server respectively. Feel free to ignore/delete lines 19-23 as there is no relevant code inside there.

The client code lines 1-17 contains 2 major components. Helper functions (lines 5-9) that dictates dynamically what gets sent back to the html to be seen by the user and event handlers (lines 11-16) that determine how to handle interactions by the user in the browser.

myFirstApp.css This is where you declare your CSS for styling your HTML views. Including formatting, colouring and effects. Currently this file is empty as no CSS has been declared

Step 5) Let's create the required folders for a typical project structure, move the files and edit the code so your application doesn't break. Although there are no hard rules, in a typical Meteor Project you will want to split your project files into 3 main categories:

client (client files)
server (server files)
lib (shared folder)


Let's create those 3 folders inside your myFirstApp directory inside windows explorer.

The 3 files (myFirstApp .html/.css/.js) we should now move to the client folder as these were initially client specific files.

Ok - now that you have moved the files to the client folder, your application will now break and not run. This is because you have to remove the Meteor.isClient wrapper from the JavaScript file.

Edit your myFirstApp.js file to make it look like this:

        // counter starts at 0
        Session.setDefault('counter', 0);

        Template.hello.helpers({
          counter: function () {
            return Session.get('counter');
          }
        });

        Template.hello.events({
          'click button': function () {
            // increment the counter when button is clicked
            Session.set('counter', Session.get('counter') + 1);
          }
        });

This should resolve the code the issues that arise by moving the files into project directories.

Step 6) Now you are ready to build out your basic application further.

Start by Editing the HTML to make a Static Page with the structure and content that you want. If you need advice on doing this. Codecademy's HTML Tutorial is a good starting point.

Add the CSS that you need or use a front-end css framework like bootstrap to make your static page look better.

Next step in your progression is to then understand Live HTML Templating at Blaze's documentation to make your static page more dynamic using the Expressions .

Keep on Learning!