Can you develop a template locally using standard modules?


#1

When building a template in the browser using the drag-and-drop Design Manager interface, there are a whole bunch of standard modules available. I would like to use these same modules when developing locally, using hubl-local-server to test them out.

My planned workflow was to start the template in the Design Manager, then download it over FTP, finish customizing it locally, then push it back up via FTP.

Is this possible?

When I try to download via FTP, I don't see any of my new custom templates. Should I have access to these? I've tried putting them in different folders, but they just don't show up. Also I don't see where I can download (over FTP) any of the "standard" modules to use in local development. Is this possible?

If I am limited to building modules and templates locally from scratch without using any of the standard modules, then I can't really develop a full template locally in any meaningful way. Am I missing something here? Or is this workflow not possible and all template building will need to be done in Design Manager?

Thanks,
Ben

EDIT: the "module" folder was not showing up in Filezilla. I manually typed in the folder path where I thought it might be and voila, it was discovered. So I have the standard modules, as well as custom modules. However, I still can't see templates I've created in the design manager. I've tried creating both drag-and-drop and html/hubl style templates, neither show up in filezilla.

EDIT 2: I created a new root level folder in the design manager called "custom". If I put my files in there (or I'm guessing folders nested under there, haven't tried that yet) then I can see them via FTP. Other folders don't show up. Would be nice if this was documented somewhere.

So for anyone else struggling with this, it looks like my workflow will be:

  • Start building the boilerplate of a template using the drag-and-drop tool
  • Clone it to html
  • Make sure it is in the "custom" folder (that you need to create yourself)
  • sync it to local via FTP, along with all the modules it relies upon
  • customize it locally
  • push it back via FTP
  • Build pages using the online tool

That's the plan anyway.


#2

Thank you so much for documenting this. I'm pretty new to the Hubspot development process. I've been struggling to find a way to develop locally beyond just pure theming, that is CSS & JS. So far, I've managed to deal with default/standard modules and found out it's a json format located under content > modules folder via the FTP. However, I would like also have the capability to edit custom modules. Any way you got a chance to encounter beyond default modules and how shall one can customize it?

Thanks in advance,
Andrew


#3

I didn't work out a way to edit custom modules locally, but I did work out a work around that may be useful.

I built separate html files (locally) for each of my "custom" modules. For instance I built a custom my-header.html and my-footer.html that would be common across all my templates. To use these I then added something like this within each page template:

<div class="include" data-file="my-footer.html"></div>

and then added some javascript to the end of the body of each of those templates:

`<script>
      $(function () {
        $('.include').each(function() {
          $(this).load($(this).data('file'), function() {
            console.log('loaded');
            init();
            $(this).children().first().unwrap(); // remove the include div
          });
        });
      });
    </script>`

You can build the site locally that way, but then when you upload to the portal it won't work anymore. So at that point you'll need to create a proper custom module inside the portal, copy/paste your code from your "custom" files e.g. from my-header.html etc, and then add then replace the "include" div above with:

{% module "module_1234512345" module_id="123456" label="MY-header" %}

just get this module snippet from the "Usage snippet" on the custom module page. Also delete the javascript as that isn't needed anymore.

So a bit of a hack but it's the best I could come up with to develop locally.

Having said this, in the end I gave up on local development and have instead developed through the portal. The deal breaker for me was that HubDB doesn't work at all locally.

Hope this helps, good luck.
Ben


#4

I like your work around. I'm gonna try that soon.

Although this is the workflow I might be using for quite some time. I hope Hubspot will allow editing custom modules and HubD as developing locally is way faster than in the design manager.

Thanks so much, Ben,
Andrew


#5

Hi @andrewabogado and @ben1,

This is awesome stuff; I appreciate your willingness to document your tips and tricks for other devs to take advantage of. I wanted to make sure you were both aware of some recent updates to the way your files are visible via FTP:


#6

Thanks @Derek_Gervais. Looks promising. Will take a look soon.


#7

@Derek_Gervais, works like a charm. I can see the modules folder now which is great. I'm just not sure how to use / include a custom local module as when I load the page, all the module doesn't seem to render. Appreciate any tips on this. Btw, inside the module, I've included a richtext_field.


#8

Hi @andrewabogado,

Can you give me a bit more info on what you're trying to do? I'm not sure I'm able to replicate the issue you're referring to.


#9

Hi @Derek_Gervais.

Sorry, it took me some time to revert. I've grabbed a screenshot of what I'm trying to achieve here. Basically, the code snippet marked in red box in the right of the screenshot, is a custom module. The left side of the screenshot, I expected the code render in the browser but no, it doesn't show.


#10

Hi @andrewabogado,

Are the modules you're using being included in the custom-modules folder of your base directory?


#11

Hi @Derek_Gervais,

So I've just moved somemodule.module folder inside custom-modules folder. Then called the module in html as {% module "module_153248773694072" module_id="3429778" label="somemodule" %}

Btw, the somemodule.module folder was the same folder I copied from the portal via FTP.

Here's the folder structure with custom-modules
13%20AM

Nothing happens. Appreciate if you could fill me in what I did wrong here?

Thanks in advance,
Andrew


#12

Hi @andrewabogado,

Apologies for the delay here; this topic flew under my radar. I'm able to reproduce the behavior you're seeing, and I believe it's actually related to the structure of the custom modules being downloaded via FTP. I'm going to touch base with the team on this, and I'll reach back out here when I have some more info.


#13

Hi @Derek_Gervais.

Super! Thanks for looking at this. Much appreciated


#14

Any updates on this?


#16

Hi @Derek_Gervais. Do you have any updates on this?


#17

Hi all,

Apologies for the delay. The team is working on this now, but the changes are non-trivial. The issue appears to be two-fold:

  1. First, custom modules downloaded via FTP are missing some key metadata (most relevant is the module ID)
  2. Second, the local HubL server supports the new custom modules framework, but only if they're structured as a single JSON file. This is not how they're structured when downloaded via FTP, and any 'conversion' process is tricky at best.

The team is currently working to resolve both of these issues, and while I don't have any specific timeframes just yet I wanted to keep everyone in the loop. Any updates on this will be posted in this thread.


#19

@Derek_Gervais understandable. Thanks for the update Derek.