Part 6 of 10

Deploy Your App

0

Install VS Code and Elements, build a todos app by asking an AI agent, and deploy the app to DigitalOcean. Then tour the project environment, the elements command, the website and the business.

  1. 1. Introduction 0:18
  2. 2. Install VS Code 3:30
  3. 3. Install Elements 1:27
  4. 4. Create Your First App 5:26
  5. 5. Set Up a Deployment Environment on DigitalOcean 4:49
  6. 6. Deploy Your App 3:11
  7. 7. The Project Environment 2:32
  8. 8. The Elements Tooling 6:07
  9. 9. The Elements Website and Community 2:48
  10. 10. The Elements Business 1:27

In this video we paste the droplet's addresses and the database's connection details into the agent, answer its questions, and deploy the todos app to a live site with HTTPS. Then we look at deploying again. ### 1. Paste the details into the agent In the chat, write a prompt like this one, followed by the droplet's public and private IP addresses and the database's connection details: ```text Agent Deploy my application to DigitalOcean. ``` If you would rather not paste them, ask the agent how to enter them by hand. It shows you which file to update and which fields to fill in. ### 2. Answer the agent's questions The agent writes the deployment settings to `config.jsoc`, then runs the first deployment. It may ask you a few things: - **The user.** On DigitalOcean, deploy as `root`. - **The SSH key.** Use the key you selected when you created the droplet. - **A domain.** We use `demo.elements.dev`. If you don't have a domain, leave it blank and use the droplet's IP address. - **Whether to proceed.** Say yes. Your agent might not ask anything, and that is fine. The agent adds the configuration, then asks Elements to run the deployment. ### 3. The first deploy completes The first deployment takes just under a minute, and the agent reports that the site is up. ### 4. The live site Open your domain in a browser. Ours opens on the app's sign in page, with load balancing set up and HTTPS certificates in place. Without a domain, open the droplet's public IP address instead. Traffic between the browser and the server is not encrypted until you add a domain. ### 5. Deploy again The machine is set up now, so later deploys usually take half a second to three seconds. Ask the agent to deploy when you finish a feature, or ask the agent to deploy after every change it makes. If something looks wrong on the live site, ask the agent to fix it and deploy again. ### 6. Releases A deploy goes live as a release only when every build step passes. A type error, a program analysis or security error, a failed database migration or a failing test blocks the release, and the previous release keeps running. Connected browsers reload with the new release automatically, so your users see it within a few seconds of the deploy.

To do your first deployment, take those configuration details and paste them into the agent window. If you're not comfortable doing that and you want to do it by hand, just ask the agent for how to do it, and it will show you which file to update and which fields to use. But I'm fine just pasting it into this agent. And I've written, "Deploy my application to DigitalOcean." I've included the public and private IP addresses, and this is the connection information for the hosted database that we have. The agent will make entries to config.jsoc, which is where our deployment configuration is stored, and then it will run the first deployment. The agent should be smart enough to pick the right user for you, but if not, and it asks you, if you're deploying to DigitalOcean, you'll want to use the root user to do deployment.

And it might ask you which key to use. Use the one that we selected when we created the DigitalOcean droplet. So in this case, I'll use id_digitalocean. Next, it's asking me whether or not we have a domain. We do have a domain, actually. So we're going to use demo.elements.dev. Now, if you don't have a URL or DNS entry for your domain, don't worry about that. Just leave it blank and you can go and look at the IP address and use that to test out your application. But we happen to have one and so I'll enter it here. All right, it's just asking me whether I want to proceed. It's telling me that Elements will do everything that we need to do and so I'll click yes.

Depending upon your agent, it might not ask you any questions and that's fine as well. Elements is smart enough to handle the entire deployment on the agent's behalf. The agent is just going to add some configuration details and then ask Elements itself to do the deployment. The first one should take just under a minute to complete, and then hot deployments after that usually take anywhere from half a second to three seconds. Great, the initial deployment has completed, and it's telling me that the website is up and running. Since I had a URL, I've typed demo.elements.dev, and that dropped me into the sign-in page automatically. So we have a live site that's working with load balancing working automatically and HTTPS SSL certificates configured automatically.

If you don't have a URL, just type in the public IP address that was given to you by DigitalOcean and you should land at your website as well. Just keep in mind that the data that's going back and forth between your browser and the server is not encrypted unless you have a URL. Now that the machine has been provisioned, if you want to deploy again, it's going to be very fast and you can just ask your agent to do a deployment. If you finish a feature or if you're feeling really bold, you might just ask it to deploy automatically after each time it makes a change. I'm so comfortable with deploying Elements applications that if it's just cosmetic, I'll often just deploy it immediately so I can see it live.

And if there's some kind of mistake, I'll just ask the agent to fix it and deploy again. Because deploys are so fast and because they're so reliable, I don't really worry that a deployment is going to break the site as much as I used to in the past. Deployment is very robust. If anything fails in the build, whether it's a type checking error, a program analysis security error, a database migration error, if the tests don't pass, any of those things will block the release from proceeding and whatever was there before will stay there. Additionally, any connected browsers will be hot reloaded automatically. And so from the time that you deploy to the time that the users see the update is typically anywhere from milliseconds to one to three seconds.

It's very fast.

Add a comment