WEBVTT 1 00:00:00.120 --> 00:00:01.740 Elements deploys are really fast. 2 00:00:02.080 --> 00:00:02.550 In this video, 3 00:00:02.630 --> 00:00:04.550 we'll deploy to a single digital ocean droplet, 4 00:00:04.640 --> 00:00:06.970 scale out to 2 machines with hosted Postgres, 5 00:00:07.080 --> 00:00:07.780 and at the end, 6 00:00:08.029 --> 00:00:09.420 deploy from a mobile phone. 7 00:00:09.760 --> 00:00:10.270 To get started, 8 00:00:10.400 --> 00:00:11.710 let's create an application. 9 00:00:12.670 --> 00:00:14.770 Called myapp and I'll change into that, 10 00:00:15.190 --> 00:00:15.380 oop, 11 00:00:15.550 --> 00:00:17.760 change into myapp and start up the server. 12 00:00:19.240 --> 00:00:22.810 And that brings up the normal localhost:4000 server running locally. 13 00:00:23.160 --> 00:00:23.870 Once we have that, 14 00:00:24.000 --> 00:00:27.700 let's create a database migration so that we can play with data right off the bat. 15 00:00:28.160 --> 00:00:28.470 To do that, 16 00:00:28.490 --> 00:00:29.390 I'll do elements, 17 00:00:29.520 --> 00:00:30.950 create migration. 18 00:00:32.570 --> 00:00:34.630 We'll just create a simple table called items. 19 00:00:34.770 --> 00:00:36.400 It doesn't really need to be anything real. 20 00:00:36.570 --> 00:00:39.430 The whole purpose of it is just to demonstrate database migrations. 21 00:00:41.170 --> 00:00:42.390 Once we have the migration, 22 00:00:42.570 --> 00:00:44.130 we'll open up the file 23 00:00:44.330 --> 00:00:47.720 in Vim and let me show you the project so you can see how it's organized. 24 00:00:47.810 --> 00:00:49.310 We're going to go into the migrations 25 00:00:49.530 --> 00:00:52.500 folder and open up this migration that was just created. 26 00:00:53.240 --> 00:00:55.290 And I'll update it by simply 27 00:00:55.560 --> 00:00:58.070 adding a description field of type text. 28 00:00:59.360 --> 00:01:01.310 And then I'm gonna insert a couple of records 29 00:01:01.310 --> 00:01:03.000 just so that we have something to play with. 30 00:01:07.410 --> 00:01:08.780 Let's make sure I spell it correctly. 31 00:01:16.760 --> 00:01:16.950 OK, 32 00:01:17.080 --> 00:01:17.230 great. 33 00:01:17.300 --> 00:01:18.440 And when I save that, 34 00:01:18.480 --> 00:01:18.980 the 35 00:01:19.200 --> 00:01:19.900 database 36 00:01:20.160 --> 00:01:21.540 will be automatically updated, 37 00:01:21.560 --> 00:01:25.460 and we can verify that when I quit out of this by typing elements dB, 38 00:01:25.600 --> 00:01:27.260 and that will connect me to the local database 39 00:01:27.640 --> 00:01:30.790 and I'll select star from items to make sure that I've got a couple of items in there, 40 00:01:30.880 --> 00:01:31.670 and I do. 41 00:01:31.840 --> 00:01:32.230 Perfect. 42 00:01:32.520 --> 00:01:34.510 So we've got our local database up and running. 43 00:01:35.070 --> 00:01:35.460 Next up, 44 00:01:35.550 --> 00:01:37.510 let's go up into the application itself 45 00:01:37.710 --> 00:01:38.530 into the 46 00:01:38.670 --> 00:01:39.970 HTML template 47 00:01:40.230 --> 00:01:44.230 and actually write these items out into the HTML so we can see it 48 00:01:44.390 --> 00:01:45.090 and that way 49 00:01:45.340 --> 00:01:48.050 we will be able to know that we've got some items locally 50 00:01:48.150 --> 00:01:51.390 and we will deploy and see those same items on our deploy box. 51 00:01:51.900 --> 00:01:51.980 OK, 52 00:01:52.110 --> 00:01:54.860 so I'll start off by just making a simple title here, 53 00:01:55.290 --> 00:01:56.550 saving as I go, 54 00:01:56.870 --> 00:01:57.730 and 55 00:01:58.030 --> 00:01:59.150 we'll loop over 56 00:01:59.420 --> 00:02:01.330 using a for loop the item 57 00:02:01.800 --> 00:02:02.670 of items. 58 00:02:03.710 --> 00:02:05.140 And this will be as simple as it could be. 59 00:02:05.230 --> 00:02:05.970 I'm just gonna 60 00:02:06.430 --> 00:02:07.860 literally print out the description. 61 00:02:08.650 --> 00:02:10.870 I'll get some compiler errors here until I fix this. 62 00:02:11.550 --> 00:02:13.850 Let's create a constructor attribute called items that 63 00:02:13.870 --> 00:02:15.970 is just an array of type item, 64 00:02:16.190 --> 00:02:17.980 and I'll initialize it to an empty array. 65 00:02:19.500 --> 00:02:22.320 We'll create an interface called item that is just the 66 00:02:22.600 --> 00:02:25.400 ID of type string and the description 67 00:02:25.980 --> 00:02:26.970 of type string. 68 00:02:28.240 --> 00:02:29.060 And I saved that. 69 00:02:29.080 --> 00:02:30.070 That should make the errors go away, 70 00:02:30.120 --> 00:02:32.380 but our list is going to be empty because I haven't actually 71 00:02:32.760 --> 00:02:34.470 passed any items into the constructor. 72 00:02:34.560 --> 00:02:36.500 So let's go and look at where this is used, 73 00:02:36.800 --> 00:02:37.820 which is in the 74 00:02:38.000 --> 00:02:38.310 route, 75 00:02:38.400 --> 00:02:39.610 and here's the route function 76 00:02:39.800 --> 00:02:40.330 that 77 00:02:41.310 --> 00:02:42.680 Calls into our HTML 78 00:02:42.990 --> 00:02:45.250 and what I'm gonna do is first import the. 79 00:02:46.000 --> 00:02:46.610 Item 80 00:02:47.080 --> 00:02:47.870 from template 81 00:02:48.080 --> 00:02:50.020 and then let's create something called items 82 00:02:50.320 --> 00:02:51.720 which is a SQL query 83 00:02:51.960 --> 00:02:53.550 that will return on a row, 84 00:02:53.800 --> 00:02:54.980 an array of items. 85 00:02:57.630 --> 00:02:59.410 And I'll just select all of them and 86 00:02:59.630 --> 00:03:01.980 then grab all of them so we don't end up with a cursor, 87 00:03:02.030 --> 00:03:03.130 but we actually get an array 88 00:03:03.550 --> 00:03:06.380 and I'll pass that into the HTML template. 89 00:03:06.670 --> 00:03:07.320 Over on the right, 90 00:03:07.340 --> 00:03:09.440 immediately I see item 1 and item 2. 91 00:03:09.780 --> 00:03:10.100 Great, 92 00:03:10.220 --> 00:03:12.150 so I've got everything working locally 93 00:03:12.260 --> 00:03:15.290 and what we need to do next is to set up Digital Ocean 94 00:03:15.530 --> 00:03:16.970 or any deployment provider, 95 00:03:17.060 --> 00:03:21.170 any hosting provider that you want with a machine that we can use to deploy to. 96 00:03:23.770 --> 00:03:25.360 Let's head over to Digital Ocean. 97 00:03:25.730 --> 00:03:26.710 I'll log in 98 00:03:27.050 --> 00:03:27.700 and 99 00:03:29.840 --> 00:03:31.300 We'll head over to the 100 00:03:31.520 --> 00:03:33.890 uh droplet section or right from the top, 101 00:03:33.920 --> 00:03:34.980 you can say create 102 00:03:35.480 --> 00:03:36.070 droplet. 103 00:03:37.770 --> 00:03:38.550 Now with Digital Ocean, 104 00:03:38.570 --> 00:03:39.750 it's very easy to set up 105 00:03:40.130 --> 00:03:42.070 droplets which are really just hosted 106 00:03:43.010 --> 00:03:43.800 hosted instances, 107 00:03:43.850 --> 00:03:45.430 virtual machines that you can use. 108 00:03:45.730 --> 00:03:50.870 Elements can work with any deployment provider that allows SSH into the boxes. 109 00:03:51.210 --> 00:03:52.360 So that would be Amazon, 110 00:03:52.500 --> 00:03:53.600 Digital Ocean, 111 00:03:54.290 --> 00:03:54.840 Linode. 112 00:03:55.370 --> 00:03:56.640 There's a bunch of them out there. 113 00:03:56.770 --> 00:04:00.230 I think Digital Ocean is a great place to start if you need a recommendation. 114 00:04:00.660 --> 00:04:00.850 OK, 115 00:04:00.980 --> 00:04:03.810 we're gonna create our first droplet in the New York Data Center. 116 00:04:03.900 --> 00:04:04.370 That's fine, 117 00:04:04.460 --> 00:04:05.570 even though we're in California. 118 00:04:05.620 --> 00:04:07.370 It'll make the deploys slightly slower, 119 00:04:07.420 --> 00:04:07.760 but 120 00:04:07.940 --> 00:04:09.050 still will be pretty quick. 121 00:04:09.790 --> 00:04:10.330 Scroll down, 122 00:04:10.470 --> 00:04:10.580 uh, 123 00:04:10.670 --> 00:04:11.940 you want to pick Ubuntu, 124 00:04:12.350 --> 00:04:14.490 and that's the operating system that Elements, 125 00:04:14.550 --> 00:04:14.660 uh, 126 00:04:14.910 --> 00:04:15.420 supports right now. 127 00:04:15.500 --> 00:04:17.329 It's a Linux deployment environment. 128 00:04:17.470 --> 00:04:18.500 Just pick the latest version, 129 00:04:18.550 --> 00:04:19.720 24 is fine. 130 00:04:19.910 --> 00:04:20.579 With scroll down, 131 00:04:20.630 --> 00:04:22.560 you can use a regular SSD 132 00:04:22.790 --> 00:04:25.420 CPU and you can pick the $6 per month option. 133 00:04:25.590 --> 00:04:27.140 $4 per month will work as well. 134 00:04:27.270 --> 00:04:27.670 400, 135 00:04:27.710 --> 00:04:29.280 512 megabytes is enough, 136 00:04:29.470 --> 00:04:32.140 but 1 gigabyte gives us a little bit more safety, 137 00:04:32.230 --> 00:04:33.980 and we get a little bit more disk space with this as well. 138 00:04:34.070 --> 00:04:34.170 So, 139 00:04:34.190 --> 00:04:35.570 I think $6 is worth it. 140 00:04:36.040 --> 00:04:36.750 And we scroll down, 141 00:04:36.800 --> 00:04:38.390 if you don't have an SSH key yet, 142 00:04:38.560 --> 00:04:40.790 just go ahead and add this by clicking this button and 143 00:04:40.790 --> 00:04:43.940 follow the instructions that they give you to create an SSH key 144 00:04:44.440 --> 00:04:45.220 over on the right. 145 00:04:45.340 --> 00:04:46.310 I actually already have one, 146 00:04:46.400 --> 00:04:47.460 so I'll select it, 147 00:04:47.680 --> 00:04:50.060 and you can leave all the other options down here 148 00:04:50.160 --> 00:04:50.890 by themselves, 149 00:04:51.280 --> 00:04:52.230 leave them as they are, 150 00:04:52.520 --> 00:04:55.030 and I'll come over here and create that droplet. 151 00:04:55.940 --> 00:04:57.450 And that might take a minute or two to create. 152 00:04:57.500 --> 00:04:58.940 It's usually pretty quick. 153 00:04:59.220 --> 00:05:00.250 And when it's done, 154 00:05:00.420 --> 00:05:02.570 you're going to get a public and a private IP address. 155 00:05:02.650 --> 00:05:03.860 You're going to save those away, 156 00:05:04.020 --> 00:05:06.000 and we're going to provide that to 157 00:05:06.340 --> 00:05:07.450 Claude Code in a second, 158 00:05:07.500 --> 00:05:09.230 which will configure elements for us. 159 00:05:09.980 --> 00:05:10.120 Now, 160 00:05:10.140 --> 00:05:11.560 while this is getting set up, 161 00:05:12.100 --> 00:05:12.450 there it is. 162 00:05:12.500 --> 00:05:15.870 It actually already finished before I had a chance to go create the 2nd droplet. 163 00:05:16.260 --> 00:05:19.410 We're going to save this public IP address and the private IP address, 164 00:05:19.540 --> 00:05:19.840 but 165 00:05:19.970 --> 00:05:21.400 let me come back to this in a second. 166 00:05:21.580 --> 00:05:24.240 Let's go ahead and create another droplet just so it's ready 167 00:05:24.460 --> 00:05:27.550 and we have everything ready to go here before we have to scale out. 168 00:05:27.900 --> 00:05:29.640 We'll start off with just deploying to 1 machine, 169 00:05:29.740 --> 00:05:32.010 but we're going to come back and deploy to 2 in a second. 170 00:05:32.740 --> 00:05:32.850 OK, 171 00:05:32.910 --> 00:05:34.150 I'm going to add another droplet, 172 00:05:34.300 --> 00:05:35.160 same data center, 173 00:05:35.460 --> 00:05:36.760 same operating system. 174 00:05:37.060 --> 00:05:37.490 Come down here, 175 00:05:37.700 --> 00:05:39.110 same regular CPU option. 176 00:05:39.180 --> 00:05:40.680 We'll pick $6 177 00:05:41.140 --> 00:05:42.970 select my SSH key, 178 00:05:43.100 --> 00:05:44.690 and create that droplet. 179 00:05:44.860 --> 00:05:46.160 And while that's finishing up, 180 00:05:46.340 --> 00:05:49.420 I'm going to head over and get our database set up as well. 181 00:05:50.130 --> 00:05:51.790 Now an important thing to remember when you're just 182 00:05:51.810 --> 00:05:53.990 prototyping and you deploy elements to a machine, 183 00:05:54.130 --> 00:05:55.130 to just one machine, 184 00:05:55.390 --> 00:05:57.240 it actually ships with Postgraphs, 185 00:05:57.290 --> 00:05:58.470 so you don't have to worry 186 00:05:58.730 --> 00:06:00.440 about having a managed database. 187 00:06:00.610 --> 00:06:03.200 But when you're ready to have more than one machine or you 188 00:06:03.200 --> 00:06:06.070 really want to have a little bit more scalability or redundancy, 189 00:06:06.770 --> 00:06:07.280 backups, 190 00:06:07.370 --> 00:06:09.550 different services that hosting providers provide, 191 00:06:09.690 --> 00:06:10.880 you can use a managed database. 192 00:06:10.970 --> 00:06:12.450 So we'll go ahead and get that set up. 193 00:06:12.610 --> 00:06:15.120 I'll create a database cluster in Digital Ocean. 194 00:06:15.800 --> 00:06:17.230 I'm gonna pick Postgres 195 00:06:17.360 --> 00:06:19.190 and whatever the latest version is fine, 196 00:06:19.280 --> 00:06:20.690 at least version 16. 197 00:06:20.920 --> 00:06:20.980 Uh, 198 00:06:21.120 --> 00:06:22.550 but as of this screencast, 199 00:06:22.600 --> 00:06:23.580 it's version 18. 200 00:06:23.680 --> 00:06:23.780 So, 201 00:06:23.800 --> 00:06:24.740 we'll go with that. 202 00:06:25.040 --> 00:06:26.260 And then just head down, 203 00:06:26.450 --> 00:06:27.630 pick the standard edition. 204 00:06:27.760 --> 00:06:29.050 Pretty much all of these options, 205 00:06:29.120 --> 00:06:31.390 I think are gonna be just the standard options. 206 00:06:31.440 --> 00:06:33.100 You don't need to do anything special here. 207 00:06:33.520 --> 00:06:34.420 And 208 00:06:34.560 --> 00:06:36.530 you can leave the database cluster name, 209 00:06:36.760 --> 00:06:37.870 whatever it is it recommends. 210 00:06:37.960 --> 00:06:38.670 If you want to change it, 211 00:06:38.720 --> 00:06:39.320 you can change it. 212 00:06:39.340 --> 00:06:40.250 It doesn't matter. 213 00:06:40.720 --> 00:06:43.030 And then we'll create the database cluster at the end. 214 00:06:43.900 --> 00:06:46.050 Now in my experience this takes 5 to 10 minutes. 215 00:06:46.100 --> 00:06:48.120 It takes a little bit longer than creating droplets, 216 00:06:48.230 --> 00:06:50.820 so you can just let this complete in the background 217 00:06:51.180 --> 00:06:55.810 and we'll head back over to the droplets and I'm going to grab the first one. 218 00:06:55.900 --> 00:06:59.580 We're just going to start off deploying to a single machine to make it simple 219 00:06:59.770 --> 00:07:02.180 so that you can see what using an IP address 220 00:07:02.340 --> 00:07:03.250 only looks like. 221 00:07:04.180 --> 00:07:04.640 OK. 222 00:07:05.980 --> 00:07:08.170 Let me scroll down so we've got these IP addresses. 223 00:07:08.380 --> 00:07:10.560 I'm going to open up Claude Code. 224 00:07:11.570 --> 00:07:12.150 And 225 00:07:12.280 --> 00:07:14.160 the reason I'm doing that is because 226 00:07:14.550 --> 00:07:15.450 uh Claude will make it really, 227 00:07:15.490 --> 00:07:17.600 really easy to configure elements. 228 00:07:17.650 --> 00:07:19.480 It's just gonna configure elements under the hood 229 00:07:19.480 --> 00:07:20.990 and do the first deployment for us. 230 00:07:21.690 --> 00:07:22.040 Notably, 231 00:07:22.210 --> 00:07:22.480 client, 232 00:07:22.810 --> 00:07:22.840 uh, 233 00:07:23.070 --> 00:07:25.560 Cloud is not actually doing a deployment from scratch. 234 00:07:25.610 --> 00:07:27.470 It's not going into the Linux box and, 235 00:07:27.490 --> 00:07:28.160 and monkeying around. 236 00:07:28.210 --> 00:07:30.350 It's actually using elements to do the deployment. 237 00:07:30.730 --> 00:07:32.950 But if you don't want to learn the right configuration, 238 00:07:33.410 --> 00:07:34.520 syntax and all of that, 239 00:07:34.570 --> 00:07:36.360 you can just ask your agent to do it for you, 240 00:07:36.410 --> 00:07:37.240 and it's pretty quick. 241 00:07:37.880 --> 00:07:38.780 So I'm going to click 242 00:07:39.040 --> 00:07:40.000 the copy button 243 00:07:40.280 --> 00:07:42.700 and copy that public IP address over here 244 00:07:43.040 --> 00:07:44.870 and then this private one as well. 245 00:07:44.920 --> 00:07:45.690 We're going to give it 246 00:07:46.720 --> 00:07:48.580 Because when we start to load balance, 247 00:07:49.000 --> 00:07:51.390 we're going to need both the public and the private IP. 248 00:07:53.170 --> 00:07:54.500 And I'll just give Claude a message like, 249 00:07:54.530 --> 00:07:55.470 help me deploy 250 00:07:56.160 --> 00:07:57.760 my app to Digital Ocean. 251 00:08:01.510 --> 00:08:03.620 I can just give it a little bit more context if I want, 252 00:08:03.710 --> 00:08:04.780 but you don't really need to. 253 00:08:10.020 --> 00:08:10.810 And when I press enter, 254 00:08:10.860 --> 00:08:11.640 it'll go about 255 00:08:11.750 --> 00:08:13.320 reading the elements manual 256 00:08:13.460 --> 00:08:15.640 to figure out what it needs to do to configure 257 00:08:16.060 --> 00:08:17.890 elements and get the deployment going. 258 00:08:18.780 --> 00:08:20.140 It might take a minute or so. 259 00:08:20.340 --> 00:08:21.520 The first deployment 260 00:08:21.770 --> 00:08:24.610 is usually about one minute once you have your 261 00:08:24.610 --> 00:08:26.780 configuration set up and it runs the deployment. 262 00:08:27.060 --> 00:08:27.400 But 263 00:08:27.580 --> 00:08:33.760 all Elements need is an IP address and a box that is Ubuntu Linux that it can SSH into, 264 00:08:33.919 --> 00:08:34.610 and that's it. 265 00:08:35.289 --> 00:08:36.450 It's going to go into that box. 266 00:08:36.530 --> 00:08:38.669 It's going to configure it and provision it with 267 00:08:39.090 --> 00:08:40.610 the elements installation 268 00:08:40.840 --> 00:08:42.030 and anything else that it needs. 269 00:08:42.049 --> 00:08:43.919 It's going to set up the Postcrest cluster 270 00:08:44.210 --> 00:08:46.270 and then it's going to run the actual 271 00:08:46.290 --> 00:08:48.520 first deployment of the application to that machine. 272 00:08:48.650 --> 00:08:50.240 So the first deployment might take a minute. 273 00:08:50.360 --> 00:08:50.890 Or so. 274 00:08:51.110 --> 00:08:52.170 And then after that, 275 00:08:52.190 --> 00:08:54.700 every subsequent deployment is we call hot. 276 00:08:54.750 --> 00:08:55.540 It's really fast. 277 00:08:55.590 --> 00:08:56.980 It's just going to do the minimum 278 00:08:57.110 --> 00:08:58.820 that it has to do to get the deployment 279 00:08:59.030 --> 00:08:59.620 up and running, 280 00:08:59.830 --> 00:09:01.580 send the minimum number of files and so on. 281 00:09:01.650 --> 00:09:03.660 So it will only take usually 1 to 4 seconds, 282 00:09:03.700 --> 00:09:05.380 even if it's across the entire country. 283 00:09:06.860 --> 00:09:07.050 OK, 284 00:09:07.140 --> 00:09:09.080 it's all done and we have 285 00:09:09.280 --> 00:09:10.850 an actual IP address. 286 00:09:10.980 --> 00:09:11.360 So, 287 00:09:11.540 --> 00:09:12.050 I'm gonna 288 00:09:12.190 --> 00:09:13.560 just paste that in here. 289 00:09:14.410 --> 00:09:15.770 And we'll go to the website 290 00:09:16.010 --> 00:09:16.680 and there we are. 291 00:09:16.730 --> 00:09:17.590 We have items 292 00:09:17.730 --> 00:09:20.840 and the most important thing to notice is that we have item 1 and item 2. 293 00:09:20.930 --> 00:09:23.080 This is actually coming from the database which is 294 00:09:23.080 --> 00:09:25.800 now deployed on Digital Ocean on this one machine. 295 00:09:26.460 --> 00:09:29.490 And then notice up at the top we're using the IP address directly. 296 00:09:29.740 --> 00:09:31.530 So if you don't have a domain name yet, 297 00:09:31.620 --> 00:09:32.050 that's fine. 298 00:09:32.110 --> 00:09:33.620 Just deploy to the IP address. 299 00:09:33.780 --> 00:09:35.050 It'll say not secure, 300 00:09:35.160 --> 00:09:36.130 which is kind of a secure, 301 00:09:36.660 --> 00:09:37.490 scary message, 302 00:09:37.660 --> 00:09:40.250 but when you're just doing development or prototyping, 303 00:09:40.300 --> 00:09:40.780 it's fine. 304 00:09:40.860 --> 00:09:43.220 It just means that the bytes are being sent over the wire 305 00:09:43.660 --> 00:09:44.570 and they're not being secured. 306 00:09:44.620 --> 00:09:47.970 So don't send any passwords or things like that over the wire this way. 307 00:09:48.350 --> 00:09:49.450 But when you're just prototyping, 308 00:09:49.540 --> 00:09:51.620 it's fine to have this IP address like this. 309 00:09:52.290 --> 00:09:55.800 Now let's go and look at what happened and make sure that the database 310 00:09:55.800 --> 00:09:59.280 is connecting properly and take a look at what Claude did to configure this 311 00:09:59.850 --> 00:10:00.320 first. 312 00:10:01.060 --> 00:10:02.960 I can use the elementsdB command 313 00:10:03.100 --> 00:10:04.550 and previously we 314 00:10:04.700 --> 00:10:06.920 used dB to log into the local database, 315 00:10:07.180 --> 00:10:08.950 but if I provide the remote flag, 316 00:10:09.140 --> 00:10:11.530 that's going to connect to my deployed database. 317 00:10:12.320 --> 00:10:14.650 And this is a nice way to work with production data. 318 00:10:16.380 --> 00:10:19.020 And let's just make sure that we've got the items and there we do. 319 00:10:19.140 --> 00:10:21.330 So these are the actual items that are that are showing 320 00:10:21.330 --> 00:10:24.050 up on the web page that's deployed over on the right, 321 00:10:24.260 --> 00:10:25.180 and that looks good. 322 00:10:25.500 --> 00:10:25.890 Next up, 323 00:10:26.020 --> 00:10:28.850 let's look at the configuration file itself. 324 00:10:29.690 --> 00:10:30.040 Config. 325 00:10:30.290 --> 00:10:30.840 JSOC, 326 00:10:30.860 --> 00:10:31.630 which is 327 00:10:31.970 --> 00:10:33.920 located in the root of the project directory. 328 00:10:34.090 --> 00:10:35.760 It's a new format JSOC. 329 00:10:35.970 --> 00:10:37.030 We'll talk about that more 330 00:10:37.130 --> 00:10:37.860 in another video, 331 00:10:37.970 --> 00:10:41.610 but it's basically just like JSON with a little bit of extra functionality. 332 00:10:41.850 --> 00:10:42.910 And if I scroll down, 333 00:10:43.370 --> 00:10:44.610 you're going to see a section 334 00:10:44.970 --> 00:10:46.320 for the database that's important. 335 00:10:46.450 --> 00:10:46.680 Right now, 336 00:10:46.720 --> 00:10:49.240 it's just going to use a local database cluster on the machine. 337 00:10:49.450 --> 00:10:51.080 And if I scroll down a little bit further past that, 338 00:10:51.170 --> 00:10:52.480 we have our deploy section. 339 00:10:52.910 --> 00:10:55.100 And the deploy section has an SSH, 340 00:10:55.550 --> 00:10:57.940 and we're just going to use the regular digital Ocean root 341 00:10:57.940 --> 00:11:00.690 user and the identity file that we had created earlier. 342 00:11:01.150 --> 00:11:02.340 This is the SSH key. 343 00:11:02.630 --> 00:11:06.140 And then down in the environment section we have one environment called production 344 00:11:06.340 --> 00:11:07.550 with one machine 345 00:11:07.670 --> 00:11:08.900 which it labeled production zero, 346 00:11:08.950 --> 00:11:10.790 and here's the public and private IP. 347 00:11:11.070 --> 00:11:13.980 So you can just edit this config file yourself if you want, 348 00:11:14.110 --> 00:11:16.060 but I find it easier to have the Claude 349 00:11:16.060 --> 00:11:19.020 Code agent or whatever Codex or whatever agent you're using 350 00:11:19.150 --> 00:11:21.980 configure it for me and just go ahead and do the first deployment. 351 00:11:22.470 --> 00:11:25.860 Now let me show you how quick it is once we actually have the deployment done, 352 00:11:25.950 --> 00:11:26.980 the provisioning done. 353 00:11:27.310 --> 00:11:29.700 I'm gonna make a change to template HTML. 354 00:11:29.910 --> 00:11:30.660 Let's just call it. 355 00:11:31.610 --> 00:11:32.670 Items v2, 356 00:11:32.720 --> 00:11:34.030 something that we can see quickly 357 00:11:34.290 --> 00:11:35.640 and then deploy it again. 358 00:11:36.700 --> 00:11:37.810 And the next time we deploy, 359 00:11:37.940 --> 00:11:39.920 even though we're going all the way across the United States, 360 00:11:40.100 --> 00:11:41.760 it's only going to take a couple of seconds, 361 00:11:41.860 --> 00:11:43.250 in this case 3.7 seconds, 362 00:11:43.300 --> 00:11:45.380 and you can see the right hand side updated 363 00:11:45.700 --> 00:11:46.890 just about immediately. 364 00:11:47.070 --> 00:11:48.590 So hot deploys are very fast, 365 00:11:48.620 --> 00:11:51.130 and the reason for that is because Elements maintains a peer 366 00:11:51.130 --> 00:11:54.890 to peer connection between your local project server that's always running. 367 00:11:55.100 --> 00:11:56.960 So we always have a project server that's running, 368 00:11:57.140 --> 00:11:58.570 and you can see that the build command, 369 00:11:58.620 --> 00:11:59.010 for example, 370 00:11:59.100 --> 00:12:00.730 connects to that project server. 371 00:12:01.330 --> 00:12:02.270 That's running locally 372 00:12:02.490 --> 00:12:05.650 and that local project server will connect to the deploy machine 373 00:12:05.850 --> 00:12:07.760 and it will do the minimum exchange of files that 374 00:12:07.760 --> 00:12:09.430 it needs to to get your buildup and running. 375 00:12:09.600 --> 00:12:13.030 So that's one of the real benefits of owning your own deploy box. 376 00:12:13.500 --> 00:12:13.680 OK, 377 00:12:13.810 --> 00:12:15.840 so we've got one machine going here now. 378 00:12:15.860 --> 00:12:17.620 It's time to get a little bit more serious. 379 00:12:17.850 --> 00:12:19.440 Let's add another machine, 380 00:12:19.810 --> 00:12:21.090 add a domain name, 381 00:12:21.330 --> 00:12:23.880 and also add the managed Ubuntu, 382 00:12:24.610 --> 00:12:27.070 the managed Postgrass instance from 383 00:12:27.380 --> 00:12:28.320 from Digital Ocean. 384 00:12:28.720 --> 00:12:29.860 So I'm gonna come back 385 00:12:30.040 --> 00:12:31.760 uh to the digital ocean 386 00:12:32.400 --> 00:12:34.390 box here and then let's go find Claude. 387 00:12:35.950 --> 00:12:36.600 And 388 00:12:37.630 --> 00:12:39.260 Give it a little bit more information. 389 00:12:39.430 --> 00:12:40.810 So let's go to 390 00:12:44.910 --> 00:12:46.060 The droplet section. 391 00:12:53.380 --> 00:12:54.610 And we've already given it. 392 00:12:55.530 --> 00:12:55.830 Uh, 393 00:12:56.010 --> 00:12:56.770 113. 394 00:12:56.890 --> 00:12:57.560 So I'm gonna log, 395 00:12:57.690 --> 00:13:00.080 I'm gonna click this and grab the public 396 00:13:00.610 --> 00:13:01.220 and 397 00:13:02.160 --> 00:13:04.070 Private IP addresses from this box. 398 00:13:15.800 --> 00:13:17.100 And I'll just tell Claude, 399 00:13:17.600 --> 00:13:19.300 add another machine 400 00:13:19.440 --> 00:13:20.390 to our cluster. 401 00:13:20.920 --> 00:13:22.430 You can use whatever phraseology you want. 402 00:13:22.480 --> 00:13:24.060 The main thing is just make sure that you 403 00:13:24.320 --> 00:13:25.430 tell it to add a machine, 404 00:13:25.560 --> 00:13:26.240 not to replace it, 405 00:13:26.360 --> 00:13:27.020 and then to 406 00:13:27.180 --> 00:13:28.390 put these two IP addresses, 407 00:13:28.440 --> 00:13:29.580 the public and private one. 408 00:13:29.800 --> 00:13:32.530 And I'm just going to have it do everything all at once so we don't have to wait. 409 00:13:32.800 --> 00:13:35.110 So I'm going to go over to the data services, 410 00:13:35.600 --> 00:13:36.550 the manage databases, 411 00:13:36.600 --> 00:13:38.850 and click on the Postgres cluster we just created. 412 00:13:39.750 --> 00:13:41.490 And Digital Ocean has this nice 413 00:13:41.670 --> 00:13:43.580 feature that once the cluster is created, 414 00:13:43.670 --> 00:13:44.970 which it looks like it is, 415 00:13:45.810 --> 00:13:46.520 You can come down, 416 00:13:46.650 --> 00:13:47.430 scroll down, 417 00:13:47.610 --> 00:13:50.110 and there's going to be a connection parameter section here 418 00:13:50.250 --> 00:13:51.100 with a copy button. 419 00:13:51.170 --> 00:13:53.070 So go ahead and click that copy button, 420 00:13:53.290 --> 00:13:55.040 and that's going to give you everything you need. 421 00:14:03.750 --> 00:14:07.060 You can just give all of that to Claude Code and it will configure everything for you. 422 00:14:09.300 --> 00:14:12.080 And then let's also set up a URL domain name. 423 00:14:12.340 --> 00:14:12.490 Now, 424 00:14:12.580 --> 00:14:12.810 let's see, 425 00:14:12.860 --> 00:14:13.680 I'm gonna use. 426 00:14:16.490 --> 00:14:18.610 Deploy.elements.dev. 427 00:14:26.660 --> 00:14:29.690 And I'm gonna ask Claude to point it to the first machine in our cluster. 428 00:14:30.260 --> 00:14:30.370 Now, 429 00:14:30.460 --> 00:14:33.370 I use uh Amazon Web Services to control my, 430 00:14:33.490 --> 00:14:34.920 my URLs in this, 431 00:14:35.100 --> 00:14:35.890 in my domains, 432 00:14:35.940 --> 00:14:36.530 and in this video, 433 00:14:36.580 --> 00:14:38.610 I'm not gonna go over how to create a domain. 434 00:14:39.200 --> 00:14:40.070 If you don't know how to do that, 435 00:14:40.200 --> 00:14:40.960 just leave a comment, 436 00:14:41.040 --> 00:14:43.700 and I'll do another video on how to create a domain name. 437 00:14:44.060 --> 00:14:45.190 But once you have one, 438 00:14:45.280 --> 00:14:47.260 if you have some tools locally 439 00:14:47.360 --> 00:14:49.840 to work with AWS or whichever one you're using, 440 00:14:50.080 --> 00:14:50.110 uh, 441 00:14:50.280 --> 00:14:51.330 it will be able to 442 00:14:51.720 --> 00:14:53.380 Claude Code or what your agent will be able to 443 00:14:53.380 --> 00:14:55.630 point the domain to whatever IP address you want. 444 00:14:55.720 --> 00:14:57.710 So it's going to point it at our first machine, 445 00:14:58.320 --> 00:14:59.690 and then I'll just press enter. 446 00:15:00.080 --> 00:15:00.270 Actually, 447 00:15:00.360 --> 00:15:01.680 let me just tell it to do the deploy. 448 00:15:05.010 --> 00:15:05.290 OK, 449 00:15:05.600 --> 00:15:07.620 one quick point while it's doing its work 450 00:15:07.840 --> 00:15:09.100 on the domains, 451 00:15:09.400 --> 00:15:10.750 if you have more than one machine, 452 00:15:11.680 --> 00:15:14.660 All that elements requires is that one of those machines be public. 453 00:15:15.160 --> 00:15:16.750 If you provide a domain name, 454 00:15:17.040 --> 00:15:19.480 it's going to get you SSL automatically, 455 00:15:19.600 --> 00:15:21.780 and the domain name can be pointed at just 456 00:15:21.960 --> 00:15:23.400 one of the public machines. 457 00:15:23.560 --> 00:15:25.390 If you want to have DNS failover, 458 00:15:25.560 --> 00:15:28.790 you can point the DNS record at both of the machines or all of the machines, 459 00:15:28.870 --> 00:15:31.010 and then you can get DNS failover as well. 460 00:15:31.770 --> 00:15:33.550 Element ships with its own load balancer, 461 00:15:33.630 --> 00:15:36.880 so each machine has a load balancer running on it automatically, 462 00:15:37.240 --> 00:15:39.150 and it will automatically figure out how to 463 00:15:39.150 --> 00:15:41.030 load balance amongst all the machines in the 464 00:15:41.030 --> 00:15:42.990 cluster without you having to do anything other 465 00:15:42.990 --> 00:15:44.990 than this configuration that we've already done. 466 00:15:45.670 --> 00:15:48.050 So this next provisioning should take a little bit 467 00:15:48.270 --> 00:15:50.260 more time than a regular hot deploy, 468 00:15:50.350 --> 00:15:52.850 but not quite as long as the initial provision. 469 00:15:53.610 --> 00:15:54.540 And once it's done, 470 00:15:54.720 --> 00:15:58.950 we should have an actual live URL running 2 machines and a Postgres cluster. 471 00:16:03.150 --> 00:16:03.340 OK, 472 00:16:03.430 --> 00:16:03.580 great. 473 00:16:03.630 --> 00:16:07.500 It looks like Claude did a little extra due diligence to make sure everything was OK. 474 00:16:07.710 --> 00:16:08.800 If we go over 475 00:16:09.030 --> 00:16:13.610 and change from our IP address to deploy.elements.dev, 476 00:16:13.950 --> 00:16:15.120 we should now have 477 00:16:15.270 --> 00:16:16.730 our deployed application. 478 00:16:16.910 --> 00:16:19.910 And what's amazing about this is that we're getting SSL automatically, 479 00:16:19.980 --> 00:16:20.620 so we don't get that. 480 00:16:20.760 --> 00:16:21.840 Scary warning anymore. 481 00:16:21.950 --> 00:16:22.540 If you look at this, 482 00:16:22.590 --> 00:16:24.130 it says the connection is secure. 483 00:16:24.310 --> 00:16:27.410 That's because Elements is doing automatically a negotiation 484 00:16:27.510 --> 00:16:30.510 with Let's Encrypt to get an SSL certificate on both boxes. 485 00:16:30.830 --> 00:16:33.750 So we have two machines and it's connected to the Digital Ocean 486 00:16:33.990 --> 00:16:35.340 database on the back end. 487 00:16:35.560 --> 00:16:38.260 Now let's make sure that we can connect to the remote DB again. 488 00:16:39.170 --> 00:16:40.030 And this time around, 489 00:16:40.330 --> 00:16:43.680 it's going to be connecting to the one that's hosted on Digital Ocean. 490 00:16:45.990 --> 00:16:46.500 Perfect. 491 00:16:46.910 --> 00:16:48.520 And let's make one more change 492 00:16:48.860 --> 00:16:51.650 to make sure that we can do a deploy across 2 machines. 493 00:16:53.500 --> 00:16:55.090 I'll get rid of that version too. 494 00:16:56.130 --> 00:16:58.590 And we'll do an elements deploy again after that. 495 00:16:59.460 --> 00:17:00.880 And this time the deploy should 496 00:17:01.050 --> 00:17:03.260 take us a couple of seconds just like the last time. 497 00:17:03.380 --> 00:17:04.430 Look how fast that is. 498 00:17:04.740 --> 00:17:04.890 OK, 499 00:17:05.020 --> 00:17:08.250 so that's across two machines now with a hosted post press. 500 00:17:08.819 --> 00:17:09.930 One of the things to keep in mind about 501 00:17:09.930 --> 00:17:12.140 deployments on elements is that they are atomic. 502 00:17:12.300 --> 00:17:13.760 They either succeed or they don't. 503 00:17:13.940 --> 00:17:14.270 If 504 00:17:14.380 --> 00:17:16.390 a build error or a test error 505 00:17:16.560 --> 00:17:18.300 interferes or stops the build, 506 00:17:18.740 --> 00:17:22.780 the previous release will stay in place until you have a successful build. 507 00:17:23.140 --> 00:17:24.079 And in elements, 508 00:17:24.099 --> 00:17:28.119 builds mean running the tests and running the type checker, 509 00:17:28.540 --> 00:17:29.770 the database migrations, 510 00:17:29.940 --> 00:17:32.370 all the things required to make the app ready to go. 511 00:17:32.500 --> 00:17:33.980 So if any of those things fail, 512 00:17:34.220 --> 00:17:35.260 you don't have to worry, 513 00:17:35.460 --> 00:17:37.540 it's not going to mess up your release. 514 00:17:38.100 --> 00:17:38.240 OK, 515 00:17:38.460 --> 00:17:39.010 before we finish up, 516 00:17:39.100 --> 00:17:43.240 one of the things I want to do is show you a cool trick that you can do with Claude Code. 517 00:17:43.420 --> 00:17:44.840 It's called remote control, 518 00:17:45.180 --> 00:17:48.280 and what it allows you to do is to create a tunnel 519 00:17:48.700 --> 00:17:51.290 that you can control the session from your mobile phone. 520 00:17:51.910 --> 00:17:53.680 And so you can do deployments from your mobile phone. 521 00:17:53.750 --> 00:17:55.250 You can make changes to the site, 522 00:17:55.590 --> 00:17:56.090 and 523 00:17:56.230 --> 00:17:57.820 it just happens almost instantly. 524 00:17:57.870 --> 00:17:59.620 And so if you're working on a site in real time, 525 00:17:59.670 --> 00:18:01.850 I find that it's a really wonderful way to work. 526 00:18:02.350 --> 00:18:04.740 Once we have remote control set up over on my phone, 527 00:18:04.830 --> 00:18:06.690 I go over to the code 528 00:18:06.870 --> 00:18:08.110 and click on the demo, 529 00:18:08.350 --> 00:18:10.770 and now I'm actually talking from my phone 530 00:18:11.270 --> 00:18:12.700 to the session here, 531 00:18:12.750 --> 00:18:14.090 and I'm going to say something like, 532 00:18:15.230 --> 00:18:16.280 Make the title 533 00:18:19.490 --> 00:18:22.120 Items version 3 and deploy. 534 00:18:24.800 --> 00:18:25.380 Quickly 535 00:18:28.650 --> 00:18:30.070 And while it got set up there, 536 00:18:30.090 --> 00:18:31.230 it took a little bit longer 537 00:18:31.370 --> 00:18:32.040 than it needed to, 538 00:18:32.130 --> 00:18:33.270 but let's just revert it. 539 00:18:34.110 --> 00:18:35.810 And this time I'll tell it not to be so, 540 00:18:36.270 --> 00:18:36.540 uh, 541 00:18:36.750 --> 00:18:37.950 so worried about getting it right. 542 00:18:38.030 --> 00:18:39.080 Just make the change and, 543 00:18:39.110 --> 00:18:40.260 and do the deploy right away. 544 00:18:40.310 --> 00:18:40.750 And there we go. 545 00:18:40.870 --> 00:18:42.370 That was a lot faster that time. 546 00:18:42.840 --> 00:18:44.690 So I find this is a really cool way to work 547 00:18:45.110 --> 00:18:46.340 and uh you should try it out. 548 00:18:46.510 --> 00:18:46.740 All right, 549 00:18:46.830 --> 00:18:47.260 thanks for, 550 00:18:47.360 --> 00:18:47.500 uh, 551 00:18:47.550 --> 00:18:49.850 for listening and uh I hope you see how 552 00:18:49.990 --> 00:18:52.500 quick and powerful it is to do deploys with elements, 553 00:18:52.670 --> 00:18:54.280 especially when you control the boxes.