Essential Meteor Tips | Envato Tuts+

The Meteor project is an open-source web app development platform that enables you to create apps written entirely in JavaScript.

Meteor provides development tools for essential web app needs, making it naturally suitable for start-ups and new projects in general. It offers features such as deployment to many devices from one code base (iOS, Android, Desktop), with hot push updates supported out of the box.

This means that you can update the app on the user's device, without waiting for App Store approval. The wealth of packages available via npm and its own Atmosphere library make Meteor an interesting tool to work with.

Rapid Development in Meteor

One of the main reasons I started using Meteor, three years ago now, was the rapid ability it has to deliver a working web app within hours. It enabled me to deliver for my clients' high expectations and their pre-first-round funding budget.

Finally, with this web framework that can accommodate big ideas with humble beginnings, top-quality reactive mobile web apps are within the reach of a single-person development team.

NPM + Atmosphere Packages

Any package from npm is available in Meteor, so if you like using tools like Grunt, Browserify, Webpack, Bootstrap, React, jQuery and Angular, you will have no issues using these in Meteor.

To search for new packages:

For npm packages, use npmjs.com.
For Meteor packages, use atmospherejs.com.

To install an npm package in Meteor, just run:

1	$ meteor npm install --save browserify

Running this command will update your package.json with the dependency, and also download the package into your app’s local node_modules/ directory.

Version Control

An important note: For portability, I recommend you don’t commit the node_modules/ into git, and on passing to a new developer instead ask them to run meteor npm install, which will install all of the packages required.

User Accounts

The accounts-ui package enables users to log in and register for the app, and it also gives oAuth support, interfacing it with Meteor Accounts.

For brand and communication purposes, customizing the email verification (sendVerificationEmail) or invitations (sendEnrollmentEmail) to fit the overall theme of the app is a common request.

A great way to do HTML email in Meteor is to use the pretty emails package by yogiben.

1	meteor add yogiben:pretty-email

Now you can change the verification email with just a few lines:

1	PrettyEmail.defaults.verifyEmail =
2	heading: 'Yo - You Need to activate your account on mega mushrooms'
3	buttonText: 'Activate'
4	...

For your company information, you can configure PrettyEmail.options like so:

PrettyEmail.options =
  from: 'support@mycompany.com'
  logoUrl: 'http://mycompany.com/logo.png'
  companyName: 'myCompany'
  companyUrl: 'http://mycompany.com'
  companyAddress: '123 Street, ZipCode, City, Country'
  companyTelephone: '+1234567890'
  companyEmail: 'support@mycompany.com'
  siteName: 'mycompany'

To send the email out, use the following methods:

1	Accounts.sendVerificationEmail Meteor.userId()
2	Accounts.sendResetPasswordEmail Meteor.userId()
3	Accounts.sendEnrollmentEmail Meteor.userId()

If you want to add a template, you can do so by customizing the following options:

PrettyEmail.send 'call-to-action',
  to: 'myuser@myuser.com'
  subject: 'You got new message'
  heading: 'Your friend sent you a message'
  message: 'Click the button below to read the message'
  buttonText: 'Read message'
  buttonUrl: 'http://mycompany.com/messages/2314'
  messageAfterButton: "I come after the button!"

Changing styles is also very easy:

PrettyEmail.style =
  fontFamily: 'Helvetica'
  textColor: '#606060'
  buttonColor: '#FFFFFF'
  buttonBgColor: '#007FFF

Here is an example of the activation email the user will receive in their email client.

Pretty email has a whole ton more options for social, back links, the header and footer and so on—read more on the manual page.

Ratchet, Materialize and Bootstrap Support

There are also user accounts packages for each of these popular front-end libraries, as well as Ionic. Each can be fully configured to meet your needs.

Ratchet: meteor add useraccounts:ratchet
Ionic: meteor add useraccounts:ionic
Bootstrap: meteor add useraccounts:bootstrap
Materialize: meteor add useraccounts:materialize

UI

Similar to the user accounts, there are packages available for popular front-end libraries like Bootstrap, Angular, React and the Blaze template engine, along with many others such as Semantic UI.

Searching on atmosphere yields many results; here are some of my favorites:

Angular Packages: angularui
Semantic UI integration: Semantic-UI-Meteor
Blaze Components (reusable components for blaze): blaze-components
Ionic Components: meteoric:ionic
Ratchet Framework: pcjpcj2:ratchet

React + Bootstrap

You will need to have installed the React npm packages first with:

1	$ npm install --save react react-dom
2	$ npm install --save react-bootstrap

Now, for the meteor package, run meteor add universe:react-bootstrap.

You can use Bootstrap components within your React JSX now:

const buttonsInstance = (
  <div>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="large">Large button</Button>
      <Button bsSize="large">Large button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary">Default button</Button>
      <Button>Default button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="small">Small button</Button>
      <Button bsSize="small">Small button</Button>
    </ButtonToolbar>
    <ButtonToolbar>
      <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
      <Button bsSize="xsmall">Extra small button</Button>
    </ButtonToolbar>
  </div>
);

