Can you setup local development on HubSpot CMS?

[lukesummerfield]

UPDATE: 7/18/19
----------------

Exciting News!

We are extremely excited to introduce a new way to develop using your preferred workflows on the HubSpot CMS! This new workflow supports all Design Manager assets being represented as a true project of files (DnD templates, HTML template, CSS files, JS files & Modules), unlocking local development, code living in GitHub/version control, build stages, and more.

Check out:

• https://designers.hubspot.com/docs/tools/local-development
• https://designers.hubspot.com/docs/tools/local-development-reference

Please note this functionality is in BETA and subject to change.
We have lots of plans to expand on the local development experience but want to craft it with your feedback, which is why we are so excited to get it in the hands of developers. This is only the beginning 🙂 

Any feedback/support for this functionality should be posted in the #local-dev-beta channel in the HubSpot Developer Community Slack. 

PS. We plan to open-source this tooling so you can contribute and file issues.

----------------ORIGINAL MESSAGE----------------------------

HubSpot hosted a CMS Developer AMA on July 25th 2018. This question was submitted and the first reply is what the panelist and audience chat responded with. (view the full AMA here)

--------------------------------------------------------------------------

These (similar) questions were asked in our CMS Developer AMA: 

1. Is there a way to use SASS/LESS within the Hubspot design tools code editor?
   
2. I would like to incorporate my development tooling into my Hubspot workflow for templates and custom modules including the following:

• Version control using Git
• Integrating front-end build tools like Babel, Typescript, SASS, Post-CSS, or webpack
• Automated deployment and testing (ansible)
• Local development environment with hot reloading

[DavidDuymelinck]

