Create Your HubSpot App Project: Dev, Prod, and App IDs

Okay, this is where your HubSpot app stops being a clever integration and starts becoming a real product. By the end of this video, you'll have one local HubSpot project scaffolded, both dev and prod HubSpot apps registered from it, and the app ID is recorded so the app object approval steps are grounded in real values. All right, in our terminal, you'll see that we are on the develop branch just by doing the whole git status or just looking right here. But for, you know, for the sake of doing this on branch develop. Good. We're going to do a new branch and checkout to new branch. git checkout -b. This is going to be a feature and we're going to call this 03-appobjects. Cool. Now you can see now that we're on this feature branch and next we're going to authenticate the HubSpot CLI. Then we create two HubSpot projects inside the same developer account, one for development and one for production. Same account, different projects, different app IDs. As soon as the app IDs appear, record both of them in our system dependencies file because they control the prefix rules for everything that follows. All right. To authenticate with the HubSpot CLI, you just type in hs account auth. After you type that in, you'll have an option to open HubSpot to copy your personal access key or enter an existing one. You will select this one. Find your account in the list. I got a billion. Now remember, we're looking for your HubSpot developer account here, not your test account, but the developer account that you created initially. Once you're there, go and show that, copy it. Don't show other people this. This is, this is not— this is for your eyes only. Copy it. You can close this and go back over here to type in that key. We want to set that as our default. Yes. All right. I've set my default account. We can do hsaccountlist to confirm that it is there and set as the default account. There it is. Cool. We are authenticated. And let's actually, you know what? Let's start building something, folks. We're actually doing something. All right. Let's go back down to the command line. Make sure where we are. Go pwd for print working directory. We are in the root of our directory tree right here, which is good. We're going to do hs project create, and this is going to spin up our first project. This is going to be a developer project or develop project, so we're going to call this demo-cc-dev. So I want to make one project for development one project for production. Keep it the same place. We're going to do an empty project. Give it a second. Wadda bing, wadda bam. Gives you all these things and close up these docs and we'll click on this new stuff up here. It automatically makes a few files or rules files for your AI, blah, blah, blah. It has an hsproject.json which gives the name. The entry point, which is source, which is right here, and whatever platform version we are on. And I'm updating this to a newer version, 0.3. All right. We watch this. Who knows what platform version it is, but this is where we are. Just keep an eye on the docs to see where that actually lands. And then this is just a little overview of like what is a project. As you can see, this is blank or empty right now. And we have this option to upload, which sounds very tempting. Let's try it. First of all, let's change into this new directory to upload it. We actually need to be to the project so I can see this fella here. So cd demo-cc blah blah blah, and you'll see now we are in that correct directory. And clear, I'm going to do hsproject upload, and it is going to fail. The reason is because there's nothing in there. There's nothing really to upload in this project, and it's empty. We can go about this two different ways. One, we can create a metafile here manually, or we can actually just go hsproject add. It's going to ask us something if we want to add anything to this. We're going to do this on the marketplace. Uh, for app objects, you do need to do on the marketplace, so go ahead and select that. It is selectable here. We're going to go and select it and set it up. And you can see that in the source directory, it did build app objects, which sounds really cool, and it feels like you've done all kinds of things. And why the heck we even have to fill out a form. So let's go ahead and just try uploading it now. HS Project upload and doesn't exist. So far so good. Hit yes. And guess what? It failed because we have not been approved to have this on our portal. We can— the object name is car. If we were to go into here, we would see that it's a car. The form we're gonna be filling out is going to tell what we want to have it for the name, all kinds of information. So this is not going to work. This is going to clear all this out. But what it did do, it created this app HS meta file, which is what we need. So I'm going to close that up. I'm going to delete the app objects. Don't worry, it's fine. We'll come back to it at some point. Uh, this is the UID. This has to be unique to this specific project, uh, to this specific app. I apologize. This is the app, and this is what the description of it is, which is not correct. We're building— this is a demo app syncing you —to, to, from, spot. You obviously want this to be more descriptive. Uh, the name is not application, we're just going to take that out. Demo CCF, and we'll do, uh, demo app-ccf. Okay, and OAuth is what we want. Uh, we're going to be updating all this later on. We actually don't need these right now, so let's get rid of them. This is all good. Again, we'll go through scopes later on, we'll go through the URLs later on. You put your stuff in here, save that, and let's go ahead and run that hsproject upload again and see what happens. Boom! Prince, we did it! Let's go ahead and look. Let's see if you go there— actually, let's see, I have refreshed this. Yeah, there it is. This is one we just built. It's here. There's nothing there. Yep, it failed. Remember that? That's the failure we had because we tried to do something we shouldn't have done. I built it and then went ahead and auto-deployed it. You can set that up to auto-deploy or not auto-deploy right here. We can delete it. Uh, here is the builds, and here also is— we go into the app itself, we can see the metadata, we can see all the auth stuff, so the client IDs, client secrets. The scopes, where the redirects are, the distribution type, and where. So when we start testing, we'll be clicking on this and we'll go through this whole process again later on. Uh, but look at that, we have an app ID now, which we actually are going to need. So let's go ahead and copy that, come back over to our docs and into our system dependencies, and let's make a, uh, HS or HubSpot project, project ID. Sorry. All right. Now you can see here there's a resource, there's the value, the prod value, the status, and notes. We are going to add that here and we don't have the prod yet, so I'm just going to do that. And no status yet. Well, once we're in the process, so it would be, uh, created video 3 and no notes. Saving that. All right, let's rinse repeat and let's make the production version of this. So, uh, let's see where we are. Print working directory. All right, we are in the right place. We were in this dev, but we've moved back into a demo. If you have not, you type in cd. Let's go back, let's just go into it so you can see the actual -680. All right, so if we print working directory, you can see that we're in that dev project. cd.. will bring you back one, so print working directory again, you'll see where we are. All right, now let's go ahead and hs project create for our prod version. And this one's going to be demo-cc-prod. Project's good, location's good, and we're doing empty. All right, now if we just go into our source of this one, we're going to copy that And we're gonna go here, Source, New Folder, App, and then paste. Cool. And now we're going to change this information. So this is prod app. That's good, that's good. We need to change this to prod. Marketplace is good. All this is good. This is all the same. So just to be clear, what I did was instead of adding the app object, deleting it up here, I just copied the project, the app's meta JSON file. So again, in demo/source/app/app-hsmeta.json, I copied it and I put it over here into the production version under the same path that it will go here, right? I just renamed all the things that were, uh, dev to prod, and we should be good to go. So let's go and run hs project upload. Oh, we're not in the right place. Look, so I tried to upload this, uh, because I'm gonna close these down. I did not move our, uh, working directory. We're in the root. First, to upload this, we actually need to move it over to this project here. So cd demo, cd prod, and then we can do that. It doesn't exist yet. Let's do it and let's see what happens here. Go back to projects. Boom! We got dev, we got a prod. Let's go ahead and get— go into that prod one and into the app itself, grab that app ID and bring it back over here to our system dependencies right here. I actually put it— yeah, I did. Sorry, put a template. Crap. Let's bring it over. Copy and— and now we have two. So we have the development and the production app IDs in there. Awesome, we are off to a great place. Another thing we can do to check our project status is down here in the CLI, hs project list. And this should bring up all the projects I have in that, including their platform version. This is the exact place where I think we should stop. Next, Marina from our ecosystem quality team is going to walk through the app object approval side, what app objects are actually good for, when they're not the right fit, where the form lives, what it needs, and how to complete it end to end. Then come back and design the schema itself. With that approval context in mind. At this point, the HubSpot side of the app is real. Commit the project scaffold and the app manifest, push the branch, and make sure both app IDs are safely recorded. After Marina's walkthrough, we'll define the app object schema that those apps will actually use. Till next time. Bye-bye.