Build an AI-driven SaaS Application: FULLSTACK Tutorial with Python, React, and AWS

Key Takeaways

hey everyone welcome to today's tutorial where we are going to build a full stack sas application this is an intermediate advanced level project so if you're looking for something new to add to your portfolio to expand your skill set or just looking for a starting point for your next big project idea then this tutorial is for you we will use python and typescript as part of this tutorial but if you only know one and not the other then i still think that should be enough to follow along because i think that you'll probably be able to pick things up along the way so first a quick overview on what we will be making sas stands for software as a service and it's a business model where customers can pay us for some kind of service that the software will provide in today's example the service is going to be an ai assisted branding slash marketing assistant the customers will tell the service a brief description of their brand and they will receive ai generated branding snippets and keywords which we will generate behind the scenes using open ai the finished app will run in web browsers and on mobile and if you want to try it out for yourself i've hosted a demo of this app at copykit.co and i've also attached the full github repository for this tutorial uh in the comment description below now just as a quick note i did have to add an authentication layer to the app that i've published here although i did not cover that in the tutorial that's because authentication is required as per openai's publishing policies but i wasn't aware of that as a requirement until i had finished recording so that's why it's not included as part of this project so what technology are we going to be using today this is a full stack app so we will be building both the backend api component and the front-end static website that our customers will eventually interact with for our backend server we'll be using python as a language openai for content generation fast api as the api framework and we'll be hosting all of this on aws lambda we'll also be using cdk and docker to manage our infrastructure for the front end we'll be using typescript as a language next.js on top of react as the core framework and tailwind css for styling and finally we're going to be hosting this as a static website on versailles i've chosen this architecture because it is modern and relatively best in class as of early 2022. all of these tools are also highly rated according to stack overflow tech surveys but unlike rust or svout which actually scored even higher across the board these tools are still relatively mainstream which means that it'll be easier to find jobs or teams using the stack now let's talk a little bit about the operating cost of this app so if we push this app to production and we're serving real traffic then how much does it cost to actually run first of all our biggest expense is going to be the open ai api which is charged to us per word or they call it something like tokens so our app i calculated uses something around 80 tokens per request which means that for five dollars a month which is what i've set my hard cap to we'll be able to serve about a thousand requests it's quite expensive for this amount of work but we can downgrade the engine to the mid-range query engine uh the prices i quoted earlier was for the top of the line davinci engine with the curie engine we get slightly worse results but we only pay a tenth of the price so for five dollars a month we'll be able to serve closer to 10 000 requests next i've chosen serverless hosting both for the back-end api and the front-end of the app this is because it's free to use but also it can scale incredibly well if you want to flip the switch and go to hit production with your app serving millions of requests in a day aws lambda which we are using for the back end has a generous free tier and will let us serve something like a million requests before we even have to pay a single dollar after that i think it's something like 20 cents per million requests and versailles which we are using for our front-end and our web component is always free for hobby and non-commercial projects if we do want to to serve commercial traffic then we'll have to upgrade to a flat fee of 20 dollars per month so as you can see this architecture will allow us to get started with our app basically for free but also will allow us to scale to millions of users quite efficiently just at a flip of a switch finally i know that this is a very long tutorial it's three hours and involves learning quite a lot of different technologies and frameworks however building a project like this typically does involve using quite a lot of different things so hopefully this tutorial gives you an idea of what that process is like end to end without oversimplifying things too much however because of its size i don't recommend attempting to tackle this project all in one setting instead i recommend breaking this up into the backend component the front-end component and then maybe the styling component this whole video is broken up into logical segments which actually corresponds to the github commits in the source code below so that allows you to work at your own pace but also pick up where you left off so with that out of the way we're ready to get started this is a demo of the product here so the idea is that i provide provided with my brand prompt for example if i'm selling yoga mats my brand might be yoga mats and then i hit submit and my output should be something like this so my prompt was yoga mats and my branding snippet is start your day with a smile and some good vibes with a yoga mat from our collection and for keywords i get things like yoga workout fitness health well-being all that stuff so you get the idea this demo is actually available for you to try out on uh copykit.co so if you give this url a shot you might be able to try out and play around with it and see what what the app does the purpose of this project is to show you how to build an application end-to-end that includes integration with openai although you don't have to do that if you don't want to make an ai driven app it includes the back end that handles the input we saw earlier and processes it and then the front-end interface which is what we're seeing here and how it's made available on the internet and on mobile so without further ado that's our aim for today and let's get started before we get started with any coding let's first take a quick look at the architecture so all the way on the left here we have the open ai gpt3 and we're going to access that with an api so this is the actual ai model that does all of our language processing next we're going to actually have our service that calls the api the backend service which is going to be implemented in python so it's going to be a python script uh which we're going to use with fast api to turn it into a web api so now we can call this from our you know from our website and this whole thing is going to be hosted on aws inside a lambda function which we're going to make available through api gateway so by the end of this middle part here we should have a web api url that we can use to talk to this and get the response that we want and finally for the web interface we saw earlier we're going to build a website using typescript as our programming language and next.js react as our framework finally we're also going to use tailwind css as part of this project for the styling and this entire front end is going to be hosted on versel so once we have that and set everything up the user can actually access it and we have a fully functional web service now each of these hosting options have been selected to be serverless so we don't actually have any kind of ongoing fees and these both of these services have very generous free tiers so i expect you'd be able to serve something like a million requests or more before you actually even have to pay a dollar using these technologies obviously serverless means that it can scale up or scale down very easily as well so not only is it cost efficient but if your startup decides that it needs to get very big or grow by 300 percent in one day then this architecture allows you to do that very quickly okay so now actually let's get started with the project we're gonna work sort of from the left side of this outwards to the right so obviously we have to start here with uh the open aigpd3 uh we're gonna need to get some api access keys so we can call this and we can try to use it a little bit as well to see what type of input output we will be getting so open openai's gpt3 is a ai language model that lets us do a crazy amount of stuff with the right prompts and inputs we don't actually have access to the source code of the model itself instead we make api requests to a hosted version of this model and we get the output that we want so this is going to be the thing that powers our keyword and branding snippet generation to start with this you'll first need access to gpd3 which before it used to require a waitlist but now i think you could just go to openai.com and get started by signing up and you should have access right away so if we go to the documentation over here i suggest you take a bit of time to read through all of this all of the usage guidelines safety best practices and pretty much everything here as well but what we care about is this developer quick start section and once you create this you're going to have api keys which by the way you should never reveal but the ones i created here i will delete after this video so i can show them for the purpose of this tutorial but this is what we're eventually going to need for us to programmatically interact with openai and we'll have to install the python binding here like this so we're going to go ahead and do that now and this is a quick example of how to use openai in an application so let's see if we can get that going really quickly so i've got a new python environment here which doesn't have any packages yet i'm gonna do pip install open ai just as it says in the instructions okay so once the installation is done i should be able to create a python application that interacts with openai so let's go ahead and try that now i'm gonna take this example uh snippet that they have in the tutorial here and i'm going to create it in this workspace so right now my file is this copy kit tutorial folder which is a empty get new git project that i've created and i'm going to make a directory called app which i'm gonna use for my python application so let's go into that directory okay so now i'm here so now i'm here i'm gonna open my visual studio code to that page just this one here so i copied the snippet and now i'm in my project folder i've created this folder app where i'm going to keep all of my python application that i'm building i'm going to create a file called copykit.py and put in the snippet that i just copied from the example documentation so here it is um looks pretty good so let's see if we can use it firstly we need to load the api key from environment variable so let's do that so in python we can set the variable we can just set it in the environment here and python should be able to find that if it's running from the same place so i'm going to actually copy my secret key which by the way never reveal or expose your secret key but for this one i'm actually just going to show you how you can export it as an environment variable and then i'm going to delete the key so it's i guess it's safe but in practice be very careful about doing anything that exposes your secret key for people to see [Applause] okay and i can set my environment variable like this this is my temporary secret key so now that when i run the application it should work so let me make this a bit smaller go so i could use their example code and i'm just going to print the response so we can actually see what it comes up with save this then run my application [Applause] okay it works now let's clear it and tailor the prompt to what we want for our application so uh first of all our prompt is gonna be something like this well actually let's make it a new variable [Applause] generate upbeat branding snippet four and then we'll create another variable for that uh we'll call it subject call it coffee just because we want to be able to change this input later so now we have something like that that will be our prompt instead and for the max tokens i want a little bit more space so i'm going to set maybe 32 that's how long the response can be so let's give that a shot now just run it again okay um it's giving me something but this doesn't make a lot of sense because i think we have to use a different engine so right now we're using the um we're using the davinci engine which is here and that continues the example that what we have so i think we need to change it to the davinci instruct which we tell it what we want which is what we're doing we're asking it to generate something rather than providing an example for it to continue so that's why we have to change the engine to davinci instruct beta and then we can try this again see if it comes up with the right output this time okay here we go coffee the best part of any day whether you need energizing pick-me-up or a soothing warm um okay good well this is cut off because we limited the output to 32 characters but um that's fine so i think with this our api integration is ready to go and we can start building our python application so we're going to go ahead and implement this part of the service now which is going to be a python application i basically want to wrap this snippet that um we created earlier that generates our our output but do a couple of things to it like make it easier to have this input and make it easier to get the response out of the message that we receive we're going to try to break this up and turn it into an interface that we can use more easily to start with let's first create an entry point for the app so that when i when i run it it's not just running it like this but we can run it with some kind of input like you know like that instead obviously if i do this i don't think anything's going to happen it's just going to ignore it yeah so it just ignores my argument for now for example if i change this word to cars it's still going to generate the output for coffee because obviously that's hard coded so i need to make this work alright so let's get started on that first let's create our main function which is going to be our entry point into the app and again let's do this okay so we have this now and we're gonna do this say running copy kit [Applause] and i'm just gonna comment out this entire part for the moment because we don't want that yet so let's go ahead and run this again okay running copykit now how do we get this input parameter working so this is python has a module for us called arc parser which we can use to do things like this so let's go ahead and add that in we have to actually import it first we have to do like this create a new argument parser uh the official docs are available on this so if you want to know more about it just search for our parser in python it is a default library so you don't have to pip install anything and i can add an argument like this one name or flag so i want to call it input this i can do i uh and the type is gonna be a string and it is gonna be a required input okay so again if you want to look at more keywords and arguments available then yeah i suggest looking up the official documentation so once we've created the arc parser we just call it with parse args and that would give us an object which we can get this attribute for directly so user input will be rx dot input so that would be the name that i gave it here now let's actually make sure that works by printing it out okay so run my application again there we go running copy kit user input cars let's try it with something else yoga mat okay so now it's knowing how to capture our user input and what happens if i don't pass in anything it throws an error it says i definitely need this input because it's required okay so far so good so now i want to take this input and use it as part of this prompt so let's actually wrap this into a function i'm going to uncomment bring it back and i'm going to say generate branding snippet and this one is going to take a user input actually i'm just going to call it prompt here okay but we already have prompt here as well so i'm gonna rename things a little bit because uh this is a prompt but this is also a prompt so i'm gonna just give this an adjective enriched prompt this is the one we actually sent to open ai oops go and uh yeah i don't need this one anymore and i can do this so so now when i use this i can generate a branding snippet with my prompt well it's actually my user input and that becomes my prompt which gets enriched with this instruction uh i don't know if i want to do a colon so it's clear to the ai i want a response from that and then it gets passed on to the open ai um api here and i i get the response in this form so first of all let's just check if that works so far okay so now we got this which is good so the next step we want to extract just this line from the output so the structure of the output is that there's a choices object which is an array and we only have one element because i think we only requested one choice and in that element we need to get the text key uh so we should if we path that properly we should be able to get the string and then we'll have to get rid of all this uh funky stuff at the beginning and at the end so let's give that a go first [Applause] the branding text is the response choice choices with an s okay index zero because that's the only one we're getting then text i think it's text yep okay so now we should have the branding text and i just print the branding text on its own instead of the whole response let's run that again okay so that's looking pretty good i don't like how at the end here it kind of like we we specified that it can only be 32 tokens long so sometimes it cuts off what it wants to say i don't want to increase the tokens because i want to stick to that limit but i want this to look a little bit nicer i want to make it clear that it's truncated so i want to add like an ellipsis at the end of this sentence so i could do that by um actually first checking if the last character of this string is you know like a full stop and if it's not then i'm going to add the ellipsis so the last character is going to be the branding text and i can i can index a string like an array negative 1 means take me the last element and then i can check if last character isn't in i'm going to create a set here and here's the punctuation but i i'll add a couple other ones as well which are valid sentence stoppers then i want to append triple dots to it so that should give me a nicer finish than these things but one more thing i actually want to do is also strip the white space because we saw there was some outputs that would have a new line so i'm just going to do a strip there it works on well we can't really see what it does because it doesn't know that that's a string but if i do this instead rounding text equals brandingtext.strip you can see that it's uh returns a copy of the string with a leading trailing white space removed uh the reason i have to do like if i just do branding text strip it's gonna strip it but this doesn't change the actual string the string is immutable so it's just going to return a string that doesn't get used so if i want to change it and strip the actual characters i have to sort of reassign the value here and so i've stripped the white space i've added ellipses let's put some comments so we know what we're doing extract um text and strip my space truncated statements okay so i've added a couple of labels and now i can print this but actually i i don't want to just print it i want to return it so i'm going to do that instead and i'm not going to print this anymore instead i'm going to capture the output here and print it here because i want this function to be able to be used in other places later on so printing it doesn't really do me much good so i could if i want to print it i'll capture the results here and then print it here instead but i do want to make this return um my result okay so let's give that a shot here we go the yoga mat is the perfect place to find your zen blah blah blah blah blah and yep there we go we've got our ellipses because the sentence is truncated well actually i don't even know it's truncated i mean it's it's a perfectly fine sentence it's a great way to start your day or wind down after a long day well let's see a couple more examples and see if it does what we want okay this one's good no ellipses because it does end with a full stop let's try again with something else maybe maybe back to our coffee i kind of like simple examples okay this is a good example here this is obviously truncated so it says we have all your favorite coffee drinks to help get dot dot dot so now it's clear that this is a truncated output all right i'm pretty happy with that um so now we've got this part of the application uh i've got my branding snippets here i also want keywords because part of our application design we all we generate branding snippets but we also generate keywords so let's turn that into another function uh generate oops generate keywords [Applause] we're gonna print both of them [Applause] okay so now i need to create that function i'm just going to copy this one here i'm going to reuse most of it um okay so what i want to do i want to enrich the prompt differently i want to say generate related related branding keywords for the prompt still use the same instruct engine um and i'm going to change the name of my output just so that it reflects what we're actually doing so this is still going to be the same i don't think i'm going to need this part anymore then i'm going to return keywords text so let's see how that looks first of all so now it's going to generate both branding snippet and keywords [Applause] okay so those are my keywords here but keep in mind that this is actually an entire string but i want it in an array so that when i display it on the front end i can do things with each element so i'm gonna have python split this up for me into a bunch of words in this case the delimiter is a comma but sometimes i've seen it use other things as well like a dash or a new line so we are actually gonna split the string using a regex so we're gonna have to import regex first just so that we have different choices um then we're gonna do this split the first thing is the pattern so the pattern is i want to split it on comma or a new line or star or a dash i think maybe that's fine and it's going to be the keywords text okay so now let's actually print that out and this will not return a string anymore it's going to return a list of strings which we'll have to import this one as well okay so now this is what our import looks like and we are actually returning a list so let's give that a shot whoops i have an error here um let's try that again i think my regex might be wrong i think that this is actually a special character so i'm actually just going to ignore that one for now and yeah maybe just do this instead see if that works okay this looks better so now i have uh my keywords as a list but there are some white spaces and there is a blank element so let's fix that really quick let's we're gonna run we're gonna use list comprehension to create a new array and uh first of all we're gonna remove the white spaces from each element so k for okay in keywords array we're gonna do k strip which will remove the remaining white spaces we've done that we assign it back to this and then after that we are gonna remove any elements that are empty so we're gonna keep these elements if the length of that element is greater than zero so this should strip the white spaces delimited into a list and also filter out anything that's empty let me try it now okay looking pretty good um and just to make my keywords more consistent i'm gonna also make everything lowercase as well because like this one here just wanna make it more user-friendly so do this [Applause] that okay and then let's just do one last test to make sure it still works yep okay looks like everything is working fine now okay so now we've got our two core functions for this program and they seem to be working as intended now one last thing we do before i move on from this section is first of all i want to clean up the elements that we print or that we log a little bit just so it's more useful and i also want to validate this input so i want this input i only want to use this input if it's under a certain length just so that my application my user can't sort of antagonistically send a very long input and that's going to cause trouble for my application or going to use up a lot of my credits so let's start with that first let's validate length of the token the prompt here um and i can make this return i can make this throw an error or in this case i just gonna make it return something here and i'm gonna say that if length of prompt is greater than we could pick a number uh say 12 actually i don't even need if i can just return length of prompt is less than or equal to 12. so this will be true or false whether this condition is true or not and then i'll do this say if i can validate the length of the prompt then i'll generate all this stuff otherwise i will i can raise an error [Applause] well i don't want to type 12 twice so let's actually store this somewhere say max input length is 12. i do want to change this later by the way i just made it short so we can test it easily [Applause] must be under max input length submitted and put is whoops okay all right we'll use that there as well okay so now i have a function that checks if my input is uh short enough and if it's not then we are going to throw otherwise we'll run the app as normal so let's try this again with a really long input [Applause] okay there we go and just to make sure it still works with our short input let's try something else this time i really like my hot drinks in case you can't tell okay so now it doesn't work with very long input it works with it still works with short input um yeah i think that's pretty happy with that uh let's actually set this to something like 32 so that there's a bit more um space for the user to type in stuff and finally i think for debugging purposes it's probably a good idea to print out the enriched prompt as well not just the results so we see what we're actually setting to open ai so we'll print this out and we'll also print this out here and i don't think this is helping so we can remove that now um okay and instead of printing that in here i'll actually print it within these functions themselves so let's print it here as well [Applause] okay okay so i think our app's looking pretty good now let's try that again okay there we go so this input's actually kind of useful we can actually see what it's sending over to openai and we can see the results and we've got the validation so if user tries to enter something very long we just reject it so now we have a working application i do want to make a checkpoint here so i am going to commit all my changes so that you can refer to that just for this particular section of the project and it's just this one file at the moment [Applause] push it there okay so now you can use that commit history this one here if you want to just work your way to the specific part of this project now that our python application is ready we are looking at adding a api layer to it so that this thing itself can become an api because we we can't call this directly in our terminal we need it running on a server and we need something else namely our website later on to be able to talk to it so by the end of this step we should have a rest api that we can use to call this python application so for the next part of the project i want to turn my python application into an api which means that it will be able to be accessed publicly over the internet because right now my application works quite well but it is limited to being run from the terminal like this so i basically want all of this functionality available over http because i'm going to need that if i want to build a fully functional web application in order to do this i think the easiest way is to use python's well there's a framework on called fast api available on pip and it's very popular right now for building apis in python 3.6 or above so we're going to see how this looks and it should be a very process for us to turn our python into an api application this way so if you go to the fast api website just search for fast api on google you find this website here click on the tutorial and just follow the instructions to install and run a basic hello world so first of all we're going to need to install this run this line pip install fast api let's try that here clip install fast api i think this needs to be in double quotes okay you run that so once the installation is done we should be able to follow the instructions and test it out so i'm in the tutorial section first steps here and once everything is installed i should be able to test this out so here's a snippet of what the file should have copy that to main.py okay i don't actually want to call it main.py though because we have a app here called copykit so i'm instead i'm going to call it copykit underscore api dot py but i'm gonna still use the same code i'll just copy paste it in and now to run it i need to run this command with the live server obviously we changed the name from main to copykit so we'll have to reflect that as well so our function is gonna instead be this okay oh let's just copy that in our terminal and try it out okay so now it says it's running and so if i go to this url i should see a response from my app so i see this message hello world i'm going to zoom in a little bit so you can see that and if i change the contents of my app it should also be reflected in the api call so if i call it again yep i can see that it has updated and also if we actually look at the tutorial we can also get a bunch of docs with it it tells us what api is available and we can even test run tests against it with different inputs so let's go ahead and click that there and this set of docs is generated for us well let's set it back to a normal size this is generated for us based on our source code so this is very clever actually because now we can see what we get from it so if i just click try it out i just execute it i can actually see my response here as well so i don't have to just do it through the url okay so we have this now i want to turn this server into an api where these endpoints can be used with my application here now i'm not going to change my original application i'm going to keep it the way it is but instead i'm going to import it into this api and use it here instead so i'm going to do this from copykit import okay so these are my two functions generate finding snippet and generate keywords and let's do this one first with the branding snippet so we're going to do that here we i'm going to call this generate branding snippet api actually i just make this a bit shorter i don't need the full name so i'll do that here and this function already returns a string so we can do we can do something like this snippet equals generate branding snippet but it needs a prompt so how do we get this prompt we actually need to add some parameters to it if we go to the queries parameter section of the doc we'll see some examples on how to add that we basically just add them as function arguments into this and it would actually uh the the framework will understand to turn that into query parameters so we can just try it really easily by testing this out here type in prompt as a string and hello copykit i'm going to actually make it return the prompt [Applause] like this so we can see that it works before i actually run the function we go back to our api explorer and let's refresh this again you can see that the root path is gone and now we have this generate snippet api if i click here we see that the prompt is a required string so if i click try it out i can type in my coffee prompt and execute it and i can see hello copykit promptcoffee so now we uh now we have a way for the user to give us an input and by the way this is what the url looks like so if i actually just put this into my url browser this is what i also get there cool so let's actually run this with our application now so i've imported this function and i can put in this prompt here and now i can return my snippet like this okay let's give that a go so refresh the dashboard again and we have this prompt we try it out and we'll type in let's type in something else type in soccer okay execute soccer chance and cheers you know you love it okay so this is our response from the ai so uh this is working quite well and just check that we can do it through the url as well let's try it with [Applause] cars are you looking for a car okay so here we get a snippet um that's car related so that's pretty good okay so now our api is able to generate the snippet let's make let's make it also able to generate a keyword all right i think it's smart enough to know that this returns a list of strings so we don't actually have to convert or cast that or anything so if i save this and go back to my browser i should see my new endpoint so i've got my generate snippet i've also got generate keywords so let's try it out and let's type in maybe bottled water okay so my keywords for bottled water are these pretty good i get water drinking water purified water all types of waters okay so this obviously works so yeah so now i have an api out of my python application actually before i do that i probably want to put the validation here first because remember we had the validation it was here but if a user is using this app through the api and not through the cli they can skip this entire validation so yeah let's actually go ahead and do that and also my app is going to use both of these together so instead of having two separate endpoints i probably want to combine them into one endpoint that generates keywords and snippets as well so now i've got three endpoints and i want to validate the input on all of them but on this one i want to combine the output okay so uh how do we do that first let's actually just write the logic for this generate snippet and keywords and i'm just going to have it both like this and now i might want my output to be consistent throughout all of these things so maybe i'll do it like this instead this way if i'm writing some kind of handler for the output of my api it at least has sort of like one response schema it needs to know about so it doesn't have to understand different types of responses for each of them so i think i can do it like that okay um so let me try this generate snippets and keywords one next refresh this here and try this for dog treats execute okay so now i get snippets and keywords in my response it's what i wanted but i also want to guard against very long inputs now so let's add in our validation [Music] so with fast api i think we can make it fail by just throwing the right type of exception and i want to validate the input before i actually try to run it through the ai so i want a function like this validate uh yeah i guess we already have it valid actually i want one that's specific to um to the api so i'm going to create a new function here called validate input length and it's going to take the prompt and if it succeeds then nothing will happen it's just going to pass through but if it fails i'm going to make it throw an exception and i think that's going to make my api fail as well so i can actually import the length validation from here actually no i don't want to i don't want to use this one at all so i've kind of duplicating code a bit but i kind of want this number available at this level as well so i'm going to write my own function here i'll say if length of prompt is greater or equal than max input length then i'm going to raise a val well actually no i want to so actually if we go to the fast api it will tell us what type of exception we can raise okay so in the documentation there's a section here called handling errors and there's a whole bunch of stuff here i'm just going to skip to the code snippet if we import http exception we can raise it with a status code and some kind of detail message so i'm just going to copy that and use it right here for that i'll import it okay so this is imported from fast api so i do it like this okay so i'm gonna say instead this is gonna be a 400 and the i'll write input length is too long must be under uh this many characters [Applause] okay okay so now i have this in front of each of them and they should fail um if it's over this amount of characters so we can try that now actually go back to my api dashboard and let's just type in something really long [Applause] okay run that and there we go it's got a 400 error input length is too long must be under 32 characters um so yeah now we have length validation we've got a couple of different apis and yeah i think our api server is ready to go so we can move on to the next step okay so now the fast api integration has been added i'm gonna make another checkpoint here and just commit the changes uh so that you can check that one out if you want to just work up to that point now that we have a functional python api application running locally we need to put it in the cloud so that we can call it publicly from anywhere so now we're going to focus on this part which is hosting this application that we just built on aws we're going to build the cloud infrastructure that allows us to host this api online and let us access these endpoints not just from our local host but from anywhere in the world with an internet connection so we're going to take this entire application host it somewhere and make it publicly accessible so that we can continue building it out um this is quite a complex part of the project so if you start to get lost don't worry just take it easy and maybe pause the video and take a bit of time to look at each of the different technologies we have to use because i will be going through them sort of quite rapidly here and just to give you an idea of the technologies we'll need here or the requirements first of all you're going to need an aws account which you can just go to the aws website to create one you know we're going to be using all the free services so you shouldn't be charged any money but you might have to set up billing beforehand once we have an aws account you also need the aws command line tool which you can just search that in google and find instructions on how to set it up for your machine and if that works you should be able to type in aws uh this version well actually don't have this so i'll pip install it now yeah with aws cli if you already have python it's mostly just a matter of installing it so i'll let that run and this can continue here the other thing the next thing you need is aws cdk uh so that is a tool for creating infrastructure um with code and again if you just type in aws cdk there's a couple of getting started guides here so go through that first and make sure you installed but a couple of things with the cdk so this actually is natively a node application so you might have to do an npm install so you might also need node.js beforehand they actually have a python version as well but i think that node and typescript is the native language for cdk so we're going to use that just so that we're using sort of idiomatic tools so make sure you have that as well so now in my terminal i can check my versions of my applications i've got my aws cli here it works and i have my cdk and this works as well and the node i'm using right now is version 16.3 cdk 2.3 so if you're following along with these make sure that the versions you have of these applications match and if you can run these commands it probably means you've mostly installed your stuff correctly um now let's go back here okay so typescript oh so cdk is written well the note version and it's anyway is written with typescript so you need to know how to use that as a programming language if you know javascript already or you know python then learning typescript should be easy you might be able to just pick it up from looking at it but if you want a refresher just search some typescript tutorials really quickly or some examples on the internet but it should be pretty easy if you're already coming from a programming another programming language so don't let this one put you off and finally we're also going to need a bit of a knowledge from docker as well which is if you don't know what it is um well it's not important to know what it is for this tutorial but we are going to use it so might go ahead into i might recommend just go ahead and installing it and reading up a little bit about this as well and we're going to use it for a very specific purpose here which is to prepare our infrastructure with dependencies so that when we actually put our application in there it's got all of the files and packages it needs and i'll show you later on how this is used in our project so once you have all of these dependencies installed i know it's quite a lot and taking time to get familiar with them or maybe you already know them then we can start building out the next part the goal of this next section is to put our python application which we've wrapped in an api using fast api we want to put this on the internet so that we can now use it and we need a plan for that so here's the plan that i'm gonna use now just as a quick disclaimer we can do this a bunch of other ways we can just uh host this on a digital ocean server or an ec2 instance or you know there's there's many ways if you just search on google how do i host a fast api uh online or how do i turn it into a online api there's probably going to be a lot of different ways and lots of different results but for this project i've chosen to do it this way and the reason is because i feel that this is scalable in terms of not only from a user perspective like if we need to serve more requests we can scale this up very quickly it's also cost efficient if nobody's using this or if you're getting very few requests it's pretty much free in fact you could probably serve millions of requests for free with this setup but also it's efficient from a developer's perspective because once you set this up and once you've got the infrastructure going it can be quite easy to maintain because we're going to have a code package to actually maintain all of these things instead of having to configure it in the console and uh our dependencies as well are maintained by a separate system with a base layer here so we don't have to worry about copying that in by hand or doing some weird scripting thing uh we can just focus on our application so that's the choices behind selecting this particular infrastructure so now let me explain each of the components here uh what we're going for or the app that we just built in the previous section is this part here so this is the copy kit app which are two python files exactly these things here which uh is our core application that's what i want to be worried about and so we're going to put this inside aws lambda function which is a serverless compute platform so unlike regular servers like an ec2 instance or a digital ocean droplet we only pay for lambdas when we use them so this is inactive when there are no requests being served and only when a request comes in uh which we'll find out later comes in from api gateway another service we'll be using it will turn on it will process this application and then it will uh shut down so it's pretty efficient we only pay for what we use and it can scale very fast as well so if we suddenly get a lot of different requests uh it can create a lot of different lambda functions to serve all those requests at the same time so we're going to use aws lambda function to compute this but another detail in here is that well first of all you see that these apps that we've created they have a lot of dependencies like fast api they've got um this one has got open ai and well yeah i guess it's just those two for now but by default these dependencies aren't included in our source code so when we build our lambda function so when we build our lambda function and we copy in those two files we won't be able to pip install those dependencies so in order to have that available in the lambda function we also need to upload that as well so the best way well there's a couple of different ways to do it we can package it locally and copy the source files in here and then bundle it all up into a zip and then send the whole thing up to lambda but i don't quite like that because it's quite hard to manage and then it also makes it if you have a bunch of local files here that you're only uploading to lambda but not using in here it makes it kind of weird so instead what we're going to do is create a base layer so lambda lets you have these things called base layers which is kind of like a bunch of files that are there in the function for our application to use and in the base layer we're going to install the dependencies that we need so we're going to install fast api we're going to install open ai all the heavy stuff uh basically if i type in pip list here all these dependencies the files that are you know make all of this work we're going to bundle it into the base layer and we're gonna do that once and upload it to lambda and then from then on we can just write this app without having to worry about the dependencies ever again unless we change it or make a new set of dependencies but in order to do that we're going to need to use a docker which is a containerization software which kind of sets up like a mini virtual machine environment for us to do a bunch of stuff in so we're going to set that up run pip install into there and then we're going to copy all of those files in that environment into a zip folder which we would then use as our base layer okay so that explains the lambda function but the lambda function on its own doesn't have any way to be accessed by our user outside so in between we need an api gateway which acts as um well it's basically an aws service that lets us type in a url into the web browser or from anywhere else from a client and it we can integrate that with lambda so that when a user hits a particular endpoint we tell api gateway to invoke the slam the function and then return the results so effectively when we put these two things together we have a fully functional serverless api so an api that we can use from anywhere but we don't actually have any running service behind it only a lambda function that turns on when it is called finally to manage all of this infrastructure so that we don't have to click in the console because that's quite an error-prone way to do things we're actually going to create these components with code using another aws tool called cdk which i think stands for cloud development kit so it lets us program this you know what what we this whole thing here this program uh this infrastructure this api gateway as well as its relationship with each other as code and then lets us deploy it to our aws account so that we get all this stuff right from our repository okay so sorry that was quite a bit long um but i think that this is quite an important part of the service so i wanted to be thorough in explaining our plan behind that now that we have a plan for our project let's actually go ahead and code this up so the first thing i'm going to do is create a new folder for my cdk project because this has a lot of files when i create this so it's it's probably better to be its own project and separate it from our app so i'm going to go ahead and do this here so this was our app where we have our server and our api let's go to the directory and create a new directory there which i'm going to call copykit infrastructure this okay and i'm going to go into copykit infra and uh i can create a new project in here using the cdk command line so first of all if you want to follow along with this version make sure that you have major version 2.3 of cdk if you do you can just type in cdk init language typescript you can actually also edit a python cdk project if you don't want to use typescript but i i like using typescript because i feel like it is the native language for cdk so i want to stick to the sort of original tools as much as possible and you give this a while now and it's just going to create this project inside our folder here okay so now the project has finished setting up if we look at now there's a bunch of files it created for us so we go back into here and yeah we can see a bunch of these files um and these are the two files we care about so we've got the copy kit infrastruc app and the copy kit infra stack a stack is kind of like you can think of it as a logical grouping of aws resources so in this diagram uh the stack would be this whole thing here so this is the application we're creating and then this would be a resource and this lambda function would also be a resource so first let's go get started creating this just this actual lambda function with cdk now i've actually made another video on how to get started with cdk and lambda funct