Transcription: OpenAgents Episode 004 - Deploying a Landing Page

Source: https://twitter.com/OpenAgentsInc/status/1722068606714835283 Wiki source: https://raw.githubusercontent.com/wiki/OpenAgentsInc/openagents/Video-Series.md Media title: OpenAgents - Episode 004: Deploying a Landing Page We create a basic landing page a... Upload date: 20231108 Transcription model: gpt-4o-transcribe-diarize Generated at: 2026-06-01T00:43:50Z

Machine-generated transcript. Review speaker labels and wording before using this as quote-grade source material.

[00:00] Christopher David: Let's see if we can build a quick landing page and deploy it.

[00:06] Christopher David: I use Laravel Forge for deploying Laravel apps.

[00:12] Christopher David: It's like an orchestration layer on top of any cloud.

[00:17] Christopher David: So you can connect your AWS credentials,

[00:19] Christopher David: create a server,

[00:21] Christopher David: and then it's all just done through this dashboard,

[00:23] Christopher David: which is pretty easy.

[00:23] Christopher David: So I just recently created a new server.

[00:27] Christopher David: With PostgreSQL 15,

[00:28] Christopher David: via Forge, PHP 8.2,

[00:31] Christopher David: and I'll show you how to connect a site into here.

[00:37] Christopher David: So first thing I know I need to do is take the public IP and create a record for that.

[00:47] Christopher David: And we're going to use Cloudflare and this new domain I just registered,

[00:52] Christopher David: openagents.app.

[00:54] Christopher David: I think that's all I need to do there.

[00:56] Christopher David: Alright, so let's go open agents dot a_b_p_

[01:00] Christopher David: project type uh later I'll do envoyeur,

[01:07] Christopher David: but not yet.

[01:09] Christopher David: Envoyeur is for no downtime installs. It was like an extra cloud step. Um

[01:17] Christopher David: That's okay.

[01:18] Christopher David: There's like a split second of downtime while it swaps one server to the next.

[01:22] Christopher David: But we'll care about that later.

[01:24] Christopher David: Alright,

[01:24] Christopher David: so here I connect a GitHub repo.

[01:27] Christopher David: So we'll use this one here.

[01:31] Christopher David: Branch main,

[01:33] Christopher David: install composure dependencies yes,

[01:35] Christopher David: deploy key,

[01:37] Christopher David: I'm not sure what that is.

[01:38] Christopher David: So install repo.

[01:49] Christopher David: And after that's done, I think the only thing else we have to do is set up S_S_L_

[01:57] Christopher David: Yeah. Okay.

[02:00] Christopher David: Did that deploy? No.

[02:02] Christopher David: So now we need to deploy it.

[02:17] Christopher David: Okay.

[02:16] Christopher David: I don't think I need to... Oh,

[02:18] Christopher David: database Laravel does not exist.

[02:20] Christopher David: So we

[02:25] Christopher David: need to fix in the deployment script here.

[02:39] Christopher David: Alright, before we do that, let's go and do the SSL.

[02:49] Christopher David: Oh, that'll probably fail because I didn't set up the WWW.

[03:10] Christopher David: Let's try that again.

[03:13] Christopher David: I'll just do the non WWW and then we'll set up the

[03:18] Christopher David: www.redirect on Cloudflare.

[04:13] Christopher David: Oh, the database name is open agents.

[04:21] Christopher David: And I'll come back in later and change the password.

[04:27] Christopher David: Okay. Is that right? The database, open agents. Yeah, I dunno why it says Laravel, guess that's the default uh database which I assumed would be

[04:38] Christopher David: auto-populated.

[04:41] Christopher David: So database is open agents. I think the username is still Forge.

[04:50] Christopher David: Let's see if that made a difference.

[04:54] Christopher David: Deploy now.

[05:06] Christopher David: Okay.

[05:10] Christopher David: Looks like that worked.

[05:11] Christopher David: Migration's run.

[05:17] Christopher David: And our SSL is active.

[05:21] Christopher David: So,

[05:22] Christopher David: moment of truth,

[05:23] Christopher David: what's gonna happen?

[05:25] Christopher David: Alright,

[05:26] Christopher David: the domain resolves. Server error.

[05:29] Christopher David: Let's go see logs.

[05:32] Christopher David: What did we do wrong here?

[05:34] Christopher David: Ah,

[05:34] Christopher David: VEET manifest not found.

