Meteorjs

Meteor SEO

§
by
Jesper bisgaard

Once its time to go live with your meteor site, you want to make sure search engines can crawl your site and are aware of all your content. For this to work properly there are a few things you need to setup.

First of all have a look at meteors guide to setting up prerender this service will provide a cached version of your pages and store it for 14 days or until you clear the cache. When a crawler accesses your site prerender will serve the cached page instead of the meteor page. This helps you make sure everything crawlers knows what content you have on your pages.

In your settings.json file in the root of the meteor project your just add the following config to get prerender setup. If you don't have a settings.json this is the time to create it. You properly want one for your production environment as well, this could be settings-production.json.

"PrerenderIO": {
  "serviceUrl": "http://service.prerender.io/",
  "token": "xxxxxxxxxxxxx"
},

The next step is setting up you sitemap. For this i have used the excellent package gadicohen:sitemaps which can be found on atmospherejs. Its easy to setup and has great options for customizing you sitemap. My site map has been setup very basic but does the job. You add a sitemap.js to your server folder, which servers your sitemap config, here is mine as an example.

sitemaps.add('/sitemap.xml', function() {
  // required: page
  // optional: lastmod, changefreq, priority, xhtmlLinks, images, videos
  return [
    { page: '/', lastmod: new Date(), changefreq: 'monthly' },
    { page: '/our-service', lastmod: new Date(), changefreq: 'monthly' },
    { page: '/about-us',
      lastmod: new Date(),
      changefreq: 'monthly',
    },
    { page: '/faq', lastmod: new Date(), changefreq: 'monthly' }
  ];
});

Now we will add our robots.txt, for this I have used gadicohen:robots-txt its as simple as adding the package and your are done. If you want you can add more lines to the robots.txt file using the command:

robots.addLine('line');

Finally we properly want to add google tracking either as analytics or tag manager. I personally prefer Google Tag Manager since it allows me to add additional scripts without having to maintain the code in my repository so for this I have used the package fuww:google-tag-manager and set it up by adding the following to my server script:

addGoogleTagManager('GTM-XXXXXX');

And your are ready to tackle the we.

I hope this was helpfull, if you have any comments catch me on twitter and lets chat.

Meteor dropdown

§
by
Jesper bisgaard

In a recent project I had to add a dropdown in meteor and found that there where a few tricks to going about it, so I thought I would share it here for anyone who might need it. Setting up the dropdown was fairly easy but making the functionality work had a few twists that I want to share with you guys. In my case I wanted to build a dropdown which displayed a form which allowed the user to update some content.

Again I am going to use Bulma which has become my prototyping framework of choise as of late. Its super easy to work with and has a lot of great predefined templates. So a big shoutout to the people behind Bulma.

First lets setup our dropdown with the form inside.

Bulma has an excellent dropdown template which we will use for this.

<template name="dropdown">
  <div class="dropdown">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
        <span>Content</span>
        <span class="icon is-small">
          <i class="fa fa-angle-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu2" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          Here we will add our form.
        </div>
      </div>
    </div>
  </div>
</template>

Now we have the dropdown setup, so lets add the form. This is just a simple form for signing up for a news letter and again we are using bulmas form templates.

<template name="dropdown">
  <div class="dropdown">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
        <span>Content</span>
        <span class="icon is-small">
          <i class="fa fa-angle-down" aria-hidden="true"></i>
        </span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu2" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          <div class="field is-grouped">
            <label class="label">Subscribe to newsletter</label>
            <div class="control has-icons-left has-icons-right">
              <input class="input" type="email" placeholder="Enter your email">
              <span class="icon is-small is-left">
                <i class="fa fa-envelope"></i>
              </span>
              <span class="icon is-small is-right">
                <i class="fa fa-check"></i>
              </span>
            </div>
            <p class="control">
              <a class="button is-info">Submit</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Now that we have this setup we need to add some functionality to the meteor application for it to work. The first thing we need to do is switch the is-active class on the dropdown wrapper. I did this by adding a state to the meteor element containing the dropdown. If you are not familiar with how this is done in meteor you can read about state management here. First we add the ReactiveVar library which we can use to store temporary data for the client side.

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Then we need to setup the new ReactiveVar state object. We will do this in the onCreate hook which is invoked when the element is created on the page.

