Unleash Efficiency By Creating a Local Development Environment Pipeline

Hey y', all, It's Brooke with HubSpot Academy. Today I'm going to go over the best practices for prepping your local development environment to develop with HubSpot. The crux of your local development environment is your HubSpot configuration file, also known as a YAML file, which has the information needed to connect your local development environment to your HubSpot accounts. Creating this file correctly gives you the ability to create a sustainable pipeline for building and deploying your projects. So now let's check out what's possible with HubSpot development. First, let's start in Visual Studio code, my code editor of choice, which has a lot of great HubSpot extensions. And I'm going to open up a new terminal. In my terminal, I'm going to use MKDIR to create a new folder. We're going to call this demo, and then I'm going to cd into that folder. Now I'm going to run HS init, which will start to create my HubSpot config file. The first thing it will want me to do is Open up my HubSpot account to copy my personal access key. So I'm going to click Y to say yes, and then it's going to open up a link to your HubSpot accounts and I'm just going to choose my personal account and then click Continue, click Show and Copy, and then you can close this. Put in your personal access key here. And now you need to create a unique name to reference this account in the cli. So I'm going to go ahead and call this prod account. Next, what I'm going to do is create a development Sandbox account. If you don't have access to a development sandbox account, but you want to create a testing environment, you can sign up for a free HubSpot developers account. And then inside of your developer account, you can create multiple testing accounts. For this one, I'm going to use the CLI command HS Sandbox Create to create a new sandbox. It's going to ask me if I want to create a development sandbox or a standard sandbox. The development sandbox is an isolated environment specifically for developers. And then it's going to say to name my development sandbox, I'm going to just call it Dev account and then it's going to ask you if you want to sync your CRM object definitions from your prod account to your dev account. So if you have any custom objects in your production account, you can sync them over automatically to your development account. I'M going to say no for right now, and then it will go ahead and create your development sandbox. And now it will also make you go through the personal access key setup. And now that we've done that, I'm going to go ahead and open up that folder that we created inside of my VS code. Now, if you're working with HubSpot Development a lot, and you have just a couple of main HubSpot accounts that you are creating with, you can set your config file to be in the topmost parent folder of any folder structure, and then all of your child folders inside of that folder will have access to those HubSpot accounts. So you don't have to create your YAML file each time you're creating a new project folder if you have your YAML file nested in the parent folder of whatever file structure you're using. All right, now that we have our YAML file in place, I'm just going to open it up to show you what it looks like inside. So the first thing it's going to say up here is what development default portal you are using. And then it will have the different portals listed out with the information, including the access token information and the personal access key. So make sure that if you're putting Anything onto a GitHub repository or online, that you just make sure that you ignore this file so that it doesn't go on the Internet and accidentally puts your personal access keys at risk. So now we're going to open up our terminal again, and in order to show how this is going to work, I'm going to go ahead and create a sample project using the duplicate contact project that you can find on the GitHub UI extensions examples GitHub repository. So all you have to do is run HS project create and then use the template source, the location and the name of it. And again, you can just copy this straight from the the GitHub and I'll link that GitHub repository down in the links below. And now that you can see, we've created our project folder. So let's CD into that duplicate contact folder that we created. And now that we're inside of it, we're going to add to our package JSON a couple of things that are going to help us make it easier for us to develop locally. So instead of it reading what it reads now, I'm going to change it to eight HS Accounts Use Dev account and then to have it run multiple CLI commands at one time, you just put two ampersands in and then we're going to do HS project upload. So what this is going to do is we are going to run both the HS Accounts use command and the HS Project Upload command at the same time. And we're also going to do one for Producer and this one is going to be the same as the one above, but it's going to be HS accounts use and it's going to be our Prod account. So whatever the dev account and the Prod account, whatever you called it, that's what you're going to put inside of the dev account and Prod account area. And then we'll use the HS project upload again. So now that we have those two new scripts, I'm going to go ahead and run NPM Run D Dev. And now it says the project Duplicate contact does not exist in the dev account. Would you like to create it? Yes, we would like to create it and it will go ahead and build and deploy it. Now that it's been built, let's go into our HubSpot account to check it out. In our HubSpot account we're going to go to Contacts and you won't see it right now. And that's because you have to customize your tabs, change the default view. I'm going to add a new tab called Custom just so we can see our UI extensions in one place. Then scroll down until you see extension cards, click the checkbox, press save and exit. And now we see our Custom tab and we see our duplicate a contact example card. And all you have to do is enter a new email for the contact and that will duplicate the contact. So let's try this out. And now it created a new contact with all of the same information. So that's great. So now it's working here. So now what we're going to do is go back into VS code. Now inside of our terminal we are going to run that NPM run Prod. This is going to switch us over to our production account and is going to upload it straight to our production account. Now, with your gamma file connected to your different HubSpot accounts, you can get started building and deploying new projects. Make sure to check out the links in the description to learn more on HubSpot Academy. Like and subscribe to the developer's YouTube channel and I'll see you in the next video. Bye bye bye.