Deploy in seconds to machines you control

Deployment is baked into Elements. It uses a peer to peer protocol to deploy directly from your laptop to remote machines, which is why a deploy takes seconds instead of minutes. Any Ubuntu Linux box with SSH access will work. We recommend a $6 DigitalOcean droplet to get started. Deploys are atomic. Type checking, tests and database migrations all run as part of the deploy, and any failure stops the deploy rather than corrupting your release. Your entire CI collapses into one command. In this video we start by deploying to one box with nothing but an IP address, no domain required. Then we scale to two machines and a managed Postgres cluster with a domain name and SSL. Elements load balances across the machines and keeps the certificates up to date. At the end we deploy from a phone. What you do not set up: a load balancer, SSL certificates, a job server, a CI pipeline, build workers.

Elements deploys are really fast. In this video, we'll deploy to a single digital ocean droplet, scale out to 2 machines with hosted Postgres, and at the end, deploy from a mobile phone. To get started, let's create an application. Called myapp and I'll change into that, oop, change into myapp and start up the server. And that brings up the normal localhost:4000 server running locally.

Once we have that, let's create a database migration so that we can play with data right off the bat. To do that, I'll do elements, create migration. We'll just create a simple table called items. It doesn't really need to be anything real. The whole purpose of it is just to demonstrate database migrations. Once we have the migration, we'll open up the file in Vim and let me show you the project so you can see how it's organized. We're going to go into the migrations folder and open up this migration that was just created. And I'll update it by simply adding a description field of type text. And then I'm gonna insert a couple of records just so that we have something to play with. Let's make sure I spell it correctly. OK, great.

And when I save that, the database will be automatically updated, and we can verify that when I quit out of this by typing elements dB, and that will connect me to the local database and I'll select star from items to make sure that I've got a couple of items in there, and I do. Perfect. So we've got our local database up and running.

Next up, let's go up into the application itself into the HTML template and actually write these items out into the HTML so we can see it and that way we will be able to know that we've got some items locally and we will deploy and see those same items on our deploy box. OK, so I'll start off by just making a simple title here, saving as I go, and we'll loop over using a for loop the item of items. And this will be as simple as it could be. I'm just gonna literally print out the description. I'll get some compiler errors here until I fix this.

Let's create a constructor attribute called items that is just an array of type item, and I'll initialize it to an empty array. We'll create an interface called item that is just the ID of type string and the description of type string. And I saved that. That should make the errors go away, but our list is going to be empty because I haven't actually passed any items into the constructor. So let's go and look at where this is used, which is in the route, and here's the route function that Calls into our HTML and what I'm gonna do is first import the. Item from template and then let's create something called items which is a SQL query that will return on a row, an array of items. And I'll just select all of them and then grab all of them so we don't end up with a cursor, but we actually get an array and I'll pass that into the HTML template.

Over on the right, immediately I see item 1 and item 2. Great, so I've got everything working locally and what we need to do next is to set up Digital Ocean or any deployment provider, any hosting provider that you want with a machine that we can use to deploy to. Let's head over to Digital Ocean. I'll log in and We'll head over to the uh droplet section or right from the top, you can say create droplet.

Now with Digital Ocean, it's very easy to set up droplets which are really just hosted hosted instances, virtual machines that you can use. Elements can work with any deployment provider that allows SSH into the boxes. So that would be Amazon, Digital Ocean, Linode. There's a bunch of them out there. I think Digital Ocean is a great place to start if you need a recommendation. OK, we're gonna create our first droplet in the New York Data Center. That's fine, even though we're in California. It'll make the deploys slightly slower, but still will be pretty quick.

Scroll down, uh, you want to pick Ubuntu, and that's the operating system that Elements, uh, supports right now. It's a Linux deployment environment. Just pick the latest version, 24 is fine. With scroll down, you can use a regular SSD CPU and you can pick the $6 per month option. $4 per month will work as well. 400, 512 megabytes is enough, but 1 gigabyte gives us a little bit more safety, and we get a little bit more disk space with this as well. So, I think $6 is worth it.

And we scroll down, if you don't have an SSH key yet, just go ahead and add this by clicking this button and follow the instructions that they give you to create an SSH key over on the right. I actually already have one, so I'll select it, and you can leave all the other options down here by themselves, leave them as they are, and I'll come over here and create that droplet. And that might take a minute or two to create. It's usually pretty quick. And when it's done, you're going to get a public and a private IP address. You're going to save those away, and we're going to provide that to Claude Code in a second, which will configure elements for us.

Now, while this is getting set up, there it is. It actually already finished before I had a chance to go create the 2nd droplet. We're going to save this public IP address and the private IP address, but let me come back to this in a second. Let's go ahead and create another droplet just so it's ready and we have everything ready to go here before we have to scale out. We'll start off with just deploying to 1 machine, but we're going to come back and deploy to 2 in a second. OK, I'm going to add another droplet, same data center, same operating system. Come down here, same regular CPU option. We'll pick $6 select my SSH key, and create that droplet.