Template.dropdown.onCreated(function bodyOnCreated() {
  this.active = new ReactiveVar();
});

Now that we have the ReactiveVar setup we can create the event which will set the value when a user clicks the dropdown.

We do this by adding a new event to the blaze template and let it activate on the click of the button.

Template.dropdown.events({
  'click button'(event, instance) {
    // toggle the active variable.
    instance.active.set(!instance.active.get());
  },
});

Now that the ReactiveVar is being toggled between true and false, we can add the last bit, where we use the active state and add the is-active class if the user has clicked the dropdown button.

First we add a helper function to the blaze template.

Template.dropdown.helpers({
  isActive() {
    return Template.instance().active.get();
  },
});

We can then use this helper function to determine if the is-active class should be applied to the dropdown template.

<div class="dropdown {{#if isActive}}is-active{{/if}}">
    ...
  </div>

On the dropdown wrapper we add a new if statement which checks if the helper function returns true and if so we add the is-active class.

There we have the it, we have now created a dropdown using meteor and bulma.

You can see the code at my github repo.

Meteor modal

§
by
Jesper bisgaard

I recently had to create a modal pop up in Meteor js, which proved to be quite easy so I thought I might share the solution here.

For handling modals I used the exellent library anti:modals which handles opening and closing the modals on a page. Now you just have to hook up the content for the modal and you are ready to rock!

Once you have added the library to your meteor site you can go ahead and add your modals.

First you setup the modal template, I am using Bulma for markup and styling in this example.

I have created a template file editExample.html

<template name="editExample">
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Edit example</p>
        <button id="close-edit-modal" class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <form class="edit-example">
          <div class="field is-horizontal">
            <div class="field-label is-small">
              <label class="label" for="name">New example</label>
            </div>
            <div class="field-body">
              <div class="field">
                <p class="control is-expanded">
                  <input class="input is-small" type="name" name="name" placeholder="New example" value="{{example}}" />
                </p>
              </div>
            </div>
          </div>
          <div class="field is-horizontal">
            <div class="field-label">
              <!-- Left empty for spacing -->
            </div>
            <div class="field-body">
              <div class="field">
                <div class="control">
                  <input class="button is-primary is-small" type="submit" value="Save"/>
                </div>
              </div>
            </div>
          </div>
        </form>
      </section>
    </div>
  </div>
</template>

In this file we setup the html markup for our modal popup.

Now the next think we have got to do is create the functionality for this template. So we will create an editExample.js file.

import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';

// Import the template.
import './editExample.html';

// Store the example being passed to the modal.
Template.editExample.onCreated(function () {
  this.example = this.data.example;
});

// Setup event handling.
Template.editExample.events({
  // Clicking the close button.
  'click #close-edit-modal'() {
    // Close all active modal windows.
    AntiModals.dismissAll();
  },
  // Submitting the form in the modal window.
  'submit .edit-example'(event) {
    // Prevent default browser form submit.
    event.preventDefault();

    // Get value from form element.
    const target = event.target;
    const name = target.name.value;

    // Insert a expense into the collection.
    Meteor.call('example.update', this.example._id, name);

    // Clear form.
    target.name.value = '';

    // Close all active modal windows.
    AntiModals.dismissAll();
  },
});

Now we are ready to start using our modal popup.

In order to display your modal popup, we need to add a few things to a page or component.

First we need to import the new modal component.

import '../modal/editExample';

Next we add a button which will trigger an event. So in the html template where we want to use our modal we add:

<a class="button edit-example">Edit example</a>

And as the last piece of the puzzel we add the action which invokes the modal:

'click .edit-example'(e) {
  e.preventDefault();
  AntiModals.overlay('editExample', {'data': {'example': this}});
}

And thats it. A very simple library for displaying modal popups in meteor.

Subscribe to Meteorjs