How to set up Meteor Insert AutoForm for inserting data into a collection?

Question

I am trying to create a form with autoform that when I click to submit it inserts a new row (line of data) to a collection. I've found a nice example of what I want on this page but I'm not able to make it works just with the explanation/code they provide.

http://autoform.meteor.com/insertaf

Schemas = {};

Template.registerHelper("Schemas", Schemas);

Schemas.Person = new SimpleSchema({
  firstName: {
    type: String,
    index: 1,
    unique: true
  },
  lastName: {
    type: String,
    optional: true
  },
  age: {
    type: Number,
    optional: true
  }
});

var Collections = {};

Template.registerHelper("Collections", Collections);

People = Collections.People = new Mongo.Collection("People");
People.attachSchema(Schemas.Person);

Meteor.publish(null, function () {
  return People.find();
});

People.allow({
  insert: function () {
    return true;
  },
  remove: function () {
    return true;
  }

---

{{#autoForm id="afInsertDemo" type="insert" collection=Collections.People}}
  <div class="form-group {{#if afFieldIsInvalid name='firstName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='firstName'}}</label>
    {{> afFieldInput name='firstName'}}
    {{#if afFieldIsInvalid name='firstName'}}
    <span class="help-block">{{{afFieldMessage name='firstName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='lastName'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='lastName'}}</label>
    {{> afFieldInput name='lastName'}}
    {{#if afFieldIsInvalid name='lastName'}}
    <span class="help-block">{{{afFieldMessage name='lastName'}}}</span>
    {{/if}}
  </div>
  <div class="form-group {{#if afFieldIsInvalid name='age'}}has-error{{/if}}">
    <label class="control-label">{{afFieldLabelText name='age'}}</label>
    {{> afFieldInput name='age'}}
    {{#if afFieldIsInvalid name='age'}}
    <span class="help-block">{{{afFieldMessage name='age'}}}</span>
    {{/if}}
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary">Add Person</button>
    <button type="reset" class="btn btn-default">Reset Form</button>
  </div>
{{/autoForm}}

I get the following error message:

Template is not defined

Answer 1

Getting started with simple schema and autoform without having a solid understanding of which definitions go on the client-side, server-side or both can be a challenge. In your case, you need to have the schema and collection definitions both on the client and the server. The publish and collection access rules on the server and the templating on the client.

I've created the following meteorpad project to illustrate (pay attention to the '/client', '/server' and '/common' prefixes):

http://meteorpad.com/pad/Xue5BWFwcjyv4QvL2/AF%20Test

This project has a reasonable structure to follow:

https://github.com/matteodem/meteor-boilerplate