[05:36] Christopher David: Um,

[05:37] Christopher David: this is a simple fix.

[05:39] Christopher David: There is a script that we need, which I'm just going to grab from the agents site.

[05:47] Christopher David: When you deploy,

[05:48] Christopher David: there

[05:50] Christopher David: is a,

[05:56] Christopher David: oh gosh.

[06:00] Christopher David: Ordinarily deployment script would be here. This I moved over to Envoyer.

[06:10] Christopher David: get the deployment hook called build VEET.

[06:15] Christopher David: Here we go.

[06:17] Christopher David: And I need to add this to the deployment steps for Borge.

[06:24] Christopher David: We'll do Envoyer in a future video.

[06:29] Christopher David: Deployments. So basically this is the script that gets run when you deploy.

[06:35] Christopher David: It goes into the folder,

[06:36] Christopher David: it pulls down any latest changes from GitHub.

[06:39] Christopher David: Runs composer install,

[06:41] Christopher David: runs any database migrations, and then here it will run the build to generate the VEAT manifest for the JavaScript.

[06:50] Christopher David: Now hopefully that should work.

[07:02] Christopher David: TSC and VEAT build,

[07:03] Christopher David: that's good.

[07:11] Christopher David: building for production

[07:17] Christopher David: Built.

[07:19] Christopher David: ObanAgents.app is live with the placeholder.

[07:23] Christopher David: Now,

[07:24] Christopher David: can I register?

[07:25] Christopher David: Chris.

[07:35] Christopher David: Booyah.

[07:37] Christopher David: User number one.

[07:40] Christopher David: So we've got openagents.app,

[07:42] Christopher David: openagent.app slash dashboard.

[07:45] Christopher David: I am logged in. I can go to my profile,

[07:47] Christopher David: change my name to CB.

[07:52] Christopher David: Can update my password,

[07:54] Christopher David: delete my account.

[07:56] Christopher David: Very nice.

[07:58] Christopher David: If I go to the homepage,

[07:59] Christopher David: it says dashboard up there.

[08:02] Christopher David: And if I log out, I got that.

[08:03] Christopher David: Okay, let's now do a couple things.

[08:09] Christopher David: One, let's set up auto-deploy and

[08:13] Christopher David: auto-deploy or quick deploy.

[08:17] Christopher David: So now whenever there are changes to the main branch of our Open Agents repo,

[08:24] Christopher David: it'll automatically deploy. Deployment takes about five, maybe 10 seconds.

[08:32] Christopher David: Which is a nice change from Vercel, which takes like two minutes.

[08:36] Christopher David: So here we've got our development server.

[08:39] Christopher David: And what I'd like to do is maybe pull over the splash page, this kind of code,

[08:45] Christopher David: from the other site.

[08:48] Christopher David: Change the wording a little bit.

[08:52] Christopher David: Let's just pull up that code base.

[08:56] Christopher David: All right, so let's do a little tour of what our landing page is made out of.

[09:01] Christopher David: So the home route, any web routes are defined in routes.web.

[09:08] Christopher David: This is the handler for the root route.

[09:10] Christopher David: Right now this is rendering an inertia page on the

[09:17] Christopher David: new site and on the old site.

[09:19] Christopher David: Yeah,

[09:19] Christopher David: we're just rendering welcome,

[09:21] Christopher David: but we're not passing in this can login stuff.

[09:24] Christopher David: Right now we don't want people to be able to log in.

[09:27] Christopher David: Okay, so um, simplest to do here would be to just come over here.

[09:33] Christopher David: I don't know why we have so many errors here.

[09:41] Christopher David: I'm gonna get the prettier. This four space indenting is kind of crazy.

[09:57] Christopher David: So here's what we'll do.

[10:00] Christopher David: We'll keep the old version of this here for now just if people want to look at that.

[10:08] Christopher David: And let's make some changes.

[10:12] Christopher David: Instead of welcome it's called home.

[10:21] Christopher David: If we just strip out all of this.

[10:48] Christopher David: Okay, I don't want all of this stuff,

[10:54] Christopher David: I

[10:56] Christopher David: don't think we'll need any of these props for now,

[10:58] Christopher David: I just want a simple website,

[11:01] Christopher David: simple web page, none of this other stuff.

[11:04] Christopher David: Let's remove all of these things, I don't care about the PHP version or any of that.

[11:11] Christopher David: And for now let's also comment out

