Deploy a Flask MongoDB Database Application on Vercel

in this video we're gonna develop and deploy a database driven flask application using uh versel and mongodb atlas i've always been a fan of versailles and i've used them for javascript applications but i've never before thought of using them as a deployment platform for flask applications especially ones that have a database system or database requirement for that application because versailles is of a static based lambda function or also called serverless framework so naturally you wouldn't think about having a database driving application on a serverless framework or or platforms what i'm going to show you now is a totally free stack the only thing that you would need to pay for if you wanted to have a custom domain is for that domain itself but otherwise you don't have to pay for the infrastructure or for the certificate or even for the database to be honest because we're gonna use mongodb atlas which is again like trial like initially free if you don't have a lot of data or usage patterns i have a bunch of small deployments that are for like personal purposes that are just for testing things out and i don't pay anything either and so we're going to be using a flask application that has a factory pattern that will have mongodb as the database storage but this can also work with postgres sql there are cloud-based postgresql platforms as well we're going to start by signing up on versailles typically i'll use github or you can use gitlab or bitbucket whatever you prefer but let's do it with github and i need to sign in and after that we should be all set to go select a username and we can go into the overview and we have no projects yet so we're going to start doing our project now the next thing we want to do is select a project to deploy on versailles of course we're going to be writing any project that we want but in in our case since i want to do this quickly i'm just going to use the flash mongodb butter plate that i have on my repository that you're more than welcome to fork or clone and this is gonna give us an opportunity to deploy this to versailles using like i said mongodb atlas so we're gonna check out this code in my case because i have my this is my own user i'm going to just check out the code but in your case like i said you can do your own code base or you can fork this for testing purposes let's take a quick look at this repository so i'm going to open my editor so what this application does it sets up a counter that every time you open or you hit the root path it will start from one and then increase the number every time you refresh the page it's a very simple application it has its own tests so that's all good what we want here is a setup for purcell to understand how to kick start this application now typically i add a whiskey.py because on production environments you will not run this using flask run you would do something like unicorn and typically unicorn runs and i have that on the readme by doing typically you would do unicorn and then whiskey colon app which is imported here from the factory as equals create app which is actually coming from application py which is this create app function that returns the app itself now what we need to do here is to add a file that versailles gonna look for which is the index py now i tried setting up manage py as the as a kickstarter for it and it doesn't really work i think it's maybe hard-coded to look for an index py so we need to add that file so in any case mandatory wise just you like visualize it will be run when you have this application running locally but whiskey is going to be our friend on any production or even staging environments and we're going to need to add an index py so i'm going to add it now which is going to be just used by versailles and it's one line it's it's just from whiskey import app so it's going to leverage the whiskey file and grab the app from there and that's pretty much everything you need to do so you have your factory application like pattern you have your whiskey file if you're gonna deploy this on any production environments and you have your index if you're going to use versailles before we push our repo to github and identifier cell we need one more file for this repository to work on versailles and that is a personal.json file it's a simple file essentially we make it version two we have the builds which are sources the index py file we just created and it uses this build package which is the virtual python and then we have the routes which essentially we're saying anything that has a source of star dash or slash anything then the destination is the index py handler which is the application handler so that's what we need to add on the repository for the versailles build to succeed so we save that file we're almost ready but now we need a requirements.txt and the reason is that we're using poetry for this project and virtual is not gonna at least doesn't understand at this point what or how to install these packages it's gonna be expecting a requirements.txt file so we need to generate a requirements txt file that we need to add to the template and so the way we do that is by doing a poetry command that looks as follows and now as you can see we have requirements.txt that was generated by the poetry file as a requirements.txt file that we can now add to the repository so let's go ahead and add those changes and send them up to our repo in github and now on our virtual dashboard we're going to say we want a new project typically we want to select one of our existing projects but we haven't connected even though we signed up with github it doesn't give access to repositories so we need to add a github account here and that's going to go to this like prompt and this will install versailles on your github so we say install and now we have our flex db boilerplate is available we click import and it's going to create a project with the name flash mongodb boilerplate i don't think we need to select anything here because these are like typically json javascript repositories and we have the version json file there so that should be good here it says that the main branch is going to be like our main branch and that the folder is the slash folder but this is going to be all good this will we will need to set up afterwards which is the environment variables and the idea here is that we need to set up some settings for the atlas mongodb database so we will set that up in a bit but let's just uh say deploy and we wait till it's it does its thing i'm sure it's gonna fail because we don't have the mongodb settings so let's let's see if we can fix that or set that up in the settings before we do anything on the database side we need to sign up for a mongodb atlas account just head over to mongodb.com atlas slash database let's say try free and we can create an account you can do it using your name password email or you can sign up with google once we accept the terms and fill up a short survey we want to say that we want to create a free tier and we select aws just leave like the defaults in there and we skip this and we typically want to create a username and and password to access the database so i'll set that up so we create the user and next select the cloud environment and put here 0.0.0.0 0 which is access from anywhere for more security you definitely if it's not like a personal application you might want to filter that to the ip addresses where you're going to be accessing the the cluster but for now let's just do world access here so we add that entry and then we finish and close the last step is setting up the flask environment variables for the repo so for that we need to get the connection string for the application and we do that by going to the cluster information on the project and click on connect and you'll see these three options you want to select connect your application and as you can see here there's a string that you need to replace the password with the actual password that you selected but if we copy that then we're gonna be almost ready for getting this up and running we just need to add the environment variables here on the first cell to connect to our database and there's a couple of more versal or flask variables that we need to to set up so to do that we go to the settings of the project so you go to the flash mongodb boilerplate and go to settings here and then environment variables now something interesting that you'll see here is that it has production preview and development selected so we can actually define different variables so for example if you wanted to have a what they call a preview environment setting that points to a mongodb atlas a separate database with like test data and then you would have another one for the production connection database to mongodb for production data you can do that and there's also a development setting you can actually run your application locally using the versailles cli but we're not gonna look at that here we're just gonna just set up the three as the same but you're definitely you can set that up so we're going to need the following variables for the flash gap we're going to say manage which is manage py for the mongodb we need to name it the same as our flask cam in here so the database is gonna be app so we need to like basically more or less get this the same variables here um and then we're gonna set mongodb host and you're gonna copy that same string that we had in here but replacing it with the actual password that you have set and we're gonna say flask m is production and finally there's two more secret key even though we don't necessarily need it it's a good practice to set one up i just put like a random string there and then the port for the application is going to be port 80. and that's it so let's go ahead and check out a preview branch and deployment for this application and for that i'm just gonna use the editing functions of github to create a quick branch so i'm gonna just add the command to export the requirements.txt on the readme i'm going to add a section called verscell switch to branch and then we have that edited readme and then go back to github.com and here we'll see that there's a pull request so we compare and add a create a pull request you'll see that first cell is now generating things for us i have some code checks in here but if we see the details here it's building the application so that's pretty cool because we have a a preview version if we go back now it says deployment has completed and let me refresh the page you see here how it says inspect and preview so this url is not the production url it's an alternate url that we can call a staging url but effectively hpr that you have will have this preview url so if we click that and i'm going to open it in a new tab you'll see that our application is up and running and if i refresh the page it's working perfectly well and so this is pretty cool like you have a staging let's say version of of the application running that you can check if the code that you have just worked on works well and if not then you can continue doing changes on this vr and every time you push to it it will update that but again the cool thing here is those variables that we we saw earlier applied to this environment so you could have an alternate database running here that has test data and so you don't pollute your production data and then you have the production settings that would be separate that would work with this application so i'm going to merge the pull request and delete the branch and so now ourselves see how it says building because this is going to be the production url which is this one here flash mondo mongodb boilerplate versa lab we can see the the details that says building you can see a preview there but here that's our production url notice that the counter is at 11 because we're using the same database settings or mongodb strings as the preview and yeah this is a flask factory pattern application running on versailles and you can also have an actual domain that you own pointed here if there's no charge for it and you can explore that uh maybe i do a quick video on how to do that but it's pretty simple it's just reading the instructions of pointing your domain to the versailles name server and and you'll have your own url here instead of the versailles app url but that's it that's how we can get our flask database driven factory pattern application on versailles without paying anything and with a an amazing cicd pipeline that includes a staging preview url and after this i'm not going back to aws or google cloud because this is so easy and amazing

Channel: FromZero

Views: 6,944

Keywords: fromzero, web development, web, development, tutorials, howto, video, training, vercel, flask, mongodb, factory, ci, cd, github

Id: OWfmAVE2B8c

Length: 17min 45sec (1065 seconds)

Published: Wed Jan 19 2022