And while that's finishing up, I'm going to head over and get our database set up as well. Now an important thing to remember when you're just prototyping and you deploy elements to a machine, to just one machine, it actually ships with Postgraphs, so you don't have to worry about having a managed database. But when you're ready to have more than one machine or you really want to have a little bit more scalability or redundancy, backups, different services that hosting providers provide, you can use a managed database. So we'll go ahead and get that set up. I'll create a database cluster in Digital Ocean. I'm gonna pick Postgres and whatever the latest version is fine, at least version 16. Uh, but as of this screencast, it's version 18. So, we'll go with that.

And then just head down, pick the standard edition. Pretty much all of these options, I think are gonna be just the standard options. You don't need to do anything special here. And you can leave the database cluster name, whatever it is it recommends. If you want to change it, you can change it. It doesn't matter. And then we'll create the database cluster at the end. Now in my experience this takes 5 to 10 minutes. It takes a little bit longer than creating droplets, so you can just let this complete in the background and we'll head back over to the droplets and I'm going to grab the first one. We're just going to start off deploying to a single machine to make it simple so that you can see what using an IP address only looks like.

OK. Let me scroll down so we've got these IP addresses. I'm going to open up Claude Code. And the reason I'm doing that is because uh Claude will make it really, really easy to configure elements. It's just gonna configure elements under the hood and do the first deployment for us. Notably, client, uh, Cloud is not actually doing a deployment from scratch. It's not going into the Linux box and, and monkeying around. It's actually using elements to do the deployment. But if you don't want to learn the right configuration, syntax and all of that, you can just ask your agent to do it for you, and it's pretty quick.

So I'm going to click the copy button and copy that public IP address over here and then this private one as well. We're going to give it Because when we start to load balance, we're going to need both the public and the private IP. And I'll just give Claude a message like, help me deploy my app to Digital Ocean. I can just give it a little bit more context if I want, but you don't really need to. And when I press enter, it'll go about reading the elements manual to figure out what it needs to do to configure elements and get the deployment going. It might take a minute or so. The first deployment is usually about one minute once you have your configuration set up and it runs the deployment.

But all Elements need is an IP address and a box that is Ubuntu Linux that it can SSH into, and that's it. It's going to go into that box. It's going to configure it and provision it with the elements installation and anything else that it needs. It's going to set up the Postcrest cluster and then it's going to run the actual first deployment of the application to that machine. So the first deployment might take a minute. Or so. And then after that, every subsequent deployment is we call hot. It's really fast. It's just going to do the minimum that it has to do to get the deployment up and running, send the minimum number of files and so on. So it will only take usually 1 to 4 seconds, even if it's across the entire country.

OK, it's all done and we have an actual IP address. So, I'm gonna just paste that in here. And we'll go to the website and there we are. We have items and the most important thing to notice is that we have item 1 and item 2. This is actually coming from the database which is now deployed on Digital Ocean on this one machine. And then notice up at the top we're using the IP address directly. So if you don't have a domain name yet, that's fine. Just deploy to the IP address. It'll say not secure, which is kind of a secure, scary message, but when you're just doing development or prototyping, it's fine. It just means that the bytes are being sent over the wire and they're not being secured. So don't send any passwords or things like that over the wire this way. But when you're just prototyping, it's fine to have this IP address like this.

Now let's go and look at what happened and make sure that the database is connecting properly and take a look at what Claude did to configure this first. I can use the elementsdB command and previously we used dB to log into the local database, but if I provide the remote flag, that's going to connect to my deployed database. And this is a nice way to work with production data. And let's just make sure that we've got the items and there we do. So these are the actual items that are that are showing up on the web page that's deployed over on the right, and that looks good.

Next up, let's look at the configuration file itself. Config. JSOC, which is located in the root of the project directory. It's a new format JSOC. We'll talk about that more in another video, but it's basically just like JSON with a little bit of extra functionality. And if I scroll down, you're going to see a section for the database that's important. Right now, it's just going to use a local database cluster on the machine. And if I scroll down a little bit further past that, we have our deploy section. And the deploy section has an SSH, and we're just going to use the regular digital Ocean root user and the identity file that we had created earlier. This is the SSH key. And then down in the environment section we have one environment called production with one machine which it labeled production zero, and here's the public and private IP.

So you can just edit this config file yourself if you want, but I find it easier to have the Claude Code agent or whatever Codex or whatever agent you're using configure it for me and just go ahead and do the first deployment. Now let me show you how quick it is once we actually have the deployment done, the provisioning done. I'm gonna make a change to template HTML. Let's just call it. Items v2, something that we can see quickly and then deploy it again. And the next time we deploy, even though we're going all the way across the United States, it's only going to take a couple of seconds, in this case 3.7 seconds, and you can see the right hand side updated just about immediately.

