Essential Meteor Tips

Essential Meteor Tips

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:

To install an npm package in Meteor, just run:

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

Meteor accounts-ui

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.

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

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

To send the email out, use the following methods:

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

Changing styles is also very easy:

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

Pretty Emails activation email

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.

  • Ratchetmeteor add useraccounts:ratchet
  • Ionicmeteor add useraccounts:ionic
  • Bootstrapmeteor add useraccounts:bootstrap
  • Materializemeteor 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:

React + Bootstrap

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

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

You can use Bootstrap components within your React JSX now:

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}}:

Now set the transition between routes:

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:

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. 

Mongol for debugging

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:

Install mup:

Initialize the directory:

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

Now set up the server:

And 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:

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.

Or in Redis Collection:

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.

Reviewing a Blaze Template

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

Yeoman

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

AdminLTE theme admin panel from Yogiben

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

Meteor Preview 052

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.

Source: Tuts Plus

About the Author