Creating HubSpot modules for portability

Josh Markus Josh Markus
May 29, 2019   |   2 min read time

When I first started out, I created the same HubSpot module over and over again because I didn't structure it in a way that would make it easily portable between portals. Lesson learned. This is the problem of re-creating the wheel every time you build a car - it's unnecessary and a big waste of time. The blueprints to create the wheel already exist. The mechanisms are already in place that allow you to produce a wheel. So why create it from scratch every time?

This process is even easier in the web development world. There's no grease or loud machinery involved, just tiny pulses of electricity and the shuffling of digital bits - easy, right?

The traditional and 'best practices' method has developers separating their concerns. In the HubSpot world, this means keeping your HTML and Hubl in the modules, your CSS in the style sheet and your JavaScript in your .js file. This is a tried-and-true method that works. There's good reason we develop like this, but, does it mean we always have to? Of course not.

'Modules' are what makes HubSpot so great. They allow for HTML, CSS, JavaScript and logic (Hubl) to all be contained in the same, easy-to-use development space. If we're approaching development in the traditional way, we wouldn't want to include any CSS or JavaScript in the module. However, if we want to easily re-use modules we can treat 'the module' as a stand-alone component. By keeping all the code (HTML, Hubl, CSS, Media Queries, JavaScript) in the module, we're creating a 'component' that is easily maintained and portable.

If you want to re-use this module you don't have to hunt down the styles in the style sheet or the specific JavaScript you need in the .js file. This makes the module as a whole very adaptable and easy to use in other development environments.

The downside, of course, is that you'll end up writing more CSS and JavaScript up-front because they're now module-specific instead of being available to a wide variety of modules. In the end, developing modules for portability depends on your own development goals and what your process looks like. It may be a little more work up front but could potentially save you big down the road.

Website Content Planner Guide

Download our Website Content Planner Guide to help kick off your HubSpot website redesign project!

Download Now ›

HubSpot Website Content Planner

Want more? Subscribe Now!

Free Design Assessment