Meteor Cheatsheet Basic Concepts

meteor-cheat-sheet

meteor create simple-todos

The above command will create a new folder called simple-todos with all of the files that a 
Meteor app needs:

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

To run the newly created app:

cd simple-todos
meteor  // Starts our application on port 3000.  Point your browser to http://localhost:3000

We can play around with this minimal app.   Try editing the text inside client/main.html using
our favorite text editor.  When we save the file, the page in your browser will automatically 
update with the new content. We call this "hot code push".

To start working on our todo list app, remove the body from our HTML inside client/main.html 
leaving just the <head> tag:

<head>
  <title>simple</title>
</head>

Create a new directory with the name imports inside simple-todos folder.Then we create some 
new files in the imports/ directory (imports/ui/body.html):

<body>
  <div class="container">
    <header>
      <h1>Todo List</h1>
    </header>

    <ul>
      {{#each tasks}}
        {{> task}}
      {{/each}}
    </ul>
  </div>
</body>

<template name="task">
  <li>{{text}}</li>
</template>

Create a new file imports/ui/body.js:

import { Template } from 'meteor/templating';
import './body.html';

Template.body.helpers({
  tasks: [
    { text: 'This is task 1' },
    { text: 'This is task 2' },
    { text: 'This is task 3' },
  ],
});

Inside our front-end JavaScript entry-point file, client/main.js, we remove the rest of the 
code and import imports/ui/body.js:

import '../imports/ui/body.js';

Notice that inside the body.js file, we import the body.html template file, and then we 
import the body.js file into the main.js file.

In the above code, we defined a helper method named 'tasks' which returns an array of 
tasks.  And inside the body.html template file, we defined two things, the body tag and 
a template named 'task'.  Inside the body tag, we iterate over the array returned by 
the task helper function, and use the task template to display each element of the array.

Meteor parses HTML files and identifies three top-level tags: <head>, <body>, and 
<template>.  Everything inside any <head> tags is added to the head section of the HTML 
sent to the client, and everything inside <body> tags is added to the body section, just like 
in a regular HTML file.  

Everything inside <template> tags is compiled into Meteor templates, which can be included 
inside HTML with {{> templateName}} or referenced in your JavaScript with 
Template.templateName.  Also, the body section can be referenced in your JavaScript with 
Template.body. Think of it as a special "parent" template.

All of the code in your HTML files is compiled with Meteor's Spacebars compiler. Spacebars 
uses statements surrounded by double curly braces such as {{#each}} and {{#if}} to let you 
add logic and data to your views.

We can pass data into our templates from our JavaScript code by defining helpers. In the code 
above, we defined a helper called tasks on Template.body that returns an array. Inside the body 
tag of the HTML, we use {{#each tasks}} to invoke the helper method, and iterate over the 
result array and run the task template for each value. Inside the #each block, we can display 
the text property of each array item using {{text}}.

To style our application, we can put our CSS code inside the client/main.css file or we can 
put it inside the public folder and reference it inside our our main.html file.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License