Problems with local setup of a React Theme

Develop, Build & Integrate CMS Development
1

I’ve followed the the Developer Docs as I’ve tried to setup a local project using React for developing a theme. When I run npm run start, I get errors telling me I don’t have all the permission scopes set.
I got help from the support that my scopes should be correct set, but still have the errors. The only response I can get is in the Terminal as I’m running npm run start, and that is actually not very helpful.
It’s weird. I just did something very straight forward according to the developer doc. Has anyone else ran into the same problem?

2

Hey @Navigator,

Welcome to the Community!

Here are a couple of resources that might help:

I’d also like to tag in some of our Top Contributors to see if they have any suggestions:

Hey @evaldas​, @anton​, @GiantFocal ​ -- Do you have any suggestions on this?

Thanks in advance!

Sam, Community Manager

3

Thank you for your response. It does work setting up a Hubl theme. That’s no problem. The errors appears when I try to set up local project based on the React Boilerplate.

4

Hey @Navigator,

there’s a difference between setting up local dev for React themes and HubL themes.

Have you tried to deactivate and re-activate your private token in the portal and re-auth the portal again? This might help.

Furthermore : While npm run start starts the local server, from my experience it’s kinda unnecessary as it will show you just a “list” of your components and if they’re set up differently than the “default”, they won’t get rendered correctly and it might not give you the “real-world” theme experience.

Something I (and most likely many others) do is:
Uploading the theme into a (test) portal, develop the theme in it and debug right inside of HubSpot as this is the best what you can do.

When it comes to HubL themes, I always recommend to run

hs cms watch <local-path> <hs-path>

or

hs cms upload <local-path> <hs-path>

with the optional

--account=<hubId or local-portal-name>

for HubL themes

The watch command for HubL themes is super useful while you’re in the middle of dev work as it will upload the file you’re working on, on each save.

Important note:

If you’re using the upload command, it won’t override existing files by default.

In order to overwrite them, add the --overwrite flag to your command

For React themes it’s a bit different as the command is

hs project upload

with the optional

--account=<hubId or local-portal-name>

but the idea is the same:

Upload the theme into a (test) portal, develop/test it, once happy, move it to the live portal

Hope this helps

best,

Anton

5

Thank you! Some helpful clarifications!