Getting Started with AgencyOS

Speaker 0: Hi there. Bryant here for Directus. Welcome to Agency OS. I'll be your guide along the way. Let's dive right in and get you spun up on the platform.

Directus Cloud dashboard using GitHub or your email address and then we'll create a new project. So I just give this a project name, my agency operating system, URL, which is gonna be where we access the project, and then we will spin this up. Any new accounts get a 14 day free trial, so you can give it a test run. Why Directus Cloud? Well, for starters, you do not have to mess with any DevOps.

You don't have to worry about deploying your platform. You spin up the cloud instance and it is ready to go, ready to scale right out of the box. Your instance should spin up in under 2 minutes and then you'll receive login credentials via your email. So just pull up that email, hit the URL, and log in to your Project. So, when you log in your project will be blank.

But don't fear, we're gonna fix that. The first thing that we're gonna do is go to your admin user and scroll down until you see the token field. So we're gonna generate a static token to use with our template CLI command. Please don't forget to save the user after you generate the token because it will not automatically save the token. The next thing we're gonna do is pull up the terminal and we're gonna run a command together.

Npxdirectus template cli Apply. This will ask you to install a package. You just need to confirm to install this, and then you will receive a prompt. So you can choose to apply our official templates, which is what we're gonna do here. We're gonna choose the agency OS template, and then we get asked for our directus URL.

So this is your cloud instance that you just spun up. In my case it's bryants agency.directus dot app. And then the next thing will be that token. And you copied it and pasted it somewhere so you've got it. You just knock that in there and then the template CLI will start doing its thing.

Now, this process does take several minutes because we are populating everything into your instance. All the collections, all the tables, all of the individual sample data and assets. Now once the template is done, you can just do a refresh on your Directus instance and boom. Now you will have access to the Agency OS backend. So if we just browse through here, you can see all the different collections of content.

On the left, we've got, your website. You've got different projects. You've got all of your organizations and contacts. We'll dive into that into other videos. But for now, let's show you how to spin up the front end of Agency OS, the website and the portal.

So we're going to go back to the GitHub repository. And you can see the installation instructions if you want to spin this up locally first. But for the purpose of this video, we want to deploy something now. We are going to use the one click button for deploying to Vercel. So you will link your GitHub account and create a new repository.

We'll just call it bryant's agency OS. And then it will prompt you for the environment variables. So these are the secret values that are used to communicate with Directus. The Directus URL is just going to be your cloud instance that we spun up. The server token can be that admin token that you just spun up, or you can create another user to use as the server token.

And then we have things like public site URL, Stripe's secret key, and publishable key if you want to use billing. We'll just leave those blank for now or enter NA so we can spin this project up. Vercel will go through and build the project and within, several minutes we will have a live front end that works perfectly with the back end setup by Directus. So we check the deployment summary. Everything looks good.

Let's go to the dashboard. So we'll click Continue to Dashboard. And I'm gonna log in to my own personal account, which is where this particular project was spun up. And then we'll just visit the front end. So, let's take a look.

Boom. There it is. There is our website. Looks great. Now, how do we get started developing on this?

So we'll go back to GitHub, we'll look for our repositories. And you can see we've got Bryant's Agency OS here. This is that repository that, Vercel created during that process. I'll just go to the code section and you can use the GitHub CLI or the regular terminal commands to fire this up. We're just gonna copy and paste that command inside our local directory.

So GitHub is gonna clone that. We will navigate to that directory. So, OCD Bryant's Agency OS. And then I'm going to do npm I or pnpmi to install all the dependencies for the project. So I'm gonna get an error here because I haven't set up our environment variables.

So let's just open this up in Versus Code and start developing. I'm gonna go and the first thing you should do is duplicate your env file, the example file, and make sure that you set the Directus URL, the Directus server token, and your Stripe keys if you want to test the Stripe Billing. Make sure you do not commit any of these keys to the repo, and the git ignore file should already take care of that for you. But once you have this set up, we will just p npm dev inside the terminal and Nuxt will spin up for us on the front end. Now while that initial dev server build is happening, I am just gonna do some rearranging on my Windows so I can look at our code and the website side by side.

Alright, so there you have it. You've got the back end of Agency OS setup on Direct cloud. You've got your front end served up on Vercel and ready to develop locally. Stay tuned for the next videos in this series where we dive deeper into some of the advanced functionality available within AgentC OS.