So hot deploys are very fast, and the reason for that is because Elements maintains a peer to peer connection between your local project server that's always running. So we always have a project server that's running, and you can see that the build command, for example, connects to that project server. That's running locally and that local project server will connect to the deploy machine and it will do the minimum exchange of files that it needs to to get your buildup and running. So that's one of the real benefits of owning your own deploy box.

OK, so we've got one machine going here now. It's time to get a little bit more serious. Let's add another machine, add a domain name, and also add the managed Ubuntu, the managed Postgrass instance from from Digital Ocean. So I'm gonna come back uh to the digital ocean box here and then let's go find Claude. And Give it a little bit more information. So let's go to The droplet section. And we've already given it. Uh, 113. So I'm gonna log, I'm gonna click this and grab the public and Private IP addresses from this box. And I'll just tell Claude, add another machine to our cluster. You can use whatever phraseology you want. The main thing is just make sure that you tell it to add a machine, not to replace it, and then to put these two IP addresses, the public and private one.

And I'm just going to have it do everything all at once so we don't have to wait. So I'm going to go over to the data services, the manage databases, and click on the Postgres cluster we just created. And Digital Ocean has this nice feature that once the cluster is created, which it looks like it is, You can come down, scroll down, and there's going to be a connection parameter section here with a copy button. So go ahead and click that copy button, and that's going to give you everything you need. You can just give all of that to Claude Code and it will configure everything for you.

And then let's also set up a URL domain name. Now, let's see, I'm gonna use. Deploy.elements.dev. And I'm gonna ask Claude to point it to the first machine in our cluster. Now, I use uh Amazon Web Services to control my, my URLs in this, in my domains, and in this video, I'm not gonna go over how to create a domain. If you don't know how to do that, just leave a comment, and I'll do another video on how to create a domain name. But once you have one, if you have some tools locally to work with AWS or whichever one you're using, uh, it will be able to Claude Code or what your agent will be able to point the domain to whatever IP address you want. So it's going to point it at our first machine, and then I'll just press enter.

Actually, let me just tell it to do the deploy. OK, one quick point while it's doing its work on the domains, if you have more than one machine, All that elements requires is that one of those machines be public. If you provide a domain name, it's going to get you SSL automatically, and the domain name can be pointed at just one of the public machines. If you want to have DNS failover, you can point the DNS record at both of the machines or all of the machines, and then you can get DNS failover as well. Element ships with its own load balancer, so each machine has a load balancer running on it automatically, and it will automatically figure out how to load balance amongst all the machines in the cluster without you having to do anything other than this configuration that we've already done.

So this next provisioning should take a little bit more time than a regular hot deploy, but not quite as long as the initial provision. And once it's done, we should have an actual live URL running 2 machines and a Postgres cluster. OK, great. It looks like Claude did a little extra due diligence to make sure everything was OK. If we go over and change from our IP address to deploy.elements.dev, we should now have our deployed application. And what's amazing about this is that we're getting SSL automatically, so we don't get that. Scary warning anymore. If you look at this, it says the connection is secure. That's because Elements is doing automatically a negotiation with Let's Encrypt to get an SSL certificate on both boxes. So we have two machines and it's connected to the Digital Ocean database on the back end.

Now let's make sure that we can connect to the remote DB again. And this time around, it's going to be connecting to the one that's hosted on Digital Ocean. Perfect. And let's make one more change to make sure that we can do a deploy across 2 machines. I'll get rid of that version too. And we'll do an elements deploy again after that. And this time the deploy should take us a couple of seconds just like the last time. Look how fast that is.

OK, so that's across two machines now with a hosted post press. One of the things to keep in mind about deployments on elements is that they are atomic. They either succeed or they don't. If a build error or a test error interferes or stops the build, the previous release will stay in place until you have a successful build. And in elements, builds mean running the tests and running the type checker, the database migrations, all the things required to make the app ready to go. So if any of those things fail, you don't have to worry, it's not going to mess up your release.

OK, before we finish up, one of the things I want to do is show you a cool trick that you can do with Claude Code. It's called remote control, and what it allows you to do is to create a tunnel that you can control the session from your mobile phone. And so you can do deployments from your mobile phone. You can make changes to the site, and it just happens almost instantly. And so if you're working on a site in real time, I find that it's a really wonderful way to work.

Once we have remote control set up over on my phone, I go over to the code and click on the demo, and now I'm actually talking from my phone to the session here, and I'm going to say something like, Make the title Items version 3 and deploy. Quickly And while it got set up there, it took a little bit longer than it needed to, but let's just revert it. And this time I'll tell it not to be so, uh, so worried about getting it right. Just make the change and, and do the deploy right away. And there we go. That was a lot faster that time. So I find this is a really cool way to work and uh you should try it out.

All right, thanks for, uh, for listening and uh I hope you see how quick and powerful it is to do deploys with elements, especially when you control the boxes.