hello folks Denson developer at 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 a HubSpot developer account some test accounts underneath that account uh we're going to install node uh the HubSpot CLI VSS 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 uh links in the description below with more information uh because we're not go into 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 uh start by creating a developer account at developers. hubspot.com once you get there you'll be graded by this giant button here that is very tempting to click so I say let's click on it clicking in brings you to three different options and we're going to focus on door number one here uh creating an app developer account clicking that should bring you to the signup flow I 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 uh 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 uh they expire every 90 days and you can renew them here if if you need to uh 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 uh and the account types here I'll this link down in the description of course uh 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 uh brings you to uh The Familiar setup for a a HubSpot account uh we'll be coming back to here in a little bit but first uh 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 VSS code I use it on the daily you are not required to use vs code but I really highly recommend it and that's what I'm installing clicking on this we'll download the DMG file as you see right there uh double click all the good stuff install it and once you have it installed you should see something that looks like this this is the vs code uh window over here on the Le hand side is where you'd see the directory of all your your folder all the files in it uh they got search this is the source control integration which is really nice we're not getting into Source control but um I will have some links about that on the description below uh right here are the extensions which is what 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 uh your account as well it has some nice stuff for Hubble um I have a video that I'll link to above and all that good stuff uh that 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 uh the best way to describe that is actually to use it I'm going to open up a new window here and I going to use this is another extension I have the the co-pilot you can install that we're not going go into that at all but I'm use it to create a sample uh J sample 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 and all right so this looks awful as a Json file and if you shift command p on the Mac it'll bring up the the command pallet and the first thing I up here is format document but if it wasn't 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 um installing node all right let's talk briefly about node uh what it is and why we need it uh node as said here is a JavaScript runtime environment what does that mean it means that instead of uh running JavaScript as you traditionally think of it as in the browser uh to do interactivity with the browser you can now use Javas script to create uh server side applications for example uh there is a vast library of node uh packages out there uh you can saw them with the npm command on the command line um and the HubSpot CLI is one of those so to use 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 in installation package double click on that double click on that double click on that and then 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 Tilda on my keyboard we'll open up the terminal down at the bottom there type node DV and it'll show you which version of node you have installed you can see here they actually have an older version of node installed which is not a big deal for but sometimes what you're working with you need to have a specific version uh there is another thing you can install to do this we're not get into that right now but keep in mind uh 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 uh it has all kinds of commands uh 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 uh uploading a project when you're working on uh UI extension for example uh let's go ahead and S there are a couple ways to go about it one is via the command line which is mpm install DG to install it globally if you want to install it in a specific folder so it's not everywhere else uh you take out that g the- g and then type in at HubSpot Spell correctly HubSpot SL CLI that is one way I'm not clicking enter cuz I want to show you that there's another way to do it uh 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 uh all this stuff just uh quit vs code and reload it and it should show up uh 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 thing I'm going just do it down here in the C cuz I already have it pulled up let it do it thing it's going to take take about I don't know um a minute or so to go through the entire entire installation process uh you're going to see some deprecated warnings don't worry about any of that 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 while this installs all right now that we've installed uh the HubSpot CLI let's just confirm that it was installed successfully by typing hs- D version which should bring up the version of the 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 uh you can use HS and nit if you have an account has already been authenticated and you want to authenticate another account you use HS off so let's go with uh let's actually let's go to a folder so CD and I have a folder that I'm going to 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 talk 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 say click yes a new browser window is going to open up here uh you remember earlier we created this whatever account in our test uh 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 bito so I'm going 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 can 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 I'm going to 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 yamel file what is the name of this account and we can just you see what over 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 it's initialized because if we go into that folder I want 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.yml file with a default portal of whatever and here is the portal that we have already set up if we had multiple portals you see 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 uh 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 hit says private app here click on that and you'll see there's no private app here we're going to 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 uh object type you're going to 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 going to skip this tour for now all right now I need to go back to O 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 S the CLI uh 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 whole bunch of things if you have questions feel free to put them in the comments below and we'll work through them um one other thing that I didn't walk through is installing Postman um I have a video about Postman and one of my developer out good friends Hannah Alexon has some really good content on that on our blog I'll make sure to link to that and yeah have fun bye-bye