Lovable AI Deployment Tutorial

0:00 hello and welcome everyone all right 0:02 let's talk about lovable AI deployment 0:04 now deployment is simply the process of 0:07 moving your app from The Lovable AI 0:08 preview window out to the web for the 0:10 whole world to see use and potentially 0:13 pay for someday using a web hosting 0:15 service like netlify or versel and this 0:17 is where lovable AI really impressed me 0:20 and where I think it stands out from the 0:21 other Solutions I've tried out there so 0:23 I strongly recommend you keep watching 0:25 till the end you'll be glad you did 0:27 you'll learn how to deploy your lovable 0:29 AI app to the web for free add a custom 0:32 domain name to it and finally how to set 0:34 up a professional development workflow 0:36 that let you safely Test new features 0:39 without affecting your live users let's 0:41 dive in you can deploy lovable AI apps 0:44 for free through either versel or 0:46 netlify which are both very similar to 0:48 each other but today I'll be showing you 0:50 specifically how to do this with netlify 0:53 the best way to do this with netfi in my 0:55 opinion is to First copy your lovable AI 0:57 project to your own GitHub account it's 1:00 really easy first sign into your GitHub 1:02 account in another browser tab or sign 1:04 up for a free GitHub account at 1:06 github.com if you don't already have one 1:09 then once you are signed into your 1:11 GitHub account in another browser tab go 1:13 back to the lovable tab click on the 1:15 settings widget right here and click on 1:18 connect to GitHub which will pop open a 1:20 dialogue to install lovable on your 1:22 GitHub account and to give it access to 1:24 your repositories once you do that 1:27 return to the GitHub section in the 1:29 lovable. Dev settings menu and there 1:31 will be a button here giving you the 1:33 option to copy your project to the 1:35 GitHub account you just connected I've 1:38 already done that here so you can see 1:40 the link to my private GitHub repo is 1:42 here and now I can navigate to that repo 1:45 in my GitHub account and see all of the 1:47 code for my lovable AI project here in 1:49 GitHub now whenever I make a change to 1:52 my app using lovable that results in a 1:54 working preview lovable AI will commit 1:57 and push that change in the code to my 1:59 own GitHub repo right here and you may 2:02 be wondering if your GitHub repo is 2:04 private will your project still be 2:07 public on lovable yes yes it will you 2:10 cannot avoid paying lovable for at least 2:13 the starter plan if you want your 2:15 project to be private if your project is 2:17 not private anyone will be able to see 2:19 it here under the latest Tab and can 2:21 even copy it at any time by clicking the 2:23 remix button to create a copy that they 2:26 will own even after you have copied your 2:29 lovable AI project to a private GitHub 2:31 repository lovable AI keeps a clone or 2:35 copy of your repository on its own 2:37 servers and then makes it public unless 2:40 you pay them and make your project 2:42 private come on stop being cheap it's 2:45 only 20 bucks for the starter plan 20 2:47 bucks to essentially add a junior 2:49 software developer to your team is 2:51 absolutely a no-brainer and in the 2:53 interest of full disclosure here I liked 2:55 lovable so much I did become an 2:57 affiliate for them so if you use my 2:59 referral link I'll put in the 3:00 description and then purchase a 3:01 subscription I earn a small commission 3:04 at no cost to you if this video is 3:06 helping you with your lovable AI 3:07 deployment please consider supporting my 3:09 channel and clicking my link in the 3:11 description before you sign up for 3:13 lovable even if it's just for the free 3:15 plan as it shows me you found this 3:17 information helpful thank you by the way 3:20 back in The Lovable AI settings you can 3:22 rename your lovable project or GitHub 3:24 repo before or after it gets copied to 3:27 your GitHub account by scrolling down 3:29 here here and clicking on rename project 3:32 but now that my lovable project is on my 3:34 own GitHub repo deploying to netlify is 3:38 very easy netlify integrates tightly 3:40 with GitHub so I suggest you make sure 3:42 you are still Lo signed into your GitHub 3:44 account here in another browser tab then 3:47 navigate to netlify.com and click on 3:50 login or sign up for a free netlify 3:53 account and use your GitHub credentials 3:55 to log in or sign up if you just signed 3:57 up nlii might automatically direct you 4:00 to a page to deploy your first project 4:03 and if it does feel free to click on 4:05 GitHub from there or if you end up back 4:07 on the dashboard somehow click on sites 4:10 if you already have sites like I do then 4:12 simply click on add new site here and 4:15 click on import an existing project and 4:18 click the GitHub button on the next page 4:20 if you don't have any sites netlify will 4:22 make it really obvious how to import a 4:25 site from GitHub in all cases you'll 4:27 have to authorize netlify to access your 4:29 GitHub account and then you'll be able 4:31 to select which repo you want netlify to 4:34 access or just let it access all repos 4:36 on your account and then click save then 4:39 the repo should show up here and if you 4:41 click on it you should be able to 4:43 configure all of the settings for 4:45 deployment netlify normally detects all 4:47 of the settings from the config files in 4:50 your repo so you shouldn't need to 4:51 change any of these settings the only 4:53 thing you should need to do is to pick a 4:55 site name that will be used as a 4:56 subdomain for your netlify deployment 4:58 and click check availability to make 5:00 sure it's available note this is the URL 5:03 where your app will be deployed then 5:05 scroll to the bottom and click deploy 5:08 I'm not going to do that because I 5:10 already have deployed this app but what 5:12 I will do is go back to sites here and 5:14 click on the gigaen site deployments and 5:18 then trigger a deploy so that you can 5:20 see what will happen when you click the 5:22 deploy button you'll be able to monitor 5:24 nfi's deployment logs in real time as it 5:27 deploys your site when it's done 5:30 assuming it was all successful you can 5:32 come up here and click open production 5:35 deploy and you will see your site is 5:37 deployed on netlify right here at this 5:39 URL for the entire world to see and this 5:42 will all function exactly as it does in 5:44 The Lovable preview window and connect 5:47 to the same superbase database if you're 5:49 using superbase integration and 5:51 everything just works now your mileage 5:53 may vary but my experience with lovable 5:56 AI deployment using netlify in this way 5:58 was very smooth smooth and I think this 6:00 is really cool a game changer for me 6:02 personally and notice at no point have I 6:05 paid for anything yet netlify doesn't 6:07 start charging you for anything until 6:09 you exceed the free plans limitations 6:11 such as bandwidth or build minutes but 6:14 what about ongoing development how does 6:16 lovable AI work with your GitHub repo 6:19 how do I redeploy after I've made 6:21 changes and how do I work on in test 6:23 deploy new features without disrupting 6:26 live users on the latest stable version 6:29 of my app app well keep watching because 6:31 things get even better from here and I'm 6:33 just so happy with the way that this 6:35 tool Works back in The Lovable AI editor 6:38 I can still use the tool exactly the 6:40 same as I did before except now I can go 6:43 into settings and under GitHub I can add 6:46 and select branches I want to use for 6:48 development on my private GitHub repo 6:50 notice I've switched back to main for 6:52 this demonstration and as an example 6:54 I'll totally waste a message and ask 6:56 lovable to do something really stupid 6:58 like modif by my hero tagline from gig 7:01 workk elevated to Gig workor elevated 7:03 with two periods after it lovable make 7:06 the changes and as long as the code 7:07 Works shows up in the preview window of 7:09 the editor lovable will now commit that 7:12 change to the main branch which I can 7:14 verify by looking at my GitHub account 7:17 where you can see here it said it made a 7:19 change to the source folder to update 7:21 the hero tagline but I can also go into 7:23 my netlify account and I should see that 7:25 netlify detected a change to Main and 7:28 automatically initiate ated a deployment 7:30 of the change as soon as it's done I can 7:33 go to the production deploy and see that 7:35 my changes went live automatically but I 7:38 really don't recommend developing on the 7:39 main branch especially if your app is 7:42 live with actual users on it also 7:44 because if you let lovable commit to 7:46 your main branch and trigger a deploy on 7:48 every commit you are going to burn 7:50 through your free netlify build minutes 7:52 and bandwidth much faster this is not a 7:56 problem with lovable just go back into 7:58 settings create a development branch and 8:01 switch to that you can see here I've 8:04 created a branch called lovable ddev now 8:07 all of the changes we make inside 8:08 lovable will be on The Lovable Dev 8:10 branch and will not get deployed and 8:13 made live until we merge a pull request 8:15 to demonstrate that I'll prompt lovable 8:18 never mind change it back lovable will 8:20 make the change which I can preview in 8:22 The Lovable editor but now our net lefi 8:25 deployment will remain the same and no 8:28 build will be triggered once we are 8:30 happy with our work in The Lovable 8:31 editor we can initiate a pull request 8:34 from GitHub to deploy the changes by 8:37 going to pull requests and click on new 8:40 pull request here I will select that I 8:42 want to merge The Lovable Dev Branch 8:45 into the main branch it'll show me the 8:47 changes that were made and I can click 8:49 on create pull request GitHub says we 8:52 can merge the pull request automatically 8:55 except a pull request will trigger a 8:57 preview deployment build on netfi that 9:00 is different and separate from the main 9:02 deployment once the preview deployment 9:04 is done I can click here and then click 9:07 open deploy preview to preview the 9:10 changes notice it says deploy preview 9:12 for and the periods are gone now you can 9:16 preview and test your changes fully 9:18 before taking them live to the main 9:20 branch once we are happy that the 9:22 preview is good we can go back to GitHub 9:24 and click on merge pull request type in 9:27 a comment about the merge if needed and 9:29 then confirm the merge request with 9:31 Maine now we don't want to delete the 9:32 branch right now because we want to 9:34 continue to use that as a development 9:35 Branch for lovable the main branch will 9:37 be updated which will of course trigger 9:40 a production build under the deployments 9:42 we can see it merg the pull request the 9:45 deployment took 23 seconds and it's 9:47 published now if you're an experienced 9:49 developer you might be as excited as I 9:51 am because you realize this is best 9:52 practices for developing in production 9:55 but we're not truly in production until 9:56 we have a custom domain name for our 9:58 site makes this really simple though 10:01 just click on site overview here and you 10:03 will see now that your site is deployed 10:05 we can move on to step two and set up 10:08 our own domain name here we can either 10:10 buy a new one through netlify or use 10:13 your own domain name from a third party 10:15 registar click on whichever one works 10:17 best for you and follow nfi's 10:19 instructions to set it up and finally 10:22 your app is now truly in production with 10:23 your own domain name and everything but 10:26 there is still one huge problem we still 10:28 need to solve some might call it the 10:30 elephant in the room the only problem 10:32 now is that it doesn't matter how 10:34 amazing your production workflow or your 10:36 app is if you can't get it in front of 10:38 the right users users who will actually 10:40 appreciate it and recommend it to others 10:42 fortunately I have discovered the most 10:44 reliable way to get your app in front of 10:46 exactly the right users and it's in this 10:48 video right here if you don't see a 10:50 video here yet please subscribe so you 10:52 will get notified when it comes out I 10:54 hope this video helped you with your 10:55 lovable AI deployment if you still have 10:57 any questions about it please leave a 10:59 comment comment and I'll try to answer 11:00 them thanks for watching and I'll see 11:02 you in the next one