ReactDOM.render(buttonsInstance, mountNode);

Page Transitions

If you are using Iron Router then you can utilise the meteor-transitioner package. Working on your Blaze template, add the following handlebars around your {{yield}}:

1	{{#transitioner}}
2	{{> yield}}
3	{{/transitioner}}

Now set the transition between routes:

Transitioner.transition({
    fromRoute: 'fromRouteName',
    toRoute: 'toRouteName',
    velocityAnimation: {
        in: animation,
        out: animation
    }
})

For more information on transitions, check the README.

Mongo

For editing your mongo database in the web browser, the Mongol tool is one of the best I have used. Once you have installed Mongol with:

1	$ meteor add msavin:mongol

Just press Control-M and you will have access to your collections with full in-browser CRUD support.

I find using Mongol very useful when debugging new apps or data changes to existing ones.

Browser Extensions

For users who are working in Chrome, there is a Mongo plugin available called MiniMongo which will enable you to browse the Meteor database in the developer tools pane.

The MiniMongo Explorer project is available on GitHub if you want to build the source yourself.

Deployment

Using the excellent free tool mup, you can deploy a site to a Digital Ocean VPN within minutes.

The configuration is very simple, and you will only need to have your app, SSH credentials, and maybe an SSL certificate if you would like to enable HTTPS.

To set up mup, start by making a directory for deployment:

1	$ cd meteor-app
2	$ mkdir .deploy
3	$ cd .deploy

Install mup:

1	$ npm install -g mup

Initialize the directory:

1	$ mup init

Now you need to configure the deployment by setting up the mup.js file that has been created via the previous step.

module.exports = {
  servers: {
    one: {
      host: '1.2.3.4',
      username: 'root',
      // pem: '/home/user/.ssh/id_rsa',
      // password: 'password',
      // or leave blank to authenticate using ssh-agent
      opts: {
        port: 22,
      },
    }
  },

  meteor: {
    name: 'app',
    path: '../app',
    // lets you add docker volumes (optional)
    volumes: {
      // passed as '-v /host/path:/container/path' to the docker run command
      '/host/path': '/container/path',
      '/second/host/path': '/second/container/path'
    },
    docker: {
      // Change the image to 'kadirahq/meteord' if you
      // are using Meteor 1.3 or older
      image: 'abernix/meteord:base' , // (optional)
      imagePort: 80, // (optional, default: 80)

      // lets you add/overwrite any parameter on
      // the docker run command (optional)
      args: [
        '--link=myCustomMongoDB:myCustomMongoDB', // linking example
        '--memory-reservation 200M' // memory reservation example
      ],
      // (optional) Only used if using your own ssl certificates.
      // Default is "meteorhacks/mup-frontend-server"
      imageFrontendServer: 'meteorhacks/mup-frontend-server',
      // lets you bind the docker container to a
      // specific network interface (optional)
      bind: '127.0.0.1',
      // lets you add network connections to perform after run
      // (runs docker network connect <net name> for each network listed here)
      networks: [
        'net1'
      ]
    },

     // list of servers to deploy, from the 'servers' list
    servers: {
      one: {}, two: {}, three: {}
    },

    buildOptions: {
      // skip building mobile apps, but still build the web.cordova architecture
      serverOnly: true,
      debug: true,
      cleanAfterBuild: true, // default
      buildLocation: '/my/build/folder', // defaults to /tmp/<uuid>

      // set serverOnly: false if want to build mobile apps when deploying

      // Remove this property for mobileSettings to use your settings.json
      // (optional)
      mobileSettings: {
        yourMobileSetting: 'setting value'
      },
      server: 'http://app.com', // your app url for mobile app access (optional)
       // adds --allow-incompatible-updates arg to build command (optional)
      allowIncompatibleUpdates: true,
    },
    env: {
      // PORT: 8000, // useful when deploying multiple instances (optional)
      ROOT_URL: 'http://app.com', // If you are using ssl, this needs to start with https
      MONGO_URL: 'mongodb://localhost/meteor'
    },
    log: { // (optional)
      driver: 'syslog',
      opts: {
        'syslog-address': 'udp://syslogserverurl.com:1234'
      }
    },
    ssl: {
      // Enables let's encrypt (optional)
      autogenerate: {
        email: 'email.address@domain.com',
        domains: 'website.com,www.website.com' // comma separated list of domains
      }
    },
    deployCheckWaitTime: 60, // default 10
    // lets you define which port to check after the deploy process, if it
    // differs from the meteor port you are serving
    // (like meteor behind a proxy/firewall) (optional)
    deployCheckPort: 80,

    // Shows progress bar while uploading bundle to server (optional)
    // You might need to disable it on CI servers
    enableUploadProgressBar: true // default false.
  },

  mongo: { // (optional)
    port: 27017,
    version: '3.4.1', // (optional), default is 3.4.1
    servers: {
      one: {},
    },
  },
};

Now set up the server:

1	$ mup setup

And deploy:

1	$ mup deploy

You will see confirmation of each step of the process in your terminal. Once the deployment has finished, the app is now live on your server, and you can check it out in your browser.

For more information on configuration with SSL, please refer to this guide.

Caching

Meteor comes with appcache, which will cache the app after the first load, but not for offline usage.

If you would like to cache offline then you will need to use GroundMeteor. This is a client-side only storage which works on LocalCollection.

For an example, we can monitor a collection and store it locally:

local = new Ground.Collection('offlineCache');

local.observeSource(Data.find());

Meteor.setTimeout(() => {
  // Stop observing - keeping all documents as is
  local.stopObserver();
}, 1000);

Here, the contents of the Data.find() publication will be cached into an offline Ground Collection.

Key Stores Caches

For memory keystore caching, you can use the memcache package or redis package to enable you to access data caching on the server.

The package assumes the memcache or redis server is already running, and then a key can be stored in memcache.

var memcached = new Memcached( [ 'localhost:11211', 'localhost:11212'] );

  memcached.set( "key", "value", 2, function (err, res) {
    console.log("memcached set action response", err, res);
  });

Or in Redis Collection:

var redisCollection = new Meteor.RedisCollection("redis");

Meteor.publish("movies", function () {
  return redisCollection.matching("movies-*");
});

The redis implementation is very nice as it can be used to broadcast via the publish/subscribe architecture of Meteor.

Development Tools

Besides the tools already mentioned, the Firebug-like browser extensions available in Chrome for Meteor make debugging a lot easier. You can monitor the data being passed from the server to the client easily inside the DDP tab and review your Blaze template via the Blaze inspector.

IDE Tools

For development in Sublime text editor, a custom version of the Tern.js package provides autocompletion for Meteor. Download it on GitHub.

JetBrains provides automatic integration of Meteor projects with syntax highlighting and debugging. Atom also provides several packages for syntax, code snippets, and autocomplete.

Boiler Plates

If you just want to get going quickly with an app that's already set up, you can look at yogiben's starter. The Meteor chef also has an excellent base starter. If you want to use React, you can look at this Yeoman generator for a starting point.

For further help in starting your app, Meteor Kitchen will provide a GUI for routes and configuration.

Admin Panels

If you are using Yogiben's Meteor Starter, you can also be sure the admin panel he has created will work fine in conjunction. Almost all other projects that are using mongo and blaze should be suitable for this, although React Router apps may have a conflict with Iron Router.

The theme for the admin panel is extensibly modifiable, and you can read the documentation.

Meteor From Meteorites

Before we wrap up here, let me give you some background on the Meteor project. Meteor was publicly released in January 2012, the results of a Y Combinator incubator project which received $11.2 million in funding from venture capitalist firm Andreessen Horowitz.

It initially launched with a package manager named Meteorite (mrt on the cli), and extendability has always been a core element to Meteor. With the release of Meteor 0.9, things changed for good with the inception of Atmosphere packages.

Adding packages to Meteor apps became as simple as meteor add mrt:moment.

As momentum for the project continued, it garnered public interest and was adopted by a wide range of developers old and new. One of the core drivers for this, I believe, was the flexibility of being able to work fully in JavaScript—client and server.

Initially, npm packages were not available, until Meteor released version 1.3, which marked a serious milestone in the development cycle so far.

Working in JavaScript fully throughout meant Meteor had the ability to interface with the vast library of existing JS and Node libraries now with the integration of npm. This gave Meteor a cutting edge as a framework.

It gives perspective of our progress in web development certainly to think of the sheer magnitude of power that Meteor, npm and its atmosphere packages deliver to your fingertips. This is a big change from how we used to do it, with a large development workforce, in the pre-jQuery, pre-npm, pre-Bower days of Flash, NotePad/Dreamweaver and PHP 3. I have worked on teams of over ten employees to produce works which, without sounding ridiculous, can be literally finished in weeks in Meteor by one or two developers.

With these tools at your disposal, there has never been a better time to be a technically minded web entrepreneur. Building your dream apps yourself is certainly within reach.

For an example, earlier today I put together a database-backed CMS with a complete user system and admin back office with Facebook and Google+ oAuth logins. I deployed it to a new server to share with people to debug, and I could see the data being changed in real time.

Meteor is really that fast to work with. Form validation is done and proper data entry work can begin tomorrow, after just eight hours development time.

Conclusion

Meteor is a robust and powerful web application engine that will give you a head start in app development.

Hopefully the packages and advice mentioned here will enable you to make your app in no time at all. For me, realizing my app ideas in a short time span can mean creativity flourishes and innovation is easier.

You can speed through development with ease as in Meteor there is practically a package for everything, and more of the focus is on configuration, which makes the development experience much nicer.

To get support with issues on a specific project, you may wish to search the project on GitHub and make an issue on the repository for the developers to deal with.

If you are looking for more advice on Meteor, the official forums are always a good place to ask.