How to use HubSpot Developer Projects and Local Dev Like a Boss

Hi, I'm Brandon and I'm a developer at HubSpot. I'm here to show you how to do local development on developer projects. For anyone who doesn't know what developer projects are, they enable you to safely test, build and deploy your code in HubSpot. You can build cool things inside projects like private apps and CRM extensions. And that's exactly what I'm going to build today. So let's get started. You can see here I have my HubSpot account open and also a VS code window with a terminal open. And the first thing that we need to do to start local dev is install the HubSpot CLI. The CLI lets us connect to HubSpot and upload our code. We can do it pretty easily by running this NPM install script here that's posted in the home screen of the CRM development tab. But I've already done this and I have the CLI installed on my computer, so I'm going to skip this step. The next thing that we need to do is actually connect our cli to our HubSpot account. And we can do this with the HS init command. This command supports an account option, and we can just copy and paste our HubSpot account ID here and pass it in via the account option. And this lets us skip the account selection step that would normally happen when you run this command and we click yes here and this is going to walk us through the flow to copy and paste our personal access key. And yes, I am going to change my personal access key later, so don't get any ideas. And now I just need to give the CLI a unique name to reference my account. I'm going to call this one my Prod account. So now we're connected. I am actually going to connect one additional account here, which is my dev sandbox account. And I'll explain why I'm doing this later. But just know that the step to connect additional accounts to your CLI is actually to run HS auth rather than HS init. And from here everything else is the same. Going to copy and paste our personal access key. Don't need this tab anymore. And I'm going to call this my dev sandbox. And I don't want this to be my default account. I still want my prod account to be the default account for the CLI there. Okay, so now we have both of our accounts connected and the next thing that we actually want to do is create our project and the CLI has an easy command for us to do that, we just run HS project create. We're going to call this the hello World project. We're going to put it in the hello World folder and we're going to base it off of the CRM Getting started project template. So it should create the project for us. We can see that it made the hello World folder the HS project JSON file, which tells us that this hello World folder is in fact a project. And here's the name. Inside the source folder we have a few notable things. We have our app JSON file which describes our app. We have inside of the extensions folder an example JSX file, and this defines our react CRM card. And then we also have an app functions folder. And inside here we have an example functions JS file. And this is our serverless app function. You'll notice inside a few of these folders we have package JSON files, and inside of here we actually define a few dependencies. And we're going to need to install these dependencies locally in order for the CLI to be able to run our project locally. So let's do that. Now we can CD into our hello, World folder and we can run NPM Install should go pretty quickly. Great. So now that this is done, we can actually start doing local development. And to do that, we just run the hsproject dev command. Now, the first thing that this is going to ask us to do is select a target account. And this is why I created my Sandbox account. The hsproject dev command requires an initial upload into the target account. This is because we need the private app as well as the CRM card extension to exist in your target account in order for it to serve and run those assets locally. So the first thing that I'm going to do actually is connect to my Sandbox account. That way I can keep my prod account fresh so it's not getting all of my work in progress changes. And like I mentioned, it's going to ask me to upload to my dev account. So this is going to kick off an upload, a build, and a deploy. We can see that happening here in real time. And while this is building and deploying, I can actually hop over to my contact page and this is where the CRM card will show once it's done building and deploying. All right, we see that the CLI finished building and deploying and now it has actually spun up all of the local dev servers that it needs to run these things locally. And you'll notice that the card still doesn't exist in here yet. And that's actually because I need to go into my custom tabs view and add the card to one of my views. So I can do that by going into my default view. And what I like to do is instead of adding it to one of these, I create a new tab called Local dev and I'll put my card inside here and it just makes it easier to find it quickly. So if I go to the add cards drop down, I should find my card here at the bottom. I can add it and I can get out of here. So that should be good. Now if I refresh here, I should see my card and my local dev tab. Great. All right, so now everything's uploaded and we actually can see that the CLI is successfully connected to the card via this developing locally banner that shows. So we are all set up to do local dev. If I want to make a change to my react component, I can do it and make use of the hot reloading that exists. So if I want to change all of this text here, that is showing up here that you just deployed your first HubSpot UI extension, let's get rid of that and say you just did local dev, as soon as I save, that change will immediately show up over here in the card. And that's no upload required. After the initial upload that happens, all local development is just happening locally on my computer. So nothing else is being uploaded into my account now. And the same goes for my app functions. So if I hop over into my example functions JS file this app function is really simple. All it's doing is returning a string and it's just inserting into the string the text that I input into this box, that this input box that gets sent as a payload to the request. So if I to show what that looks like before I make changes, if I write hello into here and then click this, it'll respond and it will pop up an alert for me that says this is coming from a serverless function. You entered hello. And this alert banner is something that's configured in the example js. If I want to make a change to this serverless function, I can do that here. I want to say this is coming from local dev. All right? And now when I click this button here, instead of going to the hosted serverless function, this is actually going to get handled locally and it's going to locally execute this example function JS file. So when I click this, we'll see this is coming from local dev and it's just that easy. All right, so that's it. We can actually see here that when I stop local dev and exit this process, if I were to refresh my page here, you can see that only the initial upload ever was manifested into this account. So all of the changes that I made to write local dev in the example function and also the CRM card, none of those actually made it into my Sandbox account. And also just to show that nothing made it into my my Prod account, I can go over to the projects in my Prod account and you can see still nothing's been uploaded here. So I'm able to safely iterate and test and do whatever I want in my Sandbox account and then when I'm happy with the changes I can move over to my Prod account. And those are the basics of local development on the HubSpot projects platform. It's really easy and I hope this was useful and I hope you're all able to go off and build some really cool stuff. Thanks. Bye Bye.