A Newbie’s Guide to Web Development with NationBuilder

NationBuilder is a mighty beast. The platform expertly unites the worlds of content management systems and customer relationship management in order to power political campaigns, movements and non-profits.

Stepping into this new-to-you environment can leave even the most seasoned developer — back-end or front-end — feeling a little tentative. While building with NationBuilder (or NB as the cool kids call it) can be similar in many ways to traditional builds, there are some differences that should be noted before diving in.

Some of the first things that you’ll notice is the inability to create a nesting file structure, that you’ll be developing in pre-populated files and that jQuery and Bootstrap are baked into your site.

Dig a little deeper and you’ll notice some more differences.

 

Error Reporting

As you know, your browser’s developer tools are a very powerful web development companion. It’s through this window that you get a view of what’s going on under the hood of your site including any errors in your code and where they are.

Error reporting in NationBuilder is a little different though. While the console still gives you a heads up about scripting errors and you can also see Liquid errors, you won’t get that kind of help with your CSS/SCSS and your code won’t render until you find and fix that error.

So, how do you deal with “broken” code? You’ve got a number of options.

Take this as an opportunity to cleanup your development skills and develop better habits (pun intended). Rather than waiting for the dev tools to flag an ‘error’ that’s really just a typo, double-check your code before saving and publish your changes after each major coding stint.

You can also switch to a text editor like VS Code which displays any errors in your code in a ‘Problems’ window.

But, before you go through all of this check for three things:

1. Are you in preview mode?
2. Is Dropbox running?
3. Are your changes being updated on NationBuilder’s back-end?

Make this your mantra. Trust me.

Pro Tip: Adding ?preview=0 to the end of the site url shows you what the site looks like as a logged out user, while ?preview=1 is logged in.

 

The Power of Liquid

The power of NationBuilder is unlocked with Liquid. This templating language, which was created by Shopify co-founder and CEO Tobias Lütke, helps connect your HTML files to NB’s vast stores of data through the use of variables and objects.

While the theory, syntax and language — especially the NationBuilder-specific variables — takes some getting used to, the amount of information and content you can pull onto the page makes learning this new language worthwhile.

Do you know Ruby on Rails? Then Liquid will be easier for you to pick up as the structure of accessing information within an object is similar to ActiveRecord in Rails.

 

No local development environment

You’re probably used to dev-ing in a local development environment. That means, you aren’t subjected to the whims of the internet and can work on the site even when you don’t have a connection. Building in your own sandbox also means a faster build since you don’t have to wait for files to upload and changes to be rendered.

However, NationBuilder sites use a remote development environment through Dropbox. This can present both challenges and perks. While you’ll need an internet connection and you’ll experience a slight delay when making changes to your code, getting your site live is much simpler.

Version control is another challenge, though Dropbox presents a solution. You can revert to older versions of your files (and avoid frantically hitting ⌘ + Z until things work again).

Have you noticed any other NationBuilder quirks and hacks? Leave a comments below and let me know what you've discovered!