[11:14] Christopher David: the dashboard and auth routes.

[11:20] Christopher David: Let's also use a catch-all redirect.

[11:24] Christopher David: Do I have a catch-all over there?

[11:26] Christopher David: Let's see if Copilot can help us with that.

[11:30] Christopher David: Add a catch-all redirect to the homepage.

[11:39] Christopher David: Let's see if that works. So if I go to localhost slash blah blah blah, it's not an actual route redirect.

[11:43] Christopher David: That's nice.

[11:48] Christopher David: Okay.

[11:50] Christopher David: Let's commit that to simplify to home route only.

[11:59] Christopher David: And clear out welcome page.

[12:02] Christopher David: And on the actual welcome page, let's see if I can just grab.

[12:08] Christopher David: this.

[12:13] Christopher David: Now there have a guest layout. Do I want to bring that over?

[12:20] Christopher David: Yeah, I think we'll do that. Let's just pull the entire welcome page over from the previous site.

[12:27] Christopher David: And it doesn't know what the

[12:33] Christopher David: guest layout is or does it?

[12:38] Christopher David: Oh, there is a guest layout.

[12:42] Christopher David: But I want it to be this.

[12:55] Christopher David: I don't have heroic cons installed. Let's do that.

[13:20] Christopher David: Okay,

[13:25] Christopher David: it's looking not horrible

[13:29] Christopher David: What else do I want I don't want those white slashes when I scroll up and down which I think is a function applying

[13:51] Christopher David: BG background let's do this BG

[13:57] Christopher David: background is from shad components which we do not yet have yep

[14:07] Christopher David: that did that let's

[14:12] Christopher David: see

[14:23] Christopher David: We'll call that um add her accounts pull over previous welcome screen.

[14:36] Christopher David: And um I don't know about the AI army line, let's make it nicer.

[14:54] Christopher David: Let's remove the wait list piece for now.

[15:08] Christopher David: Let's remove login.

[15:37] Christopher David: I actually don't really want any of this right now.

[16:25] Christopher David: Uh where does title come from?

[16:31] Christopher David: Oh.

[16:35] Christopher David: Okay.

[16:39] Christopher David: Let's call that simplefy

[16:43] Christopher David: layouts and welcome.

[16:49] Christopher David: Let's see how we're looking.

[17:04] Christopher David: That's probably fine for now.

[17:07] Christopher David: And then I think up top that's gonna say Laravel because it's using the

[17:13] Christopher David: site name.

[17:17] Christopher David: Where is that defined?

[17:21] Christopher David: I just kinda wanna hardcode this.

[17:26] Christopher David: Call this open agents.

[17:52] Christopher David: Alright, well I guess I can just change that in the ENB file.

[18:02] Christopher David: Let's do that now. Edit files.

[18:27] Christopher David: Okay, let's

[18:43] Christopher David: just say coming soon.

[19:00] Christopher David: Okay.

[19:01] Christopher David: You know, more to do there.

[19:03] Christopher David: But let's test it out.

[19:13] Christopher David: Pushing those changes up to GitHub.

[19:17] Christopher David: You can see in here the deploying.

[19:25] Christopher David: Building.

[19:38] Christopher David: Is it going to give us type

[19:42] Christopher David: errors,

[19:42] Christopher David: which

[19:48] Christopher David: conceivably is nice, but I don't care about these things right now.

[20:01] Christopher David: tsc and veed build because that's the i see npm run build i

[20:18] Christopher David: guess i should just try fixing the error watch this it looks like the same error guess layout i should just need to make that

[20:27] Christopher David: Title Property Optional

[20:54] Christopher David: That's not really how it should be, but I don't really care right now.

[21:01] Christopher David: Okay.

[21:04] Christopher David: Fix type error,

[21:06] Christopher David: let's try that again.

[21:11] Christopher David: Yeah, TypeScript can kind of be a pain,

[21:12] Christopher David: but particularly when we get multiple people working in this code base, having some type backups and having things fail if people don't properly type their stuff will save us headaches in the long run. I'm fairly certain.

[21:36] Christopher David: Ta-da!

[21:40] Christopher David: Okay, we now have a super basic landing page deployed to our website at openagents.app.

[21:48] Christopher David: We've got the database set up, we've got the auth system set up,

[21:52] Christopher David: we've got SSL set up.

[21:57] Christopher David: What should we put on our new website?