Build your own lead capture page with Meteor and MongoDB in minutes

This is a guest blog post written by Niall O'Higgins and Peter Braden at Frozen Ridge, a full-stack web consultancy offering services around databases, node.js, testing & continuous deployment, mobile web and more. They can be contacted at hello@frozenridge.co.

Meteor is a framework for building real-time client-server applications in JavaScript. It is build from the ground up to work with MongoDB - a JSON database which gives you storage that's idiomatic for JavaScript.

We were incredibly impressed with how easy it is to write apps with Meteor using MongoLab as our MongoDB provider. With less that 100 lines of Javascript code we were able to build a fully-functioning newsletter signup application, and with MongoLab we don't have to think about database management or hosting.

To demonstrate Meteor working with MongoLab, we'll walk you though building a lead capture web application.

Since MongoDB is a document-oriented database, it is very easy to modify the application to store any data you want. In our example, we are building this as an email newsletter signup system. However, you could just as easily make this into a very simple CRM by capturing additional fields like phone number, full name etc.

Overview of our newsletter signup app

Our newsletter signup app will consist of two views:

  • A user-facing landing page for people to enter their email address
  • An internal-facing page with tabular display of signups and other metadata such as timestamp, referrer, etc.

You can grab the complete source to the finished newsletter signup app on Github here and view a fully-functional, running example of the application here.

Create the Meteor app

First install Meteor:

> curl https://install.meteor.com | sh

Once Meteor is on your system, you can create an app called "app" with the command:

> meteor create app

Now you will have a directory named app which contains files app.jsapp.css and app.html.

Landing page template

First we need a nice HTML landing page. In the Meteor app you just created, your templates are stored in app.html. At the moment, Meteor only supports handlebars for templating.

It's worth noting that everything must be specified in template tags, as Meteor will render everything else immediately. This enforces thinking of your app as a series of views rather than a series of pages.

Let's look at an example from our finished app to illustrate. We have a "main" template which looks like this:

Data is bound from client-side code to templates through the Meteor template API.

Hence, the variable showAdmin is actually bound to the return value of the JavaScript functionTemplate.main.showAdmin in the client-side code. In our app.js, the implementation is as follows:

Due to Meteor's data bindings, when the session variable "showAdmin" is set to true, the "admin" template will be rendered. Otherwise, the "signup" template will be rendered. Meteor doesn't have to be explicitly told to switch the views - it will update automatically when the value changes.

This brings us to the client-side code.

Client-side code

Since Meteor shares code between the client and the server, both client and server code are contained in app.js. We can add client specific code by testing Meteor.isClient:

Inserting data on form submit

For the user-facing landing page, we merely need to insert data into the MongoDB collection when the form is submitted. We thus bind to the form's submit event in the "signup" template and check to see if the email appears to be valid, and if so, we insert it into the data model:

One of the nice things about Meteor is that the client and server side data model API's are the same.  If we insert the data here in the client, it is transparently synced with the server and persisted to MongoDB.

This is very powerful. Because we can use any MongoDB client to also connect directly to the database, we can easily use this data from other parts of our system. For example,  we can later link-up mailmerge software to make use of our database of emails to send newsletters.

Adding authentication

Now that we've got our newsletter signup form working, we will want the ability to see a list of emails in the database. However, because this is sensitive information, we don't want it to be publicly visible. We only want a select list of authenticated users to be able to see it.

Fortunately, Meteor makes it easy to add authentication to your application. For demonstration purposes, we piggy-back off our Github accounts via OAuth2. We don't want to create additional passwords just to view newsletter signups. Instead, we'll consider a hardcoded list of Github usernames to view the admin page:

Meteor makes it very easy to add a "login with Github" UI flow to your application with the accounts and accounts-ui packages. You can add these with the command:

> meteor add accounts-ui accounts-github

Once these are added to your app, you can render a "login with Github" button in your templates by adding the special template variable {{loginButtons}}. For example in our finished app we have:

Email list view

The data display table is simply a handlebars table that we'll populate with data from the database. Meteor likes to live-update data, which means if you specify your templates in terms of data accessors, when the underlying data changes, the DOM will automatically reflect the changes:

This is a pretty different approach to typical frameworks where you have to manually specify when a view needs to refresh.

We also make it possible for admin users to toggle the display of the email list in the app by inverting the value of the 'showAdmin' Meteor session variable:

Server-side code

Meteor makes it super easy to handle the server-side component and marshalling data between MongoDB and the browser. Our newsletter signup simply has to publish the signups collection for the data display view to be notified of its contents and it will update the view in real-time.

The entire server-side component of our Meteor application consists of:

With a unified data model between client and server, Meteor.publish is how you make certain sets of server-side data available to clients. In our case, we wish to make the Github username available in the current user object. We also only wish to publish the emails collection to admin users for security reasons.

Bundling the Meteor app

For deployment, Meteor apps can be translated to Node.JS applications using the meteor bundle command. This will output a tarball archive. To run this application, uncompress it and install its only dependency - fibers.

Fibers can be installed with the command

> npm install fibers

Deploying the Meteor app with MongoLab

Now your Meteor application is ready to run. There are a number of configuration options which can be set at start-time via UNIX environment variables. This is where we specify which MongoDB database to use. MongoLab is a great choice, taking a lot of the hassle out of running and managing your database, with a nice free Sandbox plan that you can create in seconds here.

In order to have you Meteor application persist data to your MongoLab database, set the MONGO_URL environment variable to the MongoDB URI provided by MongoLab for your database:

> export MONGO_URL=mongodb://user:password@dsNNNNNN.mongolab.com:port/db

For Meteor to correctly set up authentication with Github, you need to set the ROOT_URL environment variable:

> export ROOT_URL=http://localhost:8080

To run your Meteor application on port 8080, simply execute main.js:

> PORT=8080 node main.js

You should now be able to connect to it at http://localhost:8080!

6 Responses to Build your own lead capture page with Meteor and MongoDB in minutes

  1. Toussaint Gouthier 2013/06/12 at 12:17 pm #

    this was a very good tip on how to create lead capture page

    check out my website http://telekomxchange.com/

  2. Arvind Gupta 2015/06/28 at 12:38 pm #

    Great Example, Thanks a lot

  3. cartierlovejesduas Absolutely beautiful! God bless your work!
    van cleef arpels alhambra bracciale turchese imitazione http://www.braccialegioielli.cn/vintage-alhambra-bracelet-c3_75_80/

  4. cartierlovejesduas I think I’ll bookmark this article! Some of these marketing strategies I have already implemented, but I had not known where to submit to online directories.
    boucles d’oreilles alhambra van cleef arpels or rose copie http://www.topbijoux.cn/magic-fake-van-cleef-arpels-alhambra-yellow-gold-earrings-4-malachite-p257/

  5. copy cartier santos 100 xl review 2017/03/15 at 10:21 am #

    cartierlovejesduas How ironic that you would say that!
    copy cartier santos 100 xl review http://www.sawristwatches.com/

Trackbacks/Pingbacks

  1. How To Build A Lead List | MakeMoneyInDirectMail.com - 2014/08/15

    […] Build a lead capture page with Meteor and MongoDB in minutes … http://blog.mongolab.com/To demonstrate Meteor working with MongoLab, we'll walk you though building a lead capture web application. Since MongoDB …. Instead, we'll consider a hardcoded list of Github usernames to view the admin page: Meteor … […]

Leave a Reply