Cannot Deploy to HubSpot Account

Developer Support CMS Development
1

I cannot deploy the tutorial project for the “A Quickstart Guide to React in the CMS” HubSpot Academy course to my HubSpot account, as outlined here:

I cloned the sample Git repo, ran the global HubSpot CLI tools installs via “npm i -g @hubspot/cli”, installed dependencies via “npm install” in the root “quickstart-guide-to-react-in-cms” folder, can run and modify the project as suggested by the course (this file was succesfully modified while the app was running in the browser:

“C:\Users\blah\blah\quickstart-guide-to-react-in-cms\cms-react-project\cms-react-app\components\partials”).
However: when I try to deploy to my account, I get errors:

C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms> npm run deploy

> deploy
> hs project upload cms-react-project

**[ERROR]

Unknown argument: cms-react-project**

Another forum post suggested just using “hs project upload”, but that also results in an error:

PS C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms> hs project upload

**[ERROR]

Unable to locate a project configuration file. Try running again from a project directory, or run `hs project create` to create a new project.**

Fine, I run “hs project create,” which created a subfolder in the quickstart guide folder:
PS C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms> hs project create
? [--name] Give your project a name: test-react-project01
? [--dest] Enter the folder to create the project in: C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms\test-react-project01
? [--template] Choose a project template: CRM getting started project with public apps

[SUCCESS] Project test-react-project01 was successfully created in C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms\test-react-project01

Welcome to HubSpot Developer Projects!
--------------------------------------------------
What’s next?

Tip: All project commands must be run from within a project directory

Run `hs project upload` to upload your project to your HubSpot account

Run `hs project dev` to set up your test environment and start local development

Run `hs project install-deps` to install dependencies for your project components

Run `hs project --help` to learn more about available project commands

Run `hs feedback` to report a bug or leave feedback

See HubSpot’s sample projects: https://developers.hubspot.com/docs/platform/sample-projects?utm_source=cli&utm_content=project_create_whats_next

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

But I get the same errors:

PS C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms\test-react-project01> npm run deploy

> deploy
> hs project upload cms-react-project

[ERROR] Unknown argument: cms-react-project

FWIW, “cms-react-project” is an earlier attempt which I don’t seem to be able to break away from. Trying to specify the project I created and whose folder I’m in also returns errors:

PS C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms\test-react-project01> hs project upload test-react-project01
[ERROR] Unknown argument: test-react-project01

This is hugely frustrating: I see no answers to this issue which I cannot resolve (it doesn’t help that some links in the course are broken, or that the UI is significantly different now than what the course shows). Kind of hard to use local development or React if following your own course materials result in errors. I hope this can be resolved quickly, unlike several other forum posts for similar issues for which correct answers have yet to be provided.
Thank you for your prompt attention.

2

Hi @jk-sone,

Thanks for reaching out to the Community!

I would like to invite some members of our community who may offer valuable insights.— hey @FrancoQ, @Bhupendra_Kumar, @BarryGrennan, @SKatjivirue, @JBrake - Could you share your advice with @jk-sone?

Thanks for taking a look!

Diana

3

This one took me ages to figure out myself when I was getting started.
The quickstart project is slightly outdated.
If you take a look at the comments on Hubspots own cms-react project demos: cms-react/examples at main · HubSpot/cms-react · GitHub
They mention that “As of hs cli v7, hs project upload no longer takes an argument (will fail with “Unknown argument: .”)”
Which is exactly what the quickstart project tries to do, take a look inside the package.json to confirm (quickstart-guide-to-react-in-cms/package.json at main · HubSpot-Academy/quickstart-guide-to-react-in-cms · GitHub line 21: “deploy”: “hs project upload cms-react-project” )
The “hs project upload” advice is correct but you need to run it from inside the right folder.
Where the quickstart guide tells you to “Next double-check you are still in quickstart-guide-to-react-in-cms/ and run npm run deploy”, you should instead cd to quickstart-guide-to-react-in-cms
/cms-react-project or wherever the porject folder is in your current setup (test-react-project01?). I think it should be whereever your hsproject.json is anyway. Then use hs project upload
You could also rewrite the line in the main package.json to

"deploy": "cd [YOUR PROJECT FOLDER NAME] && npm run upload"

Then npm run deploy works as expected.
TLDR
- The deploy command in the quikcstart project is outdated
- It tells hubspot you want to upload the folder cms-react-project but a) you don’t seem to be using that folder anymore and b) the project upload command no longer takes arguments like that

- So you need to make sure hs project upload is run from inside the project.

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

4

@BarryGrennan Huge thanks for these clarifications. I did cd into cms-react-project and authorized my developer account with the personal key I generated. BUT: I don’t seem to have the correct scopes set up for this account, and I cannot find where I can add them -- I do see they scopes available when I generate the personal key but no clear path for adding them (in a manner similar to the above examples, online references to “App Settings” for accounts seem to be out of date and don’t reflect what I see in my account). So, here’s the result when I run “hs project upload”:

PS C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms> cd .\cms-react-project\
PS C:\Users\blah\blah\cms-react\quickstart-guide-to-react-in-cms\cms-react-project> hs project upload
[ERROR] Couldn’t execute the request because the access key for blah-cli [test account] (20553458) is missing required scopes. To update scopes, run `hs auth`. Then deactivate the existing key and generate a new one that includes the missing scopes.
Except generating a new key does not provide me an option to add scopes -- as above, it says what’s available but no ability from that screen to add them to my account. Any ideas for how to proceed here? Please let me know and many thanks again.

5

@jk-sone ,
I believe in initial set up, I had to delete my existing auth from my hubspot.config.yml (which you’ll have already if you’ve previously developed themes locally) and re-authorize on that portal as there are new permissions.
I don’t think that yml file would be in your cms-react-project, it’d be somehwhere in your C:\Users\blah\blah\

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

6

I am going to lose my mind over this…
SO: my personal developer account always threw errors, so I created a new dev account, followed the procedure to make my first public app and was trying to generate a personal key so I can finally post a local project to my new HubSpot dev account. However, every time I try to run “hs auth” and open the personal key page for this new account, I get a screen that reads: “Use Projects to build apps with interactive UI extensions” and a button that says “Join beta” -- I cannot tell you how many times I’ve clicked that “Join beta” button after multiple “hs auth” commands, which only gives me a screen with zero access to any personal key generation.
I’m quite prepared to give up on HubSpot -- how can there be so many conflicting, non-working directions for what should be a straightforward process?