So you want to start coding with HubSpot...now what?

Hello, folks. Dennis Hudson Developer Advocate, HubSpot and today we are going to talk about all the things you need to do before you write that first line of code. We're talking about setting up a HubSpot developer account, some test accounts. Underneath that account we're going to install node, the HubSpot CLI VS code, some VS code extensions, and there's probably a few things I'm missing on this list, but I'll make sure to add them to the timestamps so you can hop around as necessary. Also, I'll leave links in the description below with more information because we're not going to details of each of these things. We're just going to do the setup process. All right, let's hop right on in. Okay, let's start by creating a developer account@developers.HubSpot.com once you get there, you'll be greeted by this giant button here that is very tempting to click. So I say let's click on it. Clicking in brings you three different options and we are going to focus on door number one here, creating an App Developer account. Clicking that should bring you to the signup flow. I have already gone through this whole process and I'm not going to repeat it. So I'm going to move on over to the actual developer account. And you know you're in a developer account because you'll see this banner up here says this is an app developer account. This is where if you're going to build an app for the marketplace, you'd be working out of here. And it also allows you to create test accounts, which is what we're going to focus on today. Right here is managed test accounts. And these are accounts that have 90 day trials to enterprise features. They expire every 90 days and you can renew them here if, if you need to. You can test your apps out against it. UI extensions you can test here. It's pretty cool. You can look at all the, the limitations and the account types here. I'll just link down in the description. Of course, moving back into there, let's go ahead and create an app test account and you can call it whatever you want, whatever create. And as simple as that, you've created an app developer account as well as a test account underneath it. You can see it. Clicking into it brings you to the familiar setup for a HubSpot account. We'll be coming back here in a little bit, but first let's go ahead and install VS code. Okay, let's go ahead and install a text editor and the text Editor I have chosen is VS code. I use it on the daily you are not required to us VS code but I really highly recommend it and that's what I'm installing. Clicking on this will download the DMG file as you see right there. Double click all that good stuff, install it. And once you have it installed you should see something that looks like this. This is the VS code window. Over here on the left hand side is where you'd see the directory of all your your folder, all the files in it. They got a search. This is the Source Control integration which is really nice. We're not getting to Source Control but I will have some links about that on the description below. Right here are the extensions which is we're going to mess around with right now. And we're going to install two extensions. The first one is HubSpot and this is going to allow you to interact with your account as well. It has some nice stuff for Hubble. I have a video that I'll link to above and all that good stuff that goes goes into more detail about this extension. The other thing we're going to install is something called Prettier and prettier is going to take whatever code you're working on and it's going to make it look pretty. So the best way to describe that is actually to use it. I'm going to open up a new window here and I'm going to use this is another extension I have the copilot. You can install it. We're not going to that at all, but I'm going to use it to create a sample J. Ooh smaffle sample JSON file. And there we go. We're going to accept and we're going to just say let's we have this and this is on down here. You know, clearly you wouldn't do this but you know, just for demo sake. All right, so this looks awful as a JSON file and if you shift command P on the Mac it'll bring up the command palette. And the first thing I have up here is format document. But if it was up there, just type it in and it'll show up. Clicking on that, you'll see that it makes it pretty again. Now let's move on to installing Node. All right, let's talk briefly about Node, what it is and why we need it. Node, as said, Here is a JavaScript runtime environment. What does that mean? It means that Instead of running JavaScript as you traditionally think of it as in the browser, to do interactivity with the browser. You can now use JavaScript to create server side applications. For example, there is a vast library of Node packages out there. You can install them with the npm command on the command line. And the HubSpot CLI is one of those. So to use the HubSpot CLI we need to install Node. There are a few ways to go about it. The easiest way is just to click on this. It's going to download installation package. Double click on that, double click on that, double click on that. And then you should install Node. Once Node is installed, you can verify that it was installed successfully. Go by going back to VS code and we're going to open up a Terminal window here. You can either do it this way, go terminal, new terminal, or as I usually do, control Tilde on my keyboard will open up the terminal. Down at the bottom there, type Node V and it'll show you which version of Node you have installed. You can see here that actually have an older version of Node installed, which is not a big deal for now, but sometimes what you're working with you need to have a specific version. There is another thing you can install to do this. We're not getting to that right now, but keep in mind there is Node Version Manager out there which allows you to have multiple versions of Node if you're working in different environments. Okay, now that we know we've successfully installed Node, we are going to install the HubSpot CLI. The HubSpot CLI is going to allow you to interact with your HubSpot account. It has all kinds of commands which I'll have a link to in the description below that allow you to do all kinds of things from create a module when you're doing CMS work to uploading a project when you're working on UI extension, for example. Let's go ahead and saw it. There are a couple ways to go about it. One is via the command line which is NPM install dash g to still install it globally. If you want to install it in a specific folder so it's not everywhere else, you take out that G the dash D and then type in at HubSpot spell correctly HubSpot/cli. That is one way. I'm not clicking Enter because I want to show you that there is another way to do it. If you remember, we did install the HubSpot extension for VS code. So if I click on this little sprocket over here, if you don't see this and you just installed all this stuff, just quit VS code and reload it and it should show up. Click on that and you'll see down here we have an option to install the cli. Clicking on that is basically going to do exactly the same thing as this. So go ahead and do that. Install it. It's going to go through the whole things. I'm going to just do it down here in the CLI because I already have it pulled up. Let it do its thing. It's going to take about, I don't know, a minute or so to go through the entire entire installation process. You're going to see some deprecated warnings. Don't worry about any of that. It looks scary when it's coming from the terminal. Also, this stuff looks like you're doing really cool hacker stuff, you know. So enjoy for a bit while this installs. All right, now that we've installed the HubSpot CLI, let's just confirm that it was installed successfully by typing HS Dash Dash version, which should bring up the version of HubSpot CLI that we have in 5.1.2. Awesome. And let's go ahead and initialize the CLI. So we've installed it now. We're actually going to make that connection to your account. If you've never done this before, you can use HS init. If you have an account that's already been authenticated and you want to authenticate another account, you use HS auth. So let's go with. Let's actually. Let's go to a folder. So CD and I have a folder that I'm going to Dr. Drag in there real quickly. And now we are going to do HS init. What this is going to do is going to say, all right, we need to go to a browser window, we need to get an access key key and we need to authenticate with the account you want to use so we can start talking to it. This is going to create a YAML file in the folder. This demo folder that I have. I'll show you in a second. And let's go through the process. Click on that says, okay, let's do it. We're going to open up. Set. Click. Yes. A new browser window is going to open up here. You remember earlier we created this whatever account in our test developer account. This is a test account that I have. So we're continue with that. If you don't see the one you set up, you go to view your other accounts here and find it on the list. Click continue. And I just did this a little bit ago, so I'm going to deactivate this and start from scratch. All right, so you'll see something shows up like this. And this has all the permissions that we're going to allow the cli. So if you were not doing any type of CMS development, you could get rid of this. If you're not doing any type of CRM development, you get rid of some other things. I don't see a reason really to unselect anything. So let's just keep it all. Generate the personal access key, show it and copy it. And then when I close this window, coming back to the CLI command V to bring it in there now it's going to say, okay, let's, let's. What do you want to call this in our YAML file, what is the name of this account? And we can just, you see, whatever there is a suggestion. So I'm just hit enter and it's going to take that. And now we know that it's installed and we know that's initialized because if we go into that folder and I'm going to bring that demo folder into VS code real quickly, all right, and get rid of that other one. So now in that demo folder you'll see that we have this config YAML file with a default portal of whatever. And here is the portal that we have already set up. If we had multiple portals, you know, the dash and then the name, the whole thing here with another name here and another access key, etc. Etc. All right, I'm going to close that. We know it's working. And now we're going to move on to creating a private app in our test account so we can do some UI extension work. So what I'm going to do is go back over to my browser and I believe this was it. See, I need to go to whatever. All right, click on that, open it up. I'm going to make this big over here. And I am going to go over here into my settings. Click on that, go down to integrations. Then I hit this private app here. Click on that, and you see there's no private app here. Create a private app. You can name it whatever you want. We need to define some scopes. So depending on what you're working on, if you're making a UI extension, we need to have that minimum, whatever object type you're gonna be working with so we can do contacts. If you do not get all the scopes you need on the first go around, you'll get an error. When you're working with things and you can come back here and add the correct scopes. So let's, let's say that I forgot to add the right scope and I just hit create. App. Cool app has been created. Here's our key, and we're gonna skip this tour for now. All right, now I need to go back to authentic. I need to edit this app real quickly. And you see back here it says scopes. And then we'll go back to CRM, then write, and then commit the change. Yes. Cool. And we are good to go. So these are the basic steps that you need to take to start working with HubSpot. We've gone through set the clique, we've authenticated the CLI to our HubSpot account. We created the test account and the developer account and a private app. We've installed Node. We've done a whole bunch of things. If you have questions, feel free to put them in the comments below and we'll work through them. One other thing that I didn't walk through is installing Postman. I have a video about Postman and one of my developer app good friends, Hannah Selleckson, has some really good content on our blog. I'll make sure to link to that. And yeah, have fun. Bye. Bye.