I created a Hubspot preview emulation for local development (https://bitbucket.org/davidDuymelinckMia/hubspot-local-module-preview)

It has a more bring your own dev tools attitude than the repository from Teun. 

All comments are welcome.

[Teun]

Looks really interesting David!

Will give it a try real soon. Thanks for sharing.

[andrewabogado]

A bit late to find out about this.

This is great! This is huge!

Thank you for this upgrade. Will look at this soon.

[lukesummerfield · Accepted solution]

Exciting News!

We are extremely excited to introduce a new way to develop using your preferred workflows on the HubSpot CMS! This new workflow supports all Design Manager assets being represented as a true project of files (DnD templates, HTML template, CSS files, JS files & Modules), unlocking local development, code living in GitHub/version control, build stages, and more.

Check out:

• https://designers.hubspot.com/docs/tools/local-development
• https://designers.hubspot.com/docs/tools/local-development-reference

Please note this functionality is in BETA and subject to change.
We have lots of plans to expand on the local development experience but want to craft it with your feedback, which is why we are so excited to get it in the hands of developers. This is only the beginning 🙂 

Any feedback/support for this functionality should be posted in the #local-dev-beta channel in the HubSpot Developer Community Slack. 

PS. We plan to open-source this tooling so you can contribute and file issues.

[Teun]

Awesome! We can start working out a deployment process with Gulp & Webpack now. This makes Hubspot development so much easier.

[Teun]

We created a boilerplate with Gulp, Sass and Preact. Feel free to give us feedback on the boilerplate.

https://github.com/teunrutten/hubspot-boilerplate

[lukesummerfield]

Some recent conversation about this topic on the HubSpot CMS Developer Community Slack. I wanted to document the questions/conversation here. 🙂 

And on building custom modules locally. 

[grantfoster]

Hey everyone, got a private message asking for my Gulp recipe so I decided to bust out a proper repo. Proud to present hubspot-gulp to you.

https://github.com/grantfoster/hubspot-gulp

This is a little gulp environment that allows you to save a running a list of files that you work with, and use Hubspot's API to publish them, or save them to the buffer as a draft. It compiles your SASS for you with sourcemaps for debugging. I also included a little script called 'Get' that will update your local file with whatever Hubspot has as the latest published revision.

I work alone, so nobody is here to tell me my scripts are terrible. Make sure to contribute if you like it, any constructive criticism is welcome.

[lukesummerfield]

thanks for adding your Gulp recipe, Grant!!

I know a bunch of folks have found this really helpful. 🙂 

[grantfoster]

Hey there,

I'm gonna work on getting my code nice enough to put on a repo for you guys and start using a .env file so I can obscure my HAPI key. But Luke encouraged me to pop on here and post about my local dev environment. From my post on the developers slack:

"i’ve had bad results trying FTP stuff from my gulp taskrunner into the CMS - but recently i’ve cooked up a gulp recipe that allows me to compile my sass and shoot it to CMS API instead. makes my life so much easier."

Right now I'm only using my local environment to do SASS. I'm working on a VSCode Language Extension for HTML + HubL as I have time for it, but I still use the web editor for my HTML and HubL since I can't stand not having syntax highlighting.

For this Gulp recipe, you need these npm or yarn packages:

• 'gulp-sass'
• 'request'
• 'fs'
• 'prompts'

I load in the path and hubspot ID for each asset I'm working with into some JSON. I have Gulp compile down anything it sees changed and then I use the 'prompt' package to allow me at any point while I'm running Gulp to choose any file I'm working with and initiate an API call to replace the source code of that resource with what I have in my local environment. I only really use this when I am creating something that isn't in production yet.

As I improve my recipe, I'll add it to this thread in Git so you may be able to set it up yourself.

[wspiro]

@grantfoster thanks for sharing details about your worklfow!

I am just seeing this now, but I wanted to share an open source Visual Studio Code HubL Language Extension I threw together:
https://github.com/williamspiro/HubL-Language-Extension

https://marketplace.visualstudio.com/items?itemName=WilliamSpiro.hubl (lives in .html files)

Please feel free to contribute!

It is hooked into our Jinjavadoc annotations, so as code updates, the extension can automatically update as well.

For syntax highlighting, I recommend in my extension to use this Jinja one (which also lives in .html files): https://marketplace.visualstudio.com/items?itemName=wholroyd.jinja. It works really well for HubL 🙂

[RyanAbsalom]

I recently created this amd have been using this for my development:

https://github.com/Absanater/hubspot-frontend-local/

Its just something I have made on the side so hasnt had to omuch put into it but it allows for deployment of Sass and Es6 to hubspot design manager via gulp. I have also added a browsersync proxy to test out pages as you are developing. Not sure if its any help but thought I would just drop it off incase anyone found it useful. 

Cheers!

[droppr]

I'm new to hubspot and I'm messing with HUBL and the local env setup. This is really awesome. Thank you so much for sharing this. I will SPEAK YOUR NAME in the custom theme I create.

[lukesummerfield]

Glad you're finding this helpful @droppr ! We're actually exploring how to take local development to the next level in 2019. More to come... stay tuned. 

[lukesummerfield]

nice @RyanAbsalom! That's awesome to see. Thanks for sharing on GitHub! ... would it be possible for you to record a short video walkthrough of you making some updates via your local setup? ... I know folks love seeing real examples of usage.

[RyanAbsalom]

Hi Luke,

I have recorded a small clip showing how to work with this environment. I dont really have a lot of time to make such more than that but I hope it helps 🙂

https://www.youtube.com/watch?v=mmyBlPf_I6w

[lukesummerfield]

Thanks so much @RyanAbsalom! This is great. I know the folks following/viewing this thread will find this stuff helpful. I"m working on getting a few more examples over the next month... so make sure to keep an eye here for more ideas. 

[RyanAbsalom]

No problem @lukesummerfield. Its looking likely I will be working a lot more on some hubspot development in the coming months so If I add improvements I will make sure to keep it updated!

[lukesummerfield]

For those watching the CMS Developer AMA video that @anthonypizzurro posted on this thread - Anthony was nice enough to share the HubL Macro Helper sheet he walked through in his answer.

• Check it out here
• Please keep in mind - this is a community-created resource and is not officially supported by HubSpot -and- might be a bit dated. But still super helpful. Enjoy!