Inconsistent paths in FTP / design tools

[johdah]

Hi

I'm new to HubSpot and will work with designing templates and landing pages. I'm trying to set up a workflow where I can code in my own editor and use preprocessers for CSS. As a part of this, I'm uploading my own CSS file to HubSpot with FTP.

Now my problem is that the folder structure I see on the FTP does not reflect the folder structure I see in the design tools. For example, see these images:

I

Here, the CSS-file I uploaded on FTP does not end up in the Templates directory at all, but instead in a custom folder that I have created in the Design Tools. This folder on the other hand does not show at all on FTP.

I'm not sure if I misunderstand how these folders work and where exactly I should put my content. When working in the design tools, it seems perfectly fine to create my own folder and put all my assets in there, instead of spreading them out over a lot of different folders. I'm unaware if there are any issues with this workflow...

So, if anyone could lead me in the right direction here i would appreciate it.

[tjoyce]

@johdah - As convenient as it sounds, to create files and directories through an FTP client, HubSpot recommends that you create files using the design manager or the API. You can then, resync your FTP client to fetch and edit those files but as far as file creation, leave that to the design manager. When you create files through FTP, you aren't assigning them proper permissions as well as certain meta data and HuBL code that the design manager needs.

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[johdah]

Thanks, that explains part of it.

However - two questions:

1. The folder I created in the design tool does still not show up on FTP (that is the "Bredband2" folder that is in the root. So even if I create the file in the design tool first, I still can't work with it in any other way than through the design tool it seems. There are also several other missing folders that I think come by default in HubSpot but that does not show up on FTP. Is this intentional and does that mean that I should put my stuff in some specific folder for things to work out?

2. Is there a good way to work with my own editor and be able to use preprocessors or is it out of the question?

[tjoyce]

@johdah - Sorry, I don't have an answer to your first question since I haven't used FTP clients with the new design manager however, a few years ago I wrote a blog post on using the GruntJS task runner with HubSpot FTP. As far as I know, these should still work with the FTP client. Like I mentioned, I haven't used FTP with the new design manager, so please keep that in mind when and report back your findings if you wouldn't mind 😄

[johdah]

Ok, thats fine 🙂 Thank's for giving me your input on what you know. I'll leave the question unanswered though since I would really like to find out how this works.

I read your guide but I think it's a bit unclear how you actually transfer the files.

Right now I have a somewhat simliar setup where I use gulp to process my files and upload them, however I can't get the ftp-library (vinyl-ftp) to actually get the files over FTP. I think the FTP connection needs to be "active" which is not supported by any ftp library in node that I can find.

[tjoyce]

Here's how I connected using Panic Transmit - http://cosdev.bigpresence.com/resources-and-getting-started-with-developing-in-the-hubspot-cos; Transmit has an auto sync functionality. Once a file is changed, it's automatically uploaded.

[MFrankJohnson]

EXCELLENT question @johdah ...

I always wondered about this @tjoyce, but got so completely caught-up in the new Design Manager versus the old Design Certification that I completely forgot to ask.

Thanks for the clarity. Your solutions continue to help us all.

Best,
Frank

---

www.MFrankJohnson.com