Deploy Your AI Code in Minutes

Hi, everybody. Shifra from Render here to show you how to migrate your VIVE-coded Repl.it app to Render, step by step. So let's get started by jumping right into the Repl.it homepage, and it's going to ask us what we want to make. And we want to do something that is just really, really simple. I have a recent app listed here, but you should see an option that says Websites. You should be able to click that and see option for landing pages.

And then if you click on Landing Pages, it's going to auto fill the app prompt with something that looks a little bit like this, just very generic app prompt. What I'm going to recommend is that you add one more line to this, which is to use mock data so that this project doesn't require a database. So if we hit start, I'll explain a little bit more about why I'm actually going to do that. So adding that last bit about the database, it's going to keep our example really, really simple so that it's easy to deploy on Render because we'll only have to worry about one Render resource, which is the actual web service for our website.

If we didn't do this, then the app would generate a bunch of data with a database connection, and we would have to then provision a database resource on Render itself, which is something that we don't want to have to worry about. We want to just keep this really simple and doable. So we're just going to use mock data for now. But of course, if you want to use a database and that's something that you're comfortable with and ready to do for your app, please go ahead.

Great. Now the AI is going to work on this for a while. It's going to build that high converting landing page for us. And once the AI is finished, we're going to want to test the functionality and make any changes until we're happy with it. Awesome. So this is our super cool landing page that we just generated. I want to say it took a little more than three minutes. And something I really wanted to call out here was that the AI actually ran into an error and resolved it itself in some sort of, you know, well-engineered feedback loop. So it's pretty awesome. And now let's test some functionality.

So if we click the Get Early Access button, it's going to simulate some stuff. This looks pretty much like what I want it to look like for now. If you want to make changes here, then definitely do that. But I'm going to move on to the render requirements that we're going to need to deploy our app on render.

For those who have deployed on render before, you know that we need something like a requirements.txt or a package.json to note the dependencies that Render needs to worry about for the project. So I'm just going to have the project, make sure that we have that. And then also ensure that the app is listening on the address 0.0.0.0, not some other default addresses. Great. Both requirements are already in place. We're just kind of doing some checks here.

And then the other things that we're going to need for our Render configuration is we're going to need to know the root directory where the website is building. We're going to need the command for that build and the start command. We also want to make sure that the correct port is going to be run, and we want to know if there's any other environment variables that we need to worry about. So I have a prompt ready for that as well. We're going to ask the AI for that information. Great. So we have an npm run build, an npm run start. The root directory is just the project root making things super, super simple.

Great. So we have an npm run build, an npm run start. The root directory is just the project root making things super, super simple. Sometimes it tells you the wrong thing and you have to switch to a dist instead of the project root. So we'll test both if we need to. There is no in-memory storage, no database, like we specified, so we don't need a database URL or anything like that. You can optionally instruct the AI to add in a readme if you want to get fancy here, any other documentation that you want. I'm going to skip that. I'm going to go straight into just getting this into my GitHub.

So what we're going to do here is we're going to look at the preview tab in the top left and just exit out of that. We can search for tools and files here. And the tool that we're going to want is Git, which is obviously our version control for our app here. I've already connected to Git, so if you haven't connected to Git, you're going to follow some steps here to go into the settings, you're going to select your Git provider, choose GitHub, and then follow the authorization steps to connect to your Git provider. And once you've done that, you should see a similar screen here.

I'm already logged into GitHub, so I don't have to follow those extra steps. What I do need to do is I need to click create remote right here and then give the repo a name. I'm going to use a sample landing page. And just say, I don't know, sample landing page to showcase easy deployments on regular perfect. Then I'm just going to click create repository on GitHub. I may actually already have a landing page for this. Let's just say sample landing page demo, then we'll create this repository. And we got a notification here that created the repository. We need to pass our Git credentials, so I'm going to say push and confirm for this session that I'm good to pass on my GitHub credentials.

So it looks like everything has been pushed across from where it says remote updates. We actually have a repository URL now, so we can click on this URL right here and it's going to take us to the GitHub page. I think a really good step here is just confirm that there is code here. It's not just an empty repo that you're dealing with and everything just worked as expected. Nothing broke on the way. So as you can see, all of the code is populated correctly here. And that means we're actually ready to deploy because we have our code ready to go. So I'm going to go into the render dashboard. This is just dashboard.render.com. If you don't have a render account, now is the time to make one. And now that we're in the render dashboard, all that we have to do is click new or add new, and we'll click web service like we discussed earlier. Don't click static site, click web service. So now we can just select one of our repositories that's connected to our Git provider. If you haven't connected to GitHub or your Git provider yet, now is the time to do it. And I'm going to click on that sample landing page demo that we just looked at. Awesome. So you can select no project just to keep this quick, but you can also create a project or add this web service to an existing project. I'm going to skip that, and we can scroll all the way down to our root directory, which we said was just the dot representing the main root directory of the repository. We said that the build command was npm install npm run build, and that's already set for us here. Then you're going to select a render instance type. We're going to use the starter instance type here that has some really great reliability features for just $7 a month. And then we don't actually need any additional environment variables. If you have any other environment variables associated with your project with API keys or anything else you need to worry about, make sure to add those secrets here securely. That is pretty much it. So I think we're going to deploy our web service, and we'll have our app running in no time. Awesome. It says that everything is available at our primary URL, so let's check that out. Incredible. If you were following along, you just Vive-coded an app on Repl.it and successfully deployed it on Render to the entire Internet. So great job, and we can't wait to see what you build next with Render.