Developing a Web Application with Netlify Serverless Functions and MongoDB

hi i'm nick raboy and in this tutorial we're going to see how to use mongodb with netlify serverless functions in a netlify web application so we're going to be exploring the serverless experience but with mongodb included now to accomplish this project today you will need a few things prior to getting started so you will need a mongodb atlas account you can go ahead and deploy a free cluster so an m0 size cluster to be successful with this particular tutorial you will also need a netlify account we're going to be using the netlify cli for this example but there are other ways to work with netlify and they will still work with the material found in this tutorial but just note that we will be using the cli now up on my screen you'll notice that i do have mongodb atlas up and loaded i do already have a cluster deployed and for this particular example we're going to be using a particular database and collection so in this particular collection i'm going to be using the sample data set called sample mflix and i'm going to be using the movies collection now it really isn't too important when it comes to which database or which collection we plan to use because that's kind of out of the scope of this particular tutorial our main focus will be actually connecting to manga to be from a serverless function in netlify and then just doing a simple query and everything else that comes after will be fairly simplistic if you wanted to explore further on your own now to get the sample database and collection up and going go ahead and go to your root mongodb atlas dashboard click on the ellipsis menu and then say load sample data set and several data sets will be loaded including that sample nflix database as well as the movies collection i also do already have my network access rules and my database access rules configured those are out of the scope of this particular tutorial but it can be done as simply as just adding your ip address and creating a user that has access to the particular database and collection now let's dive into the actual development of our project so the first thing that we're going to want to do is we're going to want to create a new netlify project so open up a command prompt this is assuming that you already have the netlify cli ready to go what i'm going to do is i'm going to create a new project directory on my desktop for example i'm going to call this one example project and i'm going to navigate into it and i'm going to say netlify sites create now it's going to present me with a few steps that i have to follow in order to create an application and link it to my netlify account so i'm going to choose the team so it's android boys team in this case and i'm going to set up a project name i'm just going to call it example project i don't know 0 and i'm going to hit enter and it's going to give me a url for finding my application i can go into my netlify dashboard it will show up but for the most part everything that we plan to do in this particular tutorial can be done directly with the cli we shouldn't really have to go into the netlify dashboard to progress with anything that we plan on doing great so with that done let's go ahead and open up that project in a code editor of our choice i'm going to be using visual studio code but ultimately it doesn't matter what you choose with the project up and running you'll notice that we do have a netlify directory as well as a git ignore we will be traversing the netlify directory coming up when it comes to creating our functions but for now let's go ahead and proceed with a few more command line commands in order to correctly lay the foundation of our project so the first command that i want to run within this particular project directory is i want to say netlify and i want to say functions create and i want to name the function that i plan to create so i'm going to say name and i'm going to say for this example git underscore movies now the naming convention doesn't truly matter but because we're going to be working with the movies collection i figured it makes sense that if we want to retrieve movies it might make sense to call it get movies in this case so let's go ahead and give it a path i'm going to use the default path in this example i'm going to say that i want to use javascript and i want to choose the very basic hello world example alright so we actually do have a netlify functions get movies folder with a getmovies.js file but before we start adding code to this particular file we do need to install a few dependencies to get the job done so within our terminal go ahead and say npm install mongodb and this is going to install the mongodb nodejs driver now there's one more dependency that you may need depending on your operating system netlify in the long run does not require this but because i'm on windows it does make sense for me if i wanted to test this locally so what i'm going to say is i'm going to say npm install dot env and what this allows is it allows me to use environment variables in my local windows environment without having to jump through too many hoops to get the job done because when it comes to our mongodb credentials we're going to be storing them as environment variables with netlify which is good for safety because you don't want to hard code any of your username and password or etc so i'm going to go ahead and clear that at this point we can start developing our netlify function so this is going to be powering our dynamic or ad hoc aspect within our website or our web application now if you've ever worked with a serverless function before you know that they may not play nice when it comes to a database because there are a few reasons for that well one you don't know when that function is going to be alive or sleeping or shut down etc so you don't want to try to use it and find out that there's no database connection currently established because then you're going to get an error you don't want to try to establish a database connection every function call because then what's going to happen is you're going to create too many concurrent connections with your database and cause new problems so basically what we want to do is we want to create a global variable to our function which will exist for as long as the function exists but when it shuts down then it'll be re-established and that will prevent us from trying to spin up too many connections or no connections at all so what i'm going to do is i'm going to clear this particular getmovies.js file and we're going to start by including our mongodb node.js driver next up we're going to include the dot env package that we installed so that way we can use environment variables specifically on windows this will work for mac windows and linux as well as netlify so you're not going to cause yourself any damage by using it or if you're not using windows by not using it so let's go ahead and head over to the documentation for emv and to use it it's basically just one line so we're gonna say require.emv config and we're good to go so i'm going to go ahead and paste that in all right so we're going to go at this point so the first thing that we want to do is we want to get our mongodb client established with our mongodb uri string now we don't have a uri string defined so what we want to do is we want to create a env file which holds all of our environment variables and when we open up that file let's go ahead and add a few things let's go ahead and say mongodb uri equals we're going to say mongodb database equals mongodb collection equals and this is where we're going to fill in the gaps so we know that our database is going to be called sample mflix so let's go ahead and add it we know that our collection is going to be movies so let's add it the uri is a little different though we do have to get that from our manga to be atlas dashboard so within the mongodb atlas dashboard what you can do is you can say connect for your collection say connect your application and then we can copy the uri string depending on the programming language that you want to use so we're going to use node.js and we're going to be using 4.1 or later so i can say copy i'm going to go back into our visual studio code i'm going to paste that in you'll notice that the username and password has not been filled yet so i'm going to fill that in and at this point we're able to start using mongodb or at least these variables for mongodb so go back into the getmovies.js file and let's go ahead and add the following we're going to say constant client equals new client and we're going to use our environment variable so i'm going to say process.env.mongodb uri as defined in the env file i'm going to say constant and i'm going to say client promise and i'm going to say client.connect now the client promise is going to be the variable that we try to use within our handler function so if our function does not exist because this is the first time we're trying to use it or it's shut down for whatever reason we'll get a new client promise and we'll be able to use it within our handler function without any kind of issues so let's go ahead and create that handler function so we're going to say constant handler equals async we're going to say event and let's go ahead and start adding our code because we're going to be using async because our connections to our database are not synchronous we need to use a try catch block so that way we can catch any exceptions that should happen because we're going to be using a weight rather than the long form promise method so we're going to say try and i'm going to say catch i'm going to say it error and we're going to say return and we're going to say status code we're going to say 500 maybe server error or something similar and we're going to say body and that's going to be error.2string so if there's a problem we're going to return it as such otherwise let's go ahead and start working with our database so we're going to say constant database and we're going to say await so we're going to wait for the client promise to resolve and then once it does we're going to get our database and we can get that from our environment variable so we're going to say process.env.mongodb database next up we're going to get that collection that we plan to use so we're going to say constant collection equals database.collection process.env.mongodb collection and we're going to save it now we're not actually doing anything yet we're just getting a handle to our database and our collection after establishing a connection to mongodb let's go ahead and export this particular handler function so we're going to say module dot exports equals handler now i'd like to say that i took credit for most of this code here but actually if you use the hello world example for netlify pretty much everything except for the contents of the handler method and the manga to be specific stuff was provided so for example it did provide a foundation to work with we just started it from scratch in this example all right so let's actually add some logic to our handler function so that way it actually does something that we can use inside of our web application so underneath the collection line let's go ahead and add the following it's going to say constant results equals await dot find we will not provide a find criteria in this example so what we're doing here is we are getting all of the documents that might exist in our collection so our movies collection now that particular sample data set does have quite a few movies so instead let's go ahead and limit the results so we're going to limit the results to 10 records and i'm going to say two array because we don't want to use cursors for this particular example now that we potentially have results we want to return those results to whatever's requesting them so we're going to say return and we're going to say status code 200 and we're going to say body and we're going to say json json.stringify and we're going to say results so what's happening is we're returning a 200 response which is a success and we are stringifying our json results that came back from this find operation and in theory we should have 10 records or less being returned and in our case because we are using a sample data set we are definitely going to have 10 records so let's go and save it now we're not going to test it yet we're actually going to create some basic html to consume data from this particular function so within your project go ahead and create a new file this is going to be at the root of your project not within the netlify directory i'm going to call it index.html now inside of the index.html file let's start adding some basic html boilerplate or foundation so i'm going to say doctype i'm going to give it the basic html tags and then i'm going to give it a script tag because that's where we plan to do a lot of our logic for actually interacting with the function itself alright so we have the foundation now let's go ahead and add some other basic html so that way when we test it if something fails for any reason we at least see something on the screen it'll help us when it comes to troubleshooting all right so we have a header let's go ahead and add a placeholder so the idea behind this example is we're getting a list of movies potentially 10 definitely 10 in this example let's go ahead and add them to a list on the page so the list will be empty by default we'll make a request to our function we'll get 10 records and we will render them on the screen to do that we will need a placeholder html dom element so let's say ul for unordered list let's give it an id so that way we have a proper placeholder i'm going to call it movies and we're going to close that tag the script is where we're going to do most of our action here so this is going to be an asynchronous event because we are communicating with a function and this function is communicating asynchronously with our database so let's go ahead and say async and there's other ways to do this as well this isn't the only way but this is the way that's going to work for this particular example at least the way that i want to do it and let's go ahead and say let results equals await and we're going to do a fetch so fetch is pretty common when it comes to browser-based javascript so we're going to say fetch and we're going to fetch based on the function directory now in our directory structure we do have netlify without a period but when it comes to actually using our function we do have to prefix it with a period so i'm going to say period netlify slash functions slash get underscore movies so that's where we'll be able to access our endpoint and that's essentially what it is we have a serverless function in netlify but we work with it as if we would work with a standard restful api endpoint what we're going to do next is we're going to process the response into proper json so we're going to say then and we're going to say response response.js so we're waiting for our results and when we have them let's go ahead and use them now and what we could do is we could do the try catch and we probably should so let's go ahead and do that so i'm going to say try we're going to catch the error because we are working with promises and the async and await so if we catch it we're just going to say console.error and we're going to say whatever the error was perfect so we have the results let's go ahead and continue let's go ahead and say results dot 4 each and we're going to look at each result individually so we're going to say result and this is where we add them to our unordered list so we're going to say constant list item and we're going to say document dot create element and we're going to say li for list item we're going to say list item dot inner text equals result dot title so this would be the movie title if you look at your movies collection and we're going to say document.getelement by id and we're going to reference our movies placeholder from line 8 so we're going to say movies and we're going to say append child and the child that we append is list item so essentially what's happening here once more is we're getting our results which is going to be 10 hopefully we're going to loop through each one of those results we're going to create a new list item we're going to set the title of that result to that particular list item and we're going to add it to our unordered list so let's go ahead and save it so at this point what we can do is we can say netlify dev so let's give it a try so we're going to say netlifydev what it did was it started a local development server and it opened up my web browser on localhost and it is showing us exactly what we had added to our html page so if i zoom in we have 10 different movie titles that we obtained through a netlify serverless function that communicated with mongodb we're not quite done yet though so in this example i'm using netlify dev which is a local development server which doesn't truly reflect what we're going to see within netlify for real for example we do have our environment variable file with env actually what we want to do is we want to add our environment variables to our netlify project so that way they can be consumed directly from netlify rather than our dot env file so let's go ahead and open up our command prompt for our project and we're going to add a few of our variables so what we need to do is we need to use our netlify cli to add our environment variable so i'm going to go into my emb file where i have my uri at the database and collection and i'm going to start creating netlify environment variables so i could say netlify i'm going to say env set i'm going to say mongodb uri and i'm going to add my mongodb uri string i'm going to do that for each one of my environment variables so for example i'm going to say netlify env set mongodb database and i'm going to say sample mflix and i'm going to look at my final environment variable and i'm going to say netlify env set and i'm going to say mongodb collection and i'm going to say movies now you don't have to use the cli for this you don't have to use the cli for a lot of things when it comes to netlify you could go directly into the netlify dashboard and do stuff manually but because we have the cli we're going to do it all from the cli to make our lives just a little bit easier so we do have our environment variables added and if we wanted to at this point we can deploy our website so what i'm going to do is i'm going to say netlify deploy i'm going to publish the current working directory it's going to go through the netlify build process and it's going to give me the website draft url when it comes to the actual build so let's go and see if we can access it so if you take note of the url this is our actual netlife project this is not being served from localhost but yet we still have access to the 10 movie records that we consumed from our netlify function which accesses mongodb so just to reiterate a few things when it comes to what we accomplished in this particular tutorial so we started from nothing we created a new netlify project all through the netlify cli once we had our project we established a connection to mongodb from a netlify function we did a few things that are function specific in the realm of actually making sure our connection exists prior to trying to use it inside of a function because once again when you're working with serverless functions you don't want to establish a connection every time within your handler function because then you'll end up with too many concurrent connections and you don't want to necessarily assume that your connection exists already because if that function goes down it may not exist so we just did a few different things to make sure that our connections existed but after we did that we had full control of accessing a back end without actually deploying our own say restful api graphql api et cetera this is all serverless it can scale in a serverless fashion so based on usage and it's one of the many cool things that you can do with mongodb and in this case netlify if you like this video please take a moment to hit that like button and then subscribe to the mongodb youtube channel have a great day everyone you

Channel: MongoDB

Views: 8,756

Keywords: mongodb data api, mongodb, mongodb atlas, nosql, nosql database, serverless, what is nosql, crud, database, databases, nosql tutorial for beginners, nosql tutorial, mongodb university, mdb, mongodb atlas database, how to use mongodb atlas, app development, mobile database, using mongodb, what is mongodb, serverless database, nosql databases, AWS, mysql

Id: T0QS64-laHE

Length: 21min 38sec (1298 seconds)

Published: Fri Jul 29 2022