Nightmare DX (Developer Experience): HubSpot
Tags: webdev, productivity
Published: 2024-01-24 13:14:00

I meant to write about HubSpot’s terrible developer experience (DX) right after my first article about [Shopify’s nightmare DX](https://dev.to/starbist/nightmare-dx-developer-experience-shopify-1l79) two years ago, but it wasn’t until recently that I had to work with HubSpot again. Although the project was short and sweet, it reminded me to write this article.

## Local development

HubSpot, just like Shopify, has limited abilities for local development, and you cannot replicate the HubSpot environment on your computer. The only thing you could do is sync your theme using [HubSpot CLI](https://www.npmjs.com/package/@hubspot/cms-cli). And you know what that means? It means no browser sync or hot reloading. It means refreshing your page every few seconds manually.

Working with HubSpot CLI has been a nightmare experience for me in several scenarios. For example, when developing a new HubSpot module, it is considered the best practice to use Design Tools inside the HubSpot dashboard. With Design Tools, you could configure input fields for your module and copy snippets and/or values. Then, to sync these changes locally, you should fetch your module from the server. No problem there, but on more than a few occasions, the fetch action didn’t override my local files, making me delete the local module and then repeat the fetch action. Talking about the waste of time.

Then, when you are developing locally and want to add more input fields, you often go back to Design Tools and add these fields. The problem occurs when you forget to refresh the page, have an older version of your module, and then hit the “Publish changes” button, which overrides your local changes. Once you try to fetch the changes, it doesn’t work, so you delete your local module files and try to fetch files from the server again, and guess what? You lose your work because undo doesn’t work on deleted files.

## Dashboard

For an enterprise CMS like HubSpot, you would expect to have an organized dashboard, but HubSpot’s dashboard is everything but organized. For example, if you want to edit your blog listing page, you could navigate to Marketing > Website > Blog and switch from Blog posts to Blog listing pages.

![Screenshot of the HubSpot dashboard showing how to navigate to blog listing pages.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u50i2l4r93sz1saa60mb.jpeg)

Once you find your Blog listing page, if you want to rename it, you cannot do it here. You need to go to Settings > Tools > Website > Blog. If this makes sense to anyone, please explain how.


![Screenshot of the HubSpot dashboard showing how to navigate to blog listing settings.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hsp5mx6iez8foa1fxzf.jpeg)

## Documentation

Although HubSpot documentation is very comprehensive, it should’ve been more organized. The most important pages that help me with HubSpot development, like [Hubl filters](https://developers.hubspot.com/docs/cms/hubl/filters) and [functions](https://developers.hubspot.com/docs/cms/hubl/functions), are so big and slow that it takes over a minute to load them completely. And I need it to load completely because I want to use search to find something on the page.


![Screenshot of DevTools showing it takes 1.3 minutes to load the Hubl functions page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bll1vw99z745jqqubz3i.jpeg)

## Conclusion

There are many other things to complain about, but there are the main pain points for me. I had some additional notes in my draft, but I no longer know what they mean. I also have the screenshot with the vague message about access issues, but I don’t know what it means.

![Screenshot of the HubSpot alert about access issues.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzq6u885tdla367m5fco.jpeg)

If you are building a webshop or website platform, try to make your tools more enjoyable. Invest more time to listen to what developers say and try to improve the overall developer experience. It would make this developer happier.