Serverless Functions

hey what's up it's john from coding addict and welcome to serverless functions video in this video we'll cover what are serverless functions and why we'd want to use them in the first place essentially why we should care after that we'll set up two apis first one a basic api with local data and second one more complex api with nice graphical interface and error table as our data storage what's really special since we'll use serverless functions we'll be able to set up both apis without even a single line of server code and back-end hosting challenges also at the very end of the video i'll show you how to add serverless functions to your react app to give you a brief origin of this video if you watched my react tutorial and projects videos you know that i built some apis to practice data fetching in react since i was getting a lot of questions of how i was able to do it using serverless functions i decided to record a video where i explain everything in detail lastly before we continue let me just quickly mention that this video is part of my serverless functions course where we cover more interesting use cases and setups of serverless functions all right and welcome to nettlefi serverless functions course and i guess let's start by answering the most pressing questions first what is a serverless function and why should we care so here's the deal there are times when our app needs a dynamic feature and even after that 20th google search we come to realization that the only way to do that is by setting up our own server for example accepting stripe payment comes to mind and while i have nothing against node or express server building and hosting a server just for one feature has two major issues first it takes time and it can be frustrating especially the hosting part second it seems like an overkill to set up the whole server just to handle single task so that's where the serverless functions come into play you see with serverless functions we can set up our desired functionality with less lines of code than you would normally do it by setting up the server and still use our favorite programming language which of course in our case is javascript and without entering the wonderful world of backend and of course i'm not being sarcastic again i like working on a back end but there's times when you simply want to get the feature up and running instead of setting up the whole server now before we continue let me stress something despite what the name suggests serverless does not does not mean that there is no server it simply means that we as front-end developers are not responsible for maintaining it so in short serverless functions allow us to add dynamic features to our apps with little amount of code and without the hassle of setting up the server if you would like to see all the serverless function examples we're going to work on throughout the course feel free to visit the url serverless hyphen functions hyphen course dot nullified that app again the url is serverless hyphen functions hyphen course dot nullify dot app and once you get there as you can see it's somewhat self-explanatory these are all the examples we're going to cover during the course feel free to poke around and test them out and you can do that just by clicking on links so for example this is going to be the basic api where essentially we'll set up our local api this is going to be a hard-coded data then we also have one with air table we're also going to have example where we hide the api key so we'll build the weather app but the main goal of this example is not to show you how to build the weather app it is to show you how we can use serverless functions to hide our secret api keys and also we have for example newsletter and hopefully you get the gist now i'm not going to spend half an hour going over each and every example just keep in mind that as you're watching this in the future i might add some more examples but i would want to show you a very neat one the stripe payment so i'm going to navigate to the stripe payment and if you're not familiar with stripe payment the way we can accept the payment is not by directly communicating with stripe that is not allowed so essentially we would need to have a server that we would need to ping before we can submit the payment and the reason why we need to ping our own server is because server would need to communicate with stripe on a background and get the client secret and only then when we get back that client secret from our own server from our own backend only then we can submit the payment otherwise of course it would be highly insecure where somebody could come in on our front end and do some bad stuff now i'll open up the dev tools because i want to showcase what is happening so i'm going to go to the sources and i would want to show you the app.js so notice here in the app.js i have hard-coded this purchase so again normally this would be some kind of cart or a checkout page where essentially the user has put some stuff in the cart and now he or she wants to check out but again since our main goal is not the front end i just hard coded these purchases and in my array i have two items and i also have two values for total amount and shipping fee now this is a stripe key that we can show on a front end however notice how the moment page loads we actually communicate with our serverless function and we can clearly see that because the url is pointing to our own server and what we're doing we're passing this data to the serverless function and then the serverless function in the background communicates with stripe and we can also see that if we navigate to the network and i'm just going to go with xhr and fetch option and if i refresh we can see that we are making a fetch request to our serverless function so lan serverless function returns that client secret that we need in order to submit the payment and only then the user can of course submit the payment so now of course i'll enter those test values and some dummy values for the zip code and the date and now once we click pay this is where we communicate with stripe so again without setting the whole server we can set up this functionality with very little effort hopefully this gives you a very good idea of what the serverless functions can do and i'll see you in the course when it comes to serverless functions pretty much all of the major cloud providers offer some variation of them but of course format will differ from service to service for this course we will use company by the name of netflie so in order to host your functions basically deploy your project with functions on the web you'll need to sign up for a free netflix account if you don't have one already now before we continue let me be very very clear i'm not sponsored by netflix i have zero affiliation with nullify and at the end of the day i could care less which provider you end up using the reason why i picked notify is because they offer generous free tier and they make it very easy to get up and running with serverless functions even without an account you'll be able to test all the functionality locally and the main goal of the course is to show you the endless world of possibilities serverless functions offer not to boost a affiliation program and while we're on a topic of services during the course in order to test some features you will need to create few other free accounts as well for example air table for example stripe button down and mail gun similar to nettlefly all of them have generous free tier and the reason why i picked them is because of easy setup not a sponsorship or affiliate program keep in mind that it's impossible for me to show you how for example email subscription works without using any external service and if you are unhappy with my choice for the service that i picked there are plenty of alternatives you can choose from and even though format might differ the main setup will be extremely similar so if you don't have one already i would suggest navigating to nettlefy.com and create a free account if you poked around the examples you probably noticed that i used straight up html css and vanilla js for the front end and that was done on purpose you see when it comes to serverless functions essentially we have two parts we have the front end that communicates with them and then we have the serverless functions itself now when it comes to front end serverless functions are framework agnostic meaning you can use them with any framework you would like because at the end of the day all we're doing is sending requests to specific endpoints and after that doing something based on the response i could have went with react my framework of choice but the reason why i went bare bones html css and javascript is because i don't want to make it difficult for people who use different framework for example view the general setup is exactly the same for any framework you use just implementation of course will differ trust me if you can set up functionality with vanilla.js you can definitely do it with any framework with that being said the very end of the course we will build an example app with react and serverless functions just because i keep getting these questions how you do that and also because the react currently is the most popular front-end framework and also there are some gotchas that i would like to cover when it comes to react app serverless functions and deploying them on metalfi as far as course requirements go they're not that many my expectation is that you're familiar with common html tags simple css rules and some basic vanilla js functionality specifically http or ajax requests and as far as the dev environment setup in order to follow along with the course you will need a node installed in your machine because we'll use some npm packages so if you don't have it already please install node on your machine now since it's somewhat of a advanced course and it's very hard to troubleshoot your local environment i'm not going to cover node install essentially it's as straightforward as it gets just navigate to nodejs.org pick the operating system and then answer yes to all the questions if you hit some roadblocks please utilize your favorite search engine since like i already mentioned it's extremely hard for me to troubleshoot your local environment if you type node version in your terminal and you get a version number you are in good shape so navigate to nodejs.org pick the operating system which by the way they already suggest for you then pick the version you would like to install and then once you're done answering yes to all the questions you should be able to navigate to your terminal or command prompt if you're using windows and then you can just type no dash version and if you get the version number back you are in good shape and you can move on to the next video when it comes to my text editor i prefer using visual studio code but of course you can follow along with a course even if you use different text better as far as extensions and settings all default config options are just fine now if you are interested in my overall setup and extensions that i use just head on over to my github and look for the repo vs code setup all caps so let's imagine that you are interested in my text editor setup like i said just navigate to my account which is john smilga and then look for all caps vs dash code dash setup and in the readme you'll find all the extensions that i use and a short explanation of what the extension is doing and if you want to see my settings just navigate to settings json and here you'll be able to find my text error settings in order to follow along with the course you'll need a star project and you can get it by visiting johnsmilk.com again the url is johnsmilk.com and once you get to the site just scroll past the courses i mean if you want of course you can enroll in serverless functions course but what you're looking for are the projects and if it is not in latest projects just click on all the projects and then more specifically you can filter for serverless and then in the card you have three links you can visit the complete project you can take a look at the complete source code and what you're looking for are the starter files and then once you navigate to the repo again the repo name is serverless functions starter then you can just continue watching the videos beautiful and once we navigate to the repo we have a few options we can clone it we can fork it or we can simply download and i think in my case i'm gonna go for clone option so i'm gonna grab this url and i'm gonna navigate back to my desktop open up my terminal zoom in just so you can see that there's no cheating and i'm gonna go with cd desktop so now of course i'm navigating to desktop if only i could type though so desktop and then we're going to run git clone and then we pass in the url then i'm going to use my text editor and i'm just going to open up new window drag and drop the folder and before we do anything before we go over the setup which is something that i'm going to do in the next video i would want to do two things first i want to remove the remote url from the git so essentially i'm just going to remove the whole git folder so that way when you initialize a new git repo it's not going to be pointing to my repo because that is important and then the second thing will install all the dependencies and again i'll talk about the dependencies and the whole setup in next video but since it takes time we might as well do that right now so at the moment i opened up the integrated terminal in visual studio code and the command is control and tilde and by the way you can find it here as well so we need to go to view and then let me zoom in command you're looking for is this one where we open up the terminal like i said first i'll remove the git folder and then we'll create one from the scratch so in the mac the command is rm rf and then git and if you're using windows please google the alternative method for windows so now i remove the git repo and now of course i'll create a new one so we're going to go with git in it so that creates a new repository now i would want to install all the dependencies that i have in a package.json and the way we do that we run npm install that's all that's all we have to do we run that and then like i said in the next video i'll cover the general setup of the star project and before we enter the wonderful world of serverless functions let me just quickly cover what you are going to find in star project so we have one folder for the assets so these are the assets we're going to use throughout the project as you can see they're not that many of them there's few images as well as data js file and of course i'll talk about them when we actually use them then we have examples folder where we'll do half of our work so the other half is going to be in the serverless functions folder which we haven't created yet and i'm going to talk about the examples at the end of the video because i think it's just going to make a bit more sense then we have git ignore since we're using the source control since we're using git these are just files that are going to be ignored and of course the most important ones are the node modules and by the way if you want to see node modules just click refresh because of course we ran npm installs so we should have the node modules folder and also we have dot env where we're going to keep our secrets then we have global css so this is just a css file with my general styles as well as index html and you might be tempted to open this up straight up in a browser and technically you can do that since we do have the index html however there's one gotcha and let me show you the gotcha so for example i can navigate to the folder you can see that i have the index.html and i simply double click and technically yeah i can see that the app is working however it's not going to work when it comes to the server list functions why well because in order to run our servers functions the network serverless functions we need to run them on the server so we have two options either every time we're going to make some kind of update we need to push our project to production essentially we need to redeploy it to netflix which as you can guess is a bit annoying and the other setup is actually using a package the nettle file package the notify cli package that sets up that production environment on our local machine and that was one of the reasons why we have this package.json and if you're not familiar with package.json essentially it is a manifest file for our project and essentially this is a node app and the way it works we have in a package just on all the packages that we're going to be using now let me repeat what i said already before where our front end is going to be framework agnostic so our front end is still going to be vanilla html vanilla css and vanilla javascript however these are the packages that we're going to use on our back end essentially when we're setting up our serverless functions and let me also mention that if you're not familiar with node don't panic effectively there are only a few things you need to know package.json is a manifest file for the project so this is where we have our dependencies node modules is the folder where we keep all dependencies and the last thing is going to be the import and export syntax which i'm going to cover once we create our first function and again the whole point of the serverless functions is that you don't need to know those things about node you don't need to know how to set up the express server or something along those lines so if you're not familiar with node then don't stress about it there's not much you need to know and with that said in package.json in dev dependencies you'll find package by the name of metalfi cli and what this package allows us to do is to set up that netify production environment on our local machine because we installed that metal file cli and then we have access to the command of netlify dev the way i did it i set up a command by the name of netfly so you just need to run npm run nutify and that will spin up the nettlefi dev server so let's try to do that in a console i'll clear everything i'm just going to run npm run metalfi now before we continue let me just mention something where normally you would install this globally and the command of course for that one would be npm or i guess in a mac you would need to add sudo since you're installing globally and then the command would be sudo npm install hyphen g and then nozzle if i cli because of course that way you can use that package in all your projects and nullify cli does more than what we're going to do throughout the course for example you can even log into your account and do all kinds of cool stuff and that's why you would install this globally so you can use it in every project now the reason why i went the local route why i wasn't showing how to install globally because most of the time when i introduce some kind of global package to any of my courses there's always this one student who gets all kinds of bugs and then gets really frustrated so as a test run i decided to add this to the dependencies so essentially to avoid installing global package we'll see how it goes maybe it's going to fail miserably but hopefully it works better where this is just added to dependencies so then you install you don't need to install anything globally this is added right away to your dependencies and then of course you can right away use it now the reason why i'm telling you that because once in a while you might see me type this you might see me typing netlify nettlefy dev directly because of course i have installed this globally so maybe sometimes automatically i might type that now don't freak out again i'm not cheating essentially you can still run this npm around netfly and it will still work this is a command so of course you can change it if you don't like the name just remember to run npm run first and then whatever is the new command name if you changed it and once we run the npm run nutify we spin up the dev server and once we spin this up we should see a nice info that our server is running on http and then localhost 888. now let me mention something where yes in our case of course we're using just straight up index html and of course since the index.html is a root that's why we are right away directed to our homepage but if for example you have for your front end a react app or you have a gatsby app or swelt or whatever metal vice cli he is very smart where nettle5cli is gonna detect what front end are you using and it's gonna spin up that server as well now again this is a little bit outside of the scope on this course but i just want to let you know that you're not limited to running netlify cli only with just straight up vanilla html you of course can do that with your favorite framework as well and once you navigate here like i said will be served this homepage and what's really cool is the fact that now of course we can set up our functions because essentially we have this production environment on our local machine now one downside to this one and of course we'll cover that once we get to the functions is the fact that every time you create a new function so not when we modify some existing function but every time we create a new function we need to stop the server and we do that by ctrl c and then spin it up from the scratch so again we go with npm run and then netlify or if you have installed the package globally like i have you just run ntl dev which is just short for mentify you run this and one downside of that is that it opens up another new tab so that's a bit annoying where again every time we create a function and of course in our case there's going to be quite a few functions that we're going to create well then of course we need to set it up from the scratch and we'll have this new tab unfortunately that is the current setup hopefully by the time you're watching this it's not the case anymore but if it is i guess that would be one downside of this whole setup but apart from that it is really great because again we can have this production environment on our local machine so let me close this tab and notice here this is of course going to be my final project where i'm going to be showing you how the examples are going to look like and you know what while we're still at it let's go to index.html you'll see that there's not much to it pretty typical index.html file i'm just going to go with serverless functions and i'm just gonna say here start or you know what i'm just gonna delete the whole thing and i'm just gonna say starter here so that way when i look at the tabs i can see that this is a complete project and this is going to be my starter so we have this nav here where we can just navigate back to the homepage so as we're going to be navigating from example to example we can always go back home and that's it we just have a list and each list item just points to examples directory and in there we have folder for every example and in that folder since again we're just using straight up vanilla approach with index.html and css as well as app.js we are just pointing to the index.html in that folder so that's why when you navigate back to the homepage you can see that once you click here of course this is going to be our first example then you can go to the error table one of course we still have the loading because we haven't set up the functionality but hopefully you get the gist where every time we're gonna work on a project you'll simply navigate in your browser to that particular project and then in the visual studio code in your text editor of course we'll also navigate to that folder and set up the front end now i purposely added this star here as well and this is the folder that i used as a starter for all my examples and then of course i modified them as i set up the example so in the examples directory like i said you'll find all the examples we're going to work on and then what you're going to find in a folder all the folders are going to have this index.html which is just going to have some css so notice here how we're importing global css but there's also going to be a specific style css just for this project and the reason why i added that just in case you would ever want to check hey listen how he did this or that css you can find this styles css so there you'll find styles specifically to that project but if you want to see the global ones of course just navigate to the global css and you'll find the files again there's not much to it but if you ever want to see how i set up some kind of css you can definitely do it in a global or the particular one for the project and then i can tell you honestly that most of our work we're going to do here in the app.js since this is somewhat of a advanced course and i don't want to waste your time on setting up the html and css html and css is prepared now the only thing we will need to do on our front end is to work on the logic so this is where we'll communicate back and forth with our serverless functions and if at the moment this makes sense trust me by the time we're done with first example it's going to be clear how and why we're doing that and the last thing that i would want to mention all the front-end examples we can set up with built-in fetch api it's definitely doable now i went with script here and i'm importing here axios and if you're not familiar with axios it's just an awesome front-end library that we use to set up our request or http request now why i went with ax here is because in my opinion they have a bit cleaner api so it's a bit easier to use especially since our main focus is serverless functions so i wouldn't want to waste too much of your time by writing lines and lines of code with the fetch setup that's number one and also in my opinion their error handling is way better where we get a bit more clearer messages of what are the errors and that's going to be very important when we're setting up our serverless functions that's why in here in the index.html for every project you'll get the script where effectively i'm just getting the axios library and that's why in our app.js where we'll set up our logic we'll have access to the library that's why we'll be able to do it but again you can set up everything using fetch you don't have to use axios it's not like just because we're using serverless functions we need to use axios now you can definitely use fetch and by the way stripe example is going to be with fetch because that's what comes from stripe docs that's our general setup like i said we have index.html where we can navigate from one project to another project and now of course i think we're ready to build our first netlify serverless function all right all right i know that you're eager to start working on our servers functions so let's create our first one i'm gonna close all the tabs that i have currently open in my text editor and also in here i mean we can leave the url because we'll change it in a second anyway so i guess the tab can stay the way it is and we need to do two things first we would need to set up netlify tamil file where we tell netlify where the functions are located and then of course we need to create a functions folder with our first function so let's do first the tamil file so we need to navigate to the root and the place is very important so please do that in the root don't do it in examples or assets so i'm gonna zoom in just so you can see a bit better i'm gonna go with new file and then the name is netlify and then dot and tomofile so the code inside of this file is going to tell info to the null file so notify is going to know what to do with our functions and some extra custom setups that we're gonna add a bit later so that's number one and then number two we need to create that functions directory so again in the root we're gonna go with new folder and we're going to call this functions and then i'm going to zoom out actually and notice here how i'm toggling the sidebar and i do that with command of command b and i'm going to start in my netify tamil file and the syntax is following where we go with build and then we just say functions and then the location of our folder so i go here with functions is equal and then since my functions is located in a root we just go with dot forward slash functions and then we add the quotation mark so that's the syntax okay then once we're done with our netify tamil file now of course we need to go to the functions directory so again let me zoom in just so you can see and then we would want to create a new file now i'm a bit annoying where i like to have all my functions in order definitely you don't have to do that but in my case since i'll have multiple functions i like to do one and then hyphen and then the name now it is a bit harder later to access it of course it would be easier if would we just hello but in my case i'm sorry i'm just a bit annoying where i like to have my functions in order so when they're displayed they're going to be one hyphen hello and then second hyphen and then the name of the function you don't have to do that but in my case that is going to be my approach so we're going to go with one hyphen and then hello now the function name is really up to you just later when you try to access the function if you name this function differently please also use your own name don't complain if you cannot access your function using my name so we need to go with one hyphen hello js like so or however you would want to call your function just add the js extension and the way we're going to do that let me quickly type the most basic syntax let's get it up and running so we can see that our function works and then in the next video i'll cover every piece of syntax in great detail so we need to go here with exports which just signals that we're exporting and we're going to be exporting a function by the name of handler and this function needs to be async we have access to few parameters that netflix provides and you can call them shake and bake or taco or barrier or whatever but a common practice is calling them event and context and then there's optional callback one that i'm going to cover in next video and i'm going to set this up as a arrow function as you can see and then we always always want to return from this function as you can see we're returning a object but of course since this is a sync and by the way messed it up it should have been here async my bad and then as you can see we're returning object but we know that from a synchronous function of course we are returning a promise and again something that i'm going to talk about it in greater detail next video but as far as the logic inside of this object we go with status code and we're going to go here with 200 and then the body so essentially what data are we returning and i'm simply going to go with our first and let me just capitalize them just because i'm annoying and we'll say function example and that's it that's all we have to do now we should be able to access this function if we navigate to our domain which of course in our case is localhost 888 but then once we set this up in production it's going to be our actual domain and then we go with forward slash dot nutlify and then forward slash and then whatever is the name now you don't need to add js but in my case of course that is going to be one hyphen hello but notice how i said should because if you remember in the previous video i mentioned that every time we create a new function we need to stop the server first and then we need to run npm run and then of course the name was netify or if you have it globally then ntl dev so once we spin the sucker up now of course like i said it's going to be annoying where we're going to get a new tab and then in the url again let me zoom in just so you don't think that i'm making this up we need to go with forward slash then notify and as you can see i have a bunch of examples already and we need to go with metalfi functions and then the name and you know what i think i made a bug over there so we need to go with a netlify and then functions here my apologies should be forward slash functions forward slash and then the name of the function so we go here with functions and then the name of the function which of course in my case is hello so once we go here check it out we have our first netify function example which is extremely extremely cool now if you think that i'm overreacting just because i'm so happy to see one string displayed on the screen trust me when i say this if you have ever set up the express server that just serves this one simple string you know that you need to jump through way more hoops than one two three four five six lines of code that's it that's all we have to do in a matter of few minutes we have back end up and running that of course eventually will do way more than just serving up the e string but like i said if you have ever set up the express server you know that just the setup is way more lines of code and then when it comes to deployment it's even more hassle but with serverless functions that's all we have to do we need to tell netlify in a tamil file where the functions are located and the syntax is build and then functions is equal to the folder which in our case of course is the functions and then in the functions folder we need to create a function and we just do that by creating the js file with some kind of name which in my case is one hyphen hello then we have the syntax which i'm going to talk about in greater detail in the next video and then once we set up the function then of course we can access that function in the domain then dot netify functions and then the function name that's all that's all we have to do and that's where the real magic starts because we can do all kinds of functionality in this function and then return all kind of cool data even though at the moment you can just see our string of our first nullify function example and once we have our first function up and running now of course let's dissect the syntax and we're going to start with this export so what's up with this beast well we need to understand that we are in the node ecosystem and in node there is a different syntax for exporting and importing so if you're familiar with es6 modules you know that the import and export statements are following where we go with import and then the name and then from or if we're exporting we can go with export and then named export or we have export default and then whatever is the name so in node they use this common js syntax where essentially we go with exports and then there's also module.exports where essentially we export from this file that's it that's all we're doing and then of course after the dot we need to specifically say well what are we exporting and in our case as you can see we're exporting a function and the name here is important so network is looking for this function by the name of handler so don't call this shake and bake and as far as the function that we're exporting you're probably wondering hey what's up with this why there's a sink over here but essentially we're not using a weight well the reason for that because we need to return a promise and we know that every asynchronous function by default will return a promise and the third parameter that we can access is actually callback so if you don't like this approach then we can also set up the callback so how's that gonna look like well i'm gonna comment this out because of course we will go back to it because in my opinion the syntax is a bit cleaner but if you don't want to go the async route you can just remove the async and then call the callback function and then the first parameter is the error which of course in our case is null and then we do the same thing where basically we return a object over here or we pass in the object that would be probably a bit more correct and we go with status code and i'm going to go with 200 and then also i'll say body and let's just change it around and say hello world and exclamation point so once i save like i previously mentioned we don't have to restart the server now when we go in the browser and navigate to the network functions and then one hyphen hello we should see the hello world so this is another approach you can take but like i said in my opinion the async approach is a bit cleaner that's why throughout the course will stick with that one so let me delete the callback line and i'm going to go back to async function and of course this is what we're returning now what about the other two parameters that are supplied by an amplifier well the event is going to have a bunch of useful info about the incoming request and second don't worry we'll cancel log it so it's going to make a bit more sense and then the second thing is the context so this is going to explain the context where the function is running and we're not going to use this in this course but you can get for example a very useful info if you use the metal files authentication setup and the name for that setup is identity i believe and there for example you can get the info about the user that is accessing the function again we'll cancel log both of them but throughout the course we'll mainly use the event now keep in mind one thing though when we console log these parameters we'll be console logging them here on a server and in our case of course that server is going to be here in the terminal so there's two places we of course can cancel log also in the front end and then of course we'll check for the responses in the browser in this case when we're console logging we're not console logging in the browser will be console logging on a server so let me just go here with event first let's save and then of course now we need to navigate to our function one more time and that's when we will invoke the function and that's when we can see the info about the incoming request so for example this is going to tell us the path this is going to tell us the http method and don't worry i'm going to talk about the methods in later videos then we have for example query string parameters and all kinds of useful info and don't worry once we get to specific example of course if we'll use the event i'll talk about that specific property in great detail since i don't see the point of covering every single property that is on that event object and the second thing is going to be the context where we do the same thing we go with context i'll save it again we need to invoke the function so we navigate to the url and once we come back here like i said this is just going to have a bunch of useful info about the context that the function is running and then for example this is going to be that client context where you can get the info about the user if you're for example using netify identity but we're not going to have that example in the course so i'll leave the call back for now just for your info i will remove the console and now of course we arrive at the return so there's two things that we need to return we need to return a status code and i'll spend the next video talking about the status code so for now just remember that 200 is a success and then we need to have a body now we always always always always want to return a string that's a must so you cannot pass in the object now the difference is that if you have the object you can stringify it so let me showcase of course in our case we just have the string all together so we just pass it and we're good to go but imagine the scenario where you have const and i'm not going to be particularly original i'm just gonna say person and the name will be john if you try to pass this sucker into the body and you'll say body is equal to the person there's going to be a big fat error and there it is we have your function response must have a string body you give object blah blah blah blah blah and then in my console in the browser console i can see that hey listen there's an error we don't have any more the status code of 200 we have essentially 500 and if i go back to my terminal i can also see the error now in order to avoid that we simply go with json and then there's a method of stringify and we pass in our object so if you have any other data type apart from the string then of course you need to stringify it so i'm talking about arrays i'm talking about objects and all that so let me go back and now there it is so i'm kind of skipping ahead a little bit because this is our second example where we'll set up the api but you should see this value in the console and now let me see what is my zoom level yeah that should be 150 so and we are in good shape so those are the basics about the syntax of course this is the most basic example there's going to be more things that we're going to add to it but we have exports we just say that we're exporting this is a function by the name of handler i'm just setting this up as an arrow function we set this up as async because it returns a promise and that is very important and then we have event and context parameters that are being supplied by the nettle phi so there's nothing we need to do with that they're just being supplied we will have to dissect some values later on if we would ever want to access them and then in a function body we always always want to return an object with at least status code and then the body so notice what happens if we don't do anything for example i'm just gonna comment everything out again we have the error because lambda response was undefined check your function code as well so notify is like hey listen buddy i'm kind of hanging here what is happening why there's no return that's why we need to return we have status code that we're going to cover in greater detail next video and then the body that always always needs to be a string so for reference i'm just going to comment this out of course but we're going to go back to our previous example and i believe that was what our first notify function or something along those lines so let me go with body r first nutlify nutlify function example and i would also suggest going back to the string because we'll use that in our first example so just change it back to the string that should do it and i'll see you in the next video all right so we're clear about the syntax that we currently have in our first serverless function but what's up with this sucker the status code why do we need that and in order to explain it better i'm going to use my favorite friend by the name of google and essentially i would want you to google two things first of all let's go with http request and then the second is going to be the http status codes now for request i want you to go to the images and i'll explain why in a second and the second search is going to be http status codes and here most likely the first resource is going to be linked to mozilla website so that's of course where i would want you to navigate so big picture what's happening every time we open up our browser we are sending http messages http requests so imagine that this is going to be our computer and this is the server now i'm purposely going with google images i'm not creating my own because that way you can check which image actually makes the most sense for you in my case i think i'm gonna go with this one more essentially we have our laptop or our computer or whatever and we're sending a request to the server now in this cycle we are using those http status codes to tell to communicate between the client and the server hey the request was successful or there was some kind of error so we send in the request and then we're getting back the response now in our case we need to understand that yes of course the client is still going to be our browser or our users browser but then the request is going to be coming from our serverless function and please keep in mind that every browser by default is going to be performing a http get request now i'll talk about the methods a little bit later but just understand that not only we're going to be setting this up from our examples for example first one is going to be the hello world but also every time you visit a site using your browser essentially you are by default performing a http get request and that's why you're getting back the response so every time you open up the browser and you navigate somewhere you're getting the response from that server whether that is google whether that is facebook or whatever any site you visit and essentially why we have status codes well because we're communicating the browser is sending a request and then the server is responding and when it comes to status codes we're just communicating what's happening with the request and as you can see once we navigate to the mozilla website we can see that http response status codes indicate whether a specific http request has been successfully completed and there's a few brackets so we have the informational ones from 100 to 199 then successful ones redirects and of course you can read the rest now i would strongly discourage you from spending your weekend on memorizing those status codes for a few reasons one initially your applications won't use that many of them so you just need to remember a few of them and then the second one once you get to the point in your application where you actually want to have some kind of specific status code essentially you can just google them again in my opinion memorizing all of them is going to be a big waste of your time and like i said in the beginning we only need to know a few of them so 200 is going to be okay which just means that request has succeeded and that's going to be forget put post and trace another useful is 201 which just signals that the resource has been created and it's going to make more sense once we cover the post request because at the moment we'll just focus on get request which essentially just means that we got the resource that we requested from the server so those are two successful ones that are going to be very useful and when it comes to errors we have bad requests so that would be 400 that just means that there was something wrong with the way requested the resource for example there could be invalid syntax and then we have also 404 where we for example cannot find the resource and then also we have this 500 which is just a general server error so if you really don't know what to put you can just go with 500 and you can say hey listen there was some kind of error on a server now let me be very very very very clear where we are the kings of the castle here we are the ones who are setting up this response so technically nothing stops me from saying all right that's my function but the status code is not going to be 200 it's not going to be success i can say you know what it's going to be 404 and yet i'll still say uh the request quest was hopefully i'm spelling this correctly here is your data so save this and now of course once i invoke the function one more time i have this confusing information where the request was successful here's my data and yet in a browser i can see that it is 404 now just because you can do it doesn't mean you should because what you'll end up doing is just confusing whoever is using your api essentially using your serverless function because from one hand yeah we're getting the data but then from the other one we are getting the error response so just because you can't do it you shouldn't do it every time you're setting up those returns yes you should think about it hey is this an error so if it is an error then i should probably use one of the error codes now if it isn't a success then of course i should use one of the success codes again most likely you'll be sticking with 200 or 201 if you are creating a resource using a post request so that's the general info that's why when we're setting up our function we go with this property of course this is a netfly thing where you need to have this status code and then you just go with one of those codes and most likely it's going to be 200 which just means that it is a success and then we just type whatever we have in our response now if it is going to be an error if we're going to go with 404 then of course we'll just supply the message the error message that we'll consume later in the browser so i'll save it back to 200 our first little fire function example and then in the next video we'll consume it in our first example directory all right so we have our first function we understand the syntax we understand the status code now the next big question is what can we do with this i mean it is a function i mean it's nice to navigate to dot netify and dot functions and hello and see our awesome message but what can we practically do with this data well we could for example set up some kind of front end where once we navigate that page we fetch the data fetch our message and dynamically display it for the user and this is exactly what we're going to do so we're going to navigate to examples folder and then in the examples folder we're not looking for the starter again starter was just there for your info we're navigating to hello and then like i said we have three files we have index.html which is essentially going to be the page that is displayed once we navigate to that particular url and then in the index.html we have some global styles we have style css we have the nav that allows us to navigate back to the homepage where we have all our examples and then here we have heading one with the text the first example and then we have the setting to the class of result and then like i said we have two scripts one for axiorys and one for general abgs and then of course we have the style css which like i said it's not going to have much we just have the heading 1 styles and like i also previously mentioned all of our work we're going to do here in the app.js so here's what i would want to do i would want to select that heading 2 with the class of result and then once user navigates to the page i'll dynamically fetch my message from the body and of course display it inside of this heading tube again this is just going to be done using vanilla javascript you need to keep in mind that of course you can set up whatever frontend framework you would like and then do the same thing functionality won't change the implementation is of course going to be different because we are using the vanilla js so here what i would want is to select this result so let me just open this in the app.js and i'm going to say const result and we're looking for document and the way we selected is using the query selector and since the class is a result this is what i'm going to do i'm going to select my result and next i would want to fetch my data and you know what let me try to zoom in a bit in my visual studio code because that way i think you'll see it a bit cleaner and now i want to set up my function now right away set up async since this is gonna be a synchronous action and we're gonna go with const and i'll call this fetch data and like i said this is gonna be a synchronous function it's to be a arrow function and we'll right away go with fetch data i'll invoke it and for starters let's just go with console.log and we'll say fetch data called like so so let's save it now i'm going to navigate back to my browser and i'm going to be looking here and not for my functions example i think i'm going to open up a new tab i'm going to go with 888 and this is where i'll have all my examples now we navigate to hello world so that's the page we go with examples first hello and then index.html and then once we inspect we should see in the console fetch data call if that works then of course we can proceed and i would always suggest setting up these kind of guardrails so that way you don't spend half an hour looking for a bug that doesn't exist now since our request is going to be synchronous i would want to set up try and catch so remove this cancel log and we'll just say here try catch and in the try block we'll await four axios again like i previously mentioned we have access to the axios because i set up those script tags so we're going to go here with const data and that is equal to await so now we're waiting for that promise to resolve and with axiorys you can go with axios and then supply the url by default this is going to be get but since there's going to be few methods that we're going to use i'll be more explicit and i'm just going to say axios.get which just means that we're going to be performing a http get request so we're getting some resources from the server which in our case is our serverless function and it has very nice api where we just simply provide the url so what is our url well it is on the same server so we don't need to go with localhost 888 because of course eventually we'll deploy this but we do need to add a forward slash then netlify then functions and then whatever is the name of the function correct so i add here quotation marks then forward slash then nutlify pretty much i'm just copying whatever i have over here it's just the domain that i don't need to include then i go with functions functions and by the way in next video we'll take a look at how we can shorten this up there's going to be a sweet shortcut and then we're going to go with 1 and then hello so that's my function and also of course i would wanna cancel log the error if there is one or display it if essentially would wanna do that now for time being i'll just leave it blank and i'll go over what we're getting back once we fetch the data now one thing that i want is to cancel log this data and also cancel log the error now what's really cool about the axios when it comes to error we need to go with error and then response and this is the case where it's much more useful info than the typical fetch api which of course is built in the browser now one thing that you might get these weird syntax for the axiorys so simply just remove it if that is the case if you get it so now let me navigate back to my first example i'll invoke it and now check it out this is the data that we're getting back so that's the data that i'm console logging this is that big thing that comes back with axios so here we can see the headers we can see the request you can see the status we have the status text and all kinds of useful info now what we're really interested is this data so in this data we're going to have the body that we're sending back whether that is simple string whether that is going to be an array once we set up the api and along those lines so that's what we are looking for so in here what i could do is right away this structure the data because the property name as you can see is data so what you'll see in a future examples i'll simply right away the structure the data because that's what essentially we're looking for and now of course once i cancel log i should only see that message and there it is our first nutlify function example and if of course the request is successful what i would want to do well i'm going to go with my result which i selected with my query selector then we're going to go with text content and we'll simply set it equal to my data again this is just vanilla javascript property that allows us to set the text content of the node equal to something which of course in our cache is the data so once i navigate back to the browser i refresh i have our first notify function example beautiful and if i go back to my hello and if i'll simply say hello world what do you think i'm gonna have there i should have hello world right so there is now of course i have the hello world and hopefully this emphasizes how powerful the serverless functions are when essentially now i can right away connect them to my front end and do all kinds of cool things and now let's also test it out the error and in this case i'm going to go with 404 so that's going to be the error code and i'll say resource not found so resource not not found here let's do that one let's save it and once i refresh i shouldn't have nothing here why well because i have try catch block and my.js so i'm looking for the data but if there is an error then of course at the moment i'm just concentrating error dot response and this is going to be the same thing where we get back this nice giant object but most likely what we're going to be looking for is this data over here so as you can see the status is 404 the status text by default is going to be right away not found that's why i said that even though we are in charge of our own serverless function and we can definitely do whatever we would want as you can see for example the library sees 404 and right away attaches the status text of not phone so yes you are king of the castle you can do whatever you want but it's just going to be very confusing to people or even probably to yourself when you're consuming the data that you're getting back from your own server and of course when i say server i mean the serverless function and most likely what we're going to be looking for is again this data so again that's something that you're going to see throughout the course where i'll simply go with error dot response and then dot data just understand that i'm right away looking for the property because that's the value that i would want to see and there it is now once i refresh i see resource not bound now if you want of course you can do the same thing you can go with result then text content and set it equal to the data and now once i refresh and of course it says data is not defined because yeah i have in tri-clutch as data and here i just have error response and then data my apologies and let's refresh one more time now we have resource not found again if we change the status code but leave the same message of course it's not going to change what we're displaying we're still sending this data back in the body but what we should see is different response here notice now it is a bad request and again if we go back to app.js and if i'll comes a log response you're going to see the different status text correct because the library is reading the status code of 400 and right away attaching this status request hopefully it is clear now let me go back to the one hello and of course we're going to go back to the 200 let me just do it with command z i think it's going to be faster instead of dealing with deletions and rewriting everything so let me save it and we should see first example and our first netify function example text displayed and before we start working on our next example i want to make our lives a bit easier and i would want to set up redirect as well as a remove with the vs code setting for auto suggestion and we're going to start with redirect you see at the moment life is beautiful in the app.js we fetch the data from dot netify forward slash functions forward slash one hello and of course then we can display it on the screen but wouldn't be nicer if the path would be shorter for example we could set up forward slash api forward slash one hello and that's exactly what we can do with a redirect in netflie so now i'm going to open up this sidebar and we need to navigate to nutify tamil file and please please please please do not touch the functions code leave that one alone but below it we need to set up this interesting syntax where we go with two square brackets then we type redirect and then we have three values now for time being we'll just add two and then i'll show you why we would want to do the third one as well and here we need to provide from and there's going to be some kind of url in here and two and again there's going to be some kind of url and essentially you can already guess that since we're dealing with redirect now i need to supply what i'm going to be redirected from and we're going to be redirecting user to and this is where we need to get creative and we need to come up with a name for the resource and my case i'm just going to go with api so essentially on my server all the functions i'm going to be setting up in the resource by the name of api so if you want to navigate to the functions then the user has to go to forward slash api and then forward slash function name now of course when i say user of course we'll be setting up a lot of the front end so i'm just talking about if you directly navigate from the browser so we go here with forward slash api forward slash and then whatever is going to be the function name and since of course there's going to be many functions we're just going to go with star that means whatever comes after the forward slash and where are we going to be redirecting to well we already have the path right we already have that notify not functions and then again we just need to come up with some kind of wildcard so we just need to supply it in our two value so i'm going to navigate back to notify tom we go with forward slash matlify metal five forward slash functions and then if i want to match the star i just need to go with forward slash colon and splat so now i'll match whatever function name comes after api and i'll redirect to that nullify functions and splat and eventually we'll set up the status let me just show you why i would want to do that in the first place before we go to the browser let me just emphasize something where this path will always work just because we have redirect from the api doesn't mean that now this url is invalid now the dot number five forward slash functions and then whatever function name will always work but we're just making it easier for us and then for the user as well where we'll be able to access all our functions with forward slash api forward slash and then function name so let's test it out i'm gonna open up a new tab i'm going to go with localhost and then 888 of course and then let's try it out i'm going to go with forward slash api and then i'm looking for my first function so i'm just going to say 1 hello and as you can see we have our first middle five function example so i'll quickly navigate back and remove the example just so you don't think that i'm cheating and there it is now of course we have our first netflix function and just to showcase that everything still works i'll also navigate back to the starter and remember our first example notice now of course we don't have that example as the last word we just have our first modify function and again this is just to showcase that this path that we have that nullify function still works so all of that is still correct but there's one tiny gacha notice how in the url i type that nullify functions or i'm sorry i typed forward slash api and then function name however now check out the new value in the url and the value essentially is that nullify for slash functions and then the function name so what's happening here well we could use another awesome tool and that is browser network tab just to see what is happening you should select all and we should type one more time in the url bar so let me remove and i'm going to say api and then one hello and then notice how we have two requests so we have the first one for the api and hello and the status is moved permanently so status is 301 and then we have another one to that nullify functions and then hello and that is happening because by default when we set up the redirect in netlify they'll set up the status of 301 and as a result the url is also going to change when we navigate to that resource and we can clearly see that over here and as a side note browser network tab is an awesome resource for you to find out more about the requests and responses for example i can click on the first one and i'll make this one bigger right now and as you can see we can see the url we can see the method again by default this is going to be get and then we have 301 which just says moved permanently and again this is going to come in handy later once our requests get a bit more complicated so now what i would want is to navigate back to netflix tamu and like i said provide the last the third value here where i'm going to say status is equal to 200 all right so in this case we're not going to have this 301 we're going to have 200 and because of that the url won't change as well so let me just showcase that one where i'm gonna i think i'm gonna close those headers here and again back in url bar for the last time hopefully in this video i'm going to type api one hello and then notice how only we have one request and that was in 200 and also the value in the address bar didn't change as well that should do it as far as the redirect now of course we can go back to app.js i'll keep it for your reference the dot metal file functions and all that and we're just gonna copy and paste and we'll change this around to api and then hello and also in the hello.js let's add that example just so we can see that everything still works we're in our first example once i refresh notice i get this example which just means that both paths at the moment work because we have properly set up the redirect and the last thing that i want to do in this video i would want to fix that annoying auto import first of all let me show you why is that happening in the first place and i'm going to comment both of my axios at the moment but i'm going to write axios and you'll notice that we are right away importing from the node modules and the reason why is that happening is because later we will use axios package in our serverless functions when we communicate to some third party apis now technically you can install a different package maybe node fetch but i wanted to stick with axios and we just simply need to remove the suggest from the visual studio code again visual studio code is just trying to help us but in this case it's not necessary because we already have the script for the axios in our front end so in order to fix it we're going to go to the settings and i believe the setting name was javascript suggests so we're going to go with javascript and then suggest and the property you're looking for is javascript suggest an auto import please make sure that you uncheck the proper one otherwise it's going to be hard to follow along with a course so go with javascript suggest and then auto import and let me just double check so in the app.js if i type axiorys notice now i'm not getting that import from the node modules which is awesome so now of course i'll remove axiorys just keep in mind that you still have access to axiorys library you're just not getting that auto import from the node modules so let me remove this sucker and uncomment the last one the api hello because i'll leave this one for your reference awesome and now we're ready to move on to our next example and last thing that i would like to mention in this video is the fact that when you go online and look for serverless functions example in a lot of cases you'll find the syntax where there are tabs when we're setting up new lines like so and also for the values please what i've seen in most cases they use this double quotation mark now i have to be honest i haven't run into any issues without the tabs and just with a single quotation mark but just to stay consistent this is what i'm going to do i'm just going to set everything up as double quotation mark again that is up to you i haven't run into any issues with the previous syntax but just stay consistent i'm just going to refactor it a bit beautiful and now let's take a look what is going to be our second example and in our second example i would want to build a basic api so in here notice once we navigate to examples and then second basic api index.html we're going to get some product with images with price as well as the name and if you want to see what is happening on the back end then in the complete project instead of navigating to the examples using the link you can simply go to forward slash api and then i believe the function name was second basic api so let's try it i'm going to go with api 2 and then basic api and there it is now of course this is what is served from the function and that's why on the front end we are able to fetch it and then just iterate over our list and then display it on a screen now since the word api is probably the most overused word in the community let me just emphasize something in our case when we talk about api we're talking about creating a http interface for interacting with our data essentially some data but of course in our case that is very specific we're talking about the product data now if you're in general interested what is an api or if you just need to brush up i found this awesome article from freecodecamp so just go to the google and you can simply type what is api and then here keep on scrolling keep on scrolling again we're looking for free code camp article for some reason cannot find it it was on the first it was what is api oh there it is yeah sorry scrolled past it and this is an awesome article that pretty much covers everything in basic terms so it's very easy to understand so if you're kind of iffy what is an api because again this is probably the most overused in a community because these days everything is api then just please navigate to the article and i think this is going to give you a very very good idea what the api is and essentially what is the purpose so again in our case it's going to be the http interface for interacting with our data so we're going to have the front end that fetches the product and our goal is to set up the serverless function that serves those products now this is going to be the basic api so this is going to be using local data so there's just going to be some array that we'll just dump in our servers function but in the next example we'll make it more interesting where essentially we will get the data from one of the headless cmss and in our case we're going to use the airtable again that is the next project for this project all we have to know that we'll create an api where on the front end we're able to fetch it and display nicely on the screen all right so let's get cracking and what i'm going to do first is just close all the tabs so my setup is cleaner and then of course i would want to navigate to the functions and we'll create that function and again in my case i'm going to go with second and then basic api just because i'm annoying that way and then right away let's restart the server so that way we don't have to do that later so in the functions new file and i'm going to zoom in just so you can see better and we're going gonna go with two and then basic api dot js and what i'm gonna do just so i can see that everything works i'm just gonna grab from the first example copy and paste and i'm just going to say our basic api example so that way when we navigate to the url i know that if i can see the message of course everything works and then like i said every time we create a new function yes we'll have to run npm run and then notify so now let me navigate to the browser i think i'll close some of the tabs now there it is this is my new tab i don't think i need this one either and this is going to be the complete one which for the time being is going to stay the way it is but in starter i'm going to navigate back home we're going to go to basic api at the moment there's nothing there what we're really interested is on a local host we want to go to forward slash api forward slash basic api and if you can see our basic api example we are in good shape now let me reiterate something where when we send back the data in the body it always always needs to be a string that's how the communication between the server and the browser takes place now of course in our case when we are sending back array we would need to do something with it right otherwise well that is an array and we're not going to be able to do that and i already kind of showed you the example what happens if we have an array but just to reiterate let's do it one more time where i'm going to go with items it's going to be an array and in this case it's just going to be an array of two objects and we're going to go here with a name susan susan and then the second thing is going to be the name of anna so again another object and the name will be n and if i try to dump it here of course i'm going to have a big fat error and we kind of already covered that before where it says your function response must have a string body so technically the only thing i would need to do is just run json and then the method name we're looking for is stringify and now we just need to pass in our items array and once we do that we should be in good shape so as you can see if i would want to create a api where essentially i'm sending this array with my product data the only thing i would need to do is in the basic api create an array then add all the properties with the values and then pass it through the json stringify and technically we can definitely do that here in the basic api but wouldn't you agree that it would be nicer if we could keep our data separate so that way if there's more functionality this file doesn't just get massive wouldn't you agree that that would be nicer where essentially i could just keep my product in a separate place and that's exactly the approach that i took that's why if you take a look at the assets you'll find this data js and again we are in nodeland that's why over here we have the array yes every product is an object and then for every object i have the id i have the name image and all that but then at the bottom i have module dot exports and i'm just exporting the items array if you're familiar with es6 this should ring a bell because of course the functionality is exactly the same we are exporting the items just the syntax is a little bit different because node uses common js so now of course in the basic api instead of creating items from the scratch what we can simply do is go with items and we can require it from our assets and in the require we need to go with the path and then check it out so we have our basic api sitting in the functions now the data is in the assets folder so we need to go one level up then look for the assets and then we're looking for data so let's go one level up we're going to go to assets and then we simply want to go with data so now of course we import the items and now you'll see that instead of displaying just name suse and name mana we're going to have all our product and essentially this is all we have to do in our services function just grab the data run through json stringify and now you're able to access it in your project and then build your front end with that data awesome and once our local api matches to what we have in complete one now let's quickly build the front end and again i'm going to navigate to complete project in fact i'll set them side by side so maybe the first one or the second one is going to be where i'll showcase the responses from the functions and then i guess in the first step i'm just going to show you what is going to be the end result so here we have the basic api and then we simply want to grab data iterate over and just display something on the screen again please don't worry we're not going to spend too much time on that because this is a separate issue if you're using a different front end of course the setup is going to be different for you i just want to showcase how that would work so you don't say hey you showed me the function but you didn't show me how to consume it and i know i said this before but the reason why we're using the vanilla approach basically where i use the vanilla.js and then html and css because that way i can showcase that functionality will work with any framework so i'm going to navigate back to our project i think i'll close everything that i have currently open and we're going for examples we're going for basic api again let me zoom in if you cannot see it and then as far as the index html and as a side note there's global css here logo and style css and i purposely added these things here because there is a gotcha and i'll cover that a little bit later so please don't worry i'll talk about why we have these extra files and what is happening for now just understand that that is not a glitch it is purposely here and in the index.html and i think this is going to be the case where i'll have to zoom out i have of course the title i have global styles i have style css all that is good of course i have the logo i also have here a comments and this is designed for people who don't want to type the response that we're going to be typing and again you'll see why we have that in a second and then of course we have basic api and for time being we just have the loading so if i navigate in localhost to examples and then to basic index.html of course this is what i should see and we already know that we can access the array of course so now in the app js what i would want is to grab that array and then just iterate over and then for every item i want to return the product all right so let's go to app.js i already selected the result like i said i'm going to be adding some code just so we don't have to retype the same boilerplate code every time we set up the example and then once i have access to the result to my node then i would want to come up with a function and the function name will be fetch data so we're going to go here with const fetch fetch and data that's going to be my function again it's going to be async since we're going to be waiting for the asynchronous response and then we'll right away invoke it as well so we're going to go with fetch data and then let's just start with simple console log second example so let's console log that one and if you can see the second example in the console by the way this one probably i can make it smaller should be in good shape and there it is now i have the second example so now of course we're looking for the data that is coming back from our serverless function correct and since i'll set up the white i'll right away add the try and catch block and like i said i'll write away the structure the date out because essentially that's what we're looking for and then again we go with await then we're going with axiorys and by the way shouldn't be a dot there axios again get request and then what is the url forward slash api unless you have a different name of course and then two and then basic and of course api and for time being i'll simply go with result result and then inner html and i'll set up the heading 2 here where i'm going to say the request was successful or success something along those lines something really nice and simple and neat so let's go here with heading two and let's just type success since there's gonna be a different return in a second anyway so we're gonna go with heading two and then if there is an error i'll simply say there was an error on error please try again later please try again later now if i didn't cover that at the moment we're gonna have the loading because that is in the result but then once we're done fetching data either we're gonna have the product which of course we haven't set up yet or we're gonna have that error so let's save this one and then once we refresh of course we have the success because everything went well but if we just test it out and if we go back to our functions and then basic api and if i'll change this one to 404 what do you think i'm going to have on the screen of course there was an error please try again later and i think i'm not going to go with heading 4 or 2. in fact i'm going to go with heading 4 because i think it's going to be a bit smaller so let's try one more time and there it is there was an error please try again later so that is happening if we have the error and yes there's going to be an error in a specific situation that we haven't covered yet and we'll do that in later videos don't worry so we're going to go with basic api i'll set it back to 200 because of course now i want to deal if the response was successful and for time being let's just look at the data and of course we already know that we should have the array correct so we have array of four items and in the html with vanilla.js essentially what i would want is to iterate over my array and then wrap each product in some kind of html and just supply that dynamic data and of course i can do it directly here i can go with the result in our html that is definitely an option but i'll add this extra step because in my opinion it's just a bit explicit what we're doing so we're going to go with const products and that is going to be equal to data and now i'm mapping over my array and then of course i can access every item here in the parameter and i'm just going to call this product and for time being if you want to console log the product you can definitely do so so we can go with product and then you'll see that again each product is that object and then in the object i have these properties so what i would want to do is access each and every property and then wrap that property in the html so for example for the image i would want to place this url in the source of the image stack hopefully that makes sense and what i would want to do first is the structure those properties out of this product so i'll set this equal to my product to my parameter and as far as the structuring we are going to say image and now image is an object i purposely set that up because this is something that we're going to get when we're working with airtable which is going to be our next example just to make it interesting so we're going to go here with url then we're looking for the price and the name so these are the three things that we're looking for and as far as the return well this is where i would want to return that html right now i would want to dynamically add these properties though because we need to understand that for every product of course these values are unique but my html structure of course is going to be exactly the same for all of them so we go here with return and if you don't want to type you simply go back to the index.html and this is why i added these comments so what you can simply do is copy and then in the app.js in the template string and copy and paste now maybe wait a minute so let's see we have the comment here you know what you need to uncomment first my apologies so uncomment this first then copy and then in the app.js and sorry for the detour copy and paste so now you're returning this article and now of course since we have this in a template string i can access these values now i'll retype it from the scratch just so i can go over what we're doing but again if you're just lazy on typing or if you maybe get some kind of error you can always reference this one so let me just comment this one out in my case but in your case if you want to speed this along then of course you can copy and paste so for every item i would want to return a article so that's going to be my tag then class and we'll pass in the product so that's going to be my main return and inside of this article we'll set up a few more html tags we'll start with our image so in here we go with image and again since we're using the template literal i can simply access those values the ones that i destructured from my product so here i can say yeah for the image i would want to grab the url and also for the alternative i'm just going to grab my name so we're going to go here and we're going to access the name now close the image then i would want to set up a div with the info so div with the class of info and the reason why we're adding those classes object is of course in the css in the local css you'll find the styling for these items so let's close the div as well and then inside of this div we're just gonna go with a heading five heading five and here of course i'm looking for the name so let me close my tag first and then dynamically we'll access our name property and then you can probably already guess that we since we have the price there's also going to be a price so i'll copy and paste this heading 5 and we'll add a class of price just for styling purposes and let's add here a dollar sign and then instead of accessing the name we're going to go with price now this is going to still return a array but in order to showcase it we need to turn it into the string so what we could do is just chain join method and since i wouldn't want the commas in between the items i'm just going to say join them with an empty space let's save this and here i can probably make it one line less and now instead of the success what we had previously simply type products and then once we navigate to our front end we should have the product and that's it within a matter of minutes we have ourselves a working api where we have some kind of data we dump it in service function and then we pass it through the json stringify of course and then we can connect it to our front end iterate over our data and we have ourselves a beautiful application awesome beautiful we're done with our first two examples and normally we would deploy this project only at the very end at least that's what i normally do in rest of my courses however in this case we'll make an exception and here's why essentially there's three reasons first i believe that one of the biggest reasons why you took this course is because you wanted to set up the api that you can consume in your own project second we still have a course bug that we will tackle along the way and three we'll take a look at how nice is continuous deployment with netify now in order to follow along you will need two things you'll definitely need a nettlefly account if you haven't created one and you'll also need a github account so if you don't have these accounts please set them up i'm not going to show you how because this is somewhat of a advanced course so i believe that you already have both of these things but if you don't please set up these accounts and then follow along with the rest of the videos all right and i'm going to start by creating a new github repo of course name is up to you but since i'm going to be deleting this repo my convention is to call this temporary and that way if i later find this repo then i know that i can just delete it so i'm going to go temporary and then server less func so that's going to stand the name for my repo and essentially we're looking for these three commands because if you remember the very beginning of the course we did set up already a new repo we ran git init so let me just copy these commands and while we're still on a topic you know what i'll also change the name here i'll say serverless functions and i'll just remove that starter so now let's navigate back to our project we want to open up of course the terminal and i would want to stop the server here so we already have initialized the git repo of course that is already out of the way now what i would want is to run git add so now i'll add this one to the staging area and then we'll say git commit and as far as the message i'm gonna say testing deploy as always these messages are up to you and then we just want to copy and paste and if everything is correct and as i said we're copying pasting those three commands that we copied from the github and if everything is correct we should see our project awesome and next we would want to navigate to netlify we go to our dashboard of course and essentially there's few ways how we can get the project up and running there is drag and drop option however i want to show you right away the continuous deployment because in my opinion it's just going to make more sense in the long run anyway so we need to go here with new site from git and then of course we're choosing the get a provider and then if that's the first time they'll probably ask you to authorize and then again in my case i'm looking for temporary you need to look for your name and then once we get the repo i'm gonna go with temporary serverless functions now later we'll take a look at how to work with env variables and just as a side note we don't have the variables yet but for example for your own projects if you want to add them right away you just need to click on these advanced settings and this is where you add the variables now don't worry just because we're adding them later we're not going to do that right now and in fact we'll use the dashboard to add them so don't stress about it i'm just showing you that as a side note and we'll just keep all of these the way they are we need to change anything and we just go with deploy now as far as the interface i would probably want to change the name so i'm going to go to site settings and we need to click on change site name and of course if the name is already taken and you won't be able to do that but in my case i'm going to go with temp server serverless and then funk which of course stands for functions we save it it's awesome the name is not taken it looks like everything went correct now if there are some issues you can always check in your deploys like so so for example notice this was our deploy and then i can check if everything went correct if not then of course there's going to be a error message and i can nicely see that i have two functions i have the hello and i have the basic api now let me navigate back to my project the temp server list functions and i'll show you that later anyway but just as a side note if you want to add environment variables which we're going to use later you go to domain settings and you look for build and deploy and keep on scrolling and notice here we have environment variables just like we had in the advanced settings so those are the two places where you would add those variables either when you deploy the project or later if you forgot or if you added some extra ones then of course you can just go here to build and deploy and then look for environment variables and again i know i'm skipping a little bit ahead but this is just a side note in case you ever wonder how to add those environment variables and now of course we can check our functions under the functions tab as well notice i have two functions here awesome now what i really would want is probably to take a look at the usage so let's see here functions level and then notice how at the moment my requests are 0 out of 125 000. so like i said they give you a pretty generous there but then once we talk about the error table i'm gonna kind of give you an idea of why you should be always careful of how you're setting up the api now the last thing that i would want to showcase is that even though our project works nicely and by the way in order to navigate there we just click on the site overview or the link that they previously provided and that's it we just navigate here notice this is a live site and then of course we can take a look at one of the projects we have built already i think in my case i'm going to go with basic api and there it is we have our api up and running and also let's test out the first one and in here i should have the text so let me inspect and in the console i can see that app.js is having some kind of issues so let me go back to my project and let me check my first function so i have hello here now this sends 200 and everything should be working fine but in the examples there's some kind of issue so let me go back to app.js as you can see i have both of them commented out that's number one and that's why if i'm trying to access this data of course it is not going to work so as a side note i'm also going to cancel log the error response and this is the cool thing about the continuous deployment that we just set up with netlify and github so the way it works if you want to change something you just change it locally and here i can clearly see that there has been some changes so now of course what i would want is push this back up to the github and in this case i'm going to use the visual studio code gui for that now definitely of course you can set it up using the integrated terminal again you would run git add git commit and then you would push it but i find this much easier where essentially i just need to type the message and i'm going to say fixed first function or example i guess and then i'll say yep i'm going to agree always and then we'll just push it up and say push and now of course we're pushing this up to the github now let me zoom out and we should see that there has been some changes fixed first example and also if we take a look at the netlify now check it out we have another deploy already scheduled so we're building our new project so every time we'll be pushing this up to the github network is smart enough it has hooks where it's getting notified that hey listen there has been some changes to the repo so please rebuild the site so now of course what i could do is go back to my project and just double check now of course i have tons of tabs open here so let's see we're waiting waiting waiting waiting waiting everything should work well hopefully it does at least so i don't have to go back and fix the errors we have the star of course and for some reason i don't know it takes ages and then if i check out the hello world now i should see our first netfly function example so that's the basic setup for the nettlefi and github where we can set up continuous deployment so that way if there's ever some changes to your project you just add them locally then push it up to the github and then notify is smart enough to rebuild your project next video we'll talk about the course errors that we still get from our serverless functions awesome we deployed our project everything works smoothly but there's one tiny issue yes we can access our serverless functions nicely from our application and we can clearly see that once i fixed my bugs everything works we're getting the data and we're in good shape but you probably would want to set up your project where you could fetch that data from different applications so basically from the applications that are not in your server and at the moment we won't be able to do that now in order to showcase that first of all i would want to navigate to my second function so i'm going to go with api and then remember the name was 2 hyphen and i believe it was basic api basic api and i can see that when i'm using the browser i'm able to access the product but the problem is if i have the application that i would want to access those resources and that's why i want you to go back to your project and then in the examples look for the second one for the basic one and i would want you to copy the whole folder again technically if you don't want to do that you don't have to you can just sit back relax and watch but if you want to test it out yourself then just grab this folder now i wouldn't suggest drag and dropping because again you'll mess up the whole structure but just copy the folder and make sure that you copy outside of the server so i'm going to do it on my desktop so there's my basic api now what i would want is to open up a new window in my text editor then drag and drop and i would simply want to change the path so at the moment we're using this forward slash api to basic and of course everything works because previously our project was on the same server however it's not going to be the case anymore so now of course i want to go back and i would want to get this url so i'll copy and paste and technically nothing should change correct why well because it's the same resource we just saw that we still serving the same product well okay let's save it and now i'll just open this up using the browser so go to index.html and as a side note that's why i add these global css is and logos and everything so project can work on its own so it doesn't have to be in the examples folder or in the starter so let me spin this up index.html and there it is i right away have this there was an error please try again later and if we inspect we should see the course error where essentially we are getting a message that we cannot access this resource if the project or application or whatever is not on same server and the reason why is that happening well because remember we are of course in charge right so let me minimize this and since we are in charge we didn't specifically say that hey listen it's okay for different applications to access this resource that's why if you deploy the project and if you're expecting this to be accessible on different apps that maybe are deployed also on netfly or whatever you won't be able to do that now it's an easy fix where we need to go back to basic api that's our function and we just need to add headers so again when we're communicating there's multiple things there's status codes there's http methods and there's also headers that we're sending so in here we need to go with headers that's the property name and then inside of the object we need to set up the property and we go with access and again make sure that you use the same syntax otherwise it's not gonna work so control allow allow and then we go origin and we need to set this equal to the star so we go here with a star so again we made some changes to the project so since we're using this continuous deployment the only thing we need to do is just set up the message and i'll say course error fixed and we'll send this up to the get up so say push and we're going to be in good shape now one thing that i would like to mention that of course if you want your resources to be accessible from different apps you need to set it up for every function where you'd want that so in my case i'm just showing you with an example for the second function but keep in mind that it's not going to automatically work on the first one so again if you want that for the function make sure that you add the headers and you set up the property with access control allow origin and then equal to star now i'm just going to set it up for the second one as an example how it works for a remainder i'm going to skip that part but if you want you need to add that for all the functions where you would want that data to be accessible outside of our current setup and now i think i talked long enough where we should have another deploy so let me refresh again in here nothing is going to change of course we were still able to access the data but now if i go back to my basic api we should be in good shape where now notice i can access these products because now of course i set it up where you can access from the different app even that app is not on your server hopefully it's clear and once we have deployed the project once we have fixed our course error now of course we can work on our next example where we'll introduce a nice graphical interface to set up our data before we continue let me just reiterate my own experience with free requests one more time you see 125 000 is really generous and it's definitely going to cover most of our use cases but when it comes to api it's a bit tricky and the story goes something like this when i was building my react course i set up my own api just so students can practice data fetching in react and of course that way i don't need to worry about some api adding some changes and making that part of the course out of date now everything was awesome until i released the course and discovered that to my surprise i was getting around 300 000 requests a day well of course you can upgrade and get more requests just remember that every upgrade will cost you more of your hard earned money and when it comes to apis what if you end up getting one million requests a day so instead i opted into setting up an express server on digitalocean since the fixed cost seemed a bit more reasonable so yes serverless functions on netfly are awesome the free tier is extremely generous and it is going to cover most of your use cases but when it comes to api or some other specific setup just be mindful where you might need to go the other route where effectively you do set up your own server and that way you can manage the cost better and once we're done setting up our basic api now let's take a look at the better approach you see wouldn't be nicer if instead of hard coding this data locally in our project we would have a graphical interface and then every time we add changes in the graphical interface our data will be automatically updated in the project so i'll be able to show you of course for you you'll have to set up the air table which we're going to cover in next videos but i'll be able to showcase since i already have the account connected to this project so i'm going gonna navigate to the air table and then notice how we have three products over here but what i could do is go to my table and don't worry of course we'll set up all of this in the upcoming videos but i would just want to add that extra product so i'm going to say t-shirt i'm going to copy and paste the info i already downloaded the photo so i just need to grab it from the desktop t-shirt over here and then i just need to come up with the price which in my case is going to be 300 i think that is going to make the most sense once i navigate back to my project and i refresh essentially i invoke the serverless function one more time now of course i have my product and i can navigate to the single page and in order to store our data and access it and modify it and all that good stuff using graphical interface i'm going to use service called airtable again there's not particularly anything special about this service you can definitely use other platforms and setups as well the reason why i picked airtable because it does have generous free tier and what i also like is the fact that if you do go the payment route then the payments are not enormous for example for freelancer i believe at the time of the recording the account was for ten dollars a month and as i know this is something annoys me a little bit about the headless investors where they go from zero which is the free tier right away to the forty dollars what i really like about air table is the fact that they have this simple setup where yes you have generous free tier but if you do decide to get more options then the pricing is not ridiculous essentially ten dollars a month for a good setup now that's not the reason why i picked the air table of course again they have the free tier and of course we'll use it the reason why i picked air table because it is very easy to get up and running with airtable we are literally talking about the rows and columns i mean what can be easier than that and also even though most of the things i like about airtable there's actually one downside and the downside is the fact that in airtable in order to access data in any way you would need to send your request with your api key now the problem with that is that the moment somebody gets a hold of your api key he or she can wipe out your whole data so the problem is that there is no public api it's not like i can just set up data and say hey listen this is what i would want to share with the rest of the world and this is for example only for me so i would only want to delete edit or whatever no that's not how it works with airtable however with serverless functions we can use it to our advantage because normally i definitely wouldn't suggest using airtable directly on your front end because keep in mind even though you set this up as environment variable for example in react app it's still accessible people can still see that if they go through your source code so we'll use that to our advantage which is technically a downside for the air table because you cannot stick the request directly in your front end but what we could do is set up a service function that fetches the data from their table and then we hide those environment keys and of course as we're working through the examples it's going to make way more sense if you're iffy about something at the moment again if you don't like the air table you can just take a look at the examples and use your own backend whatever you're using whether that's contentful whether that is strappy or whatever so in the next video of course we'll sign up for a free airtable account and once we're done discussing why i picked airtable in order to store our data now let's sign up for free together and i'm just going to use one of my dummy accounts and i believe the email was learn code tutorial at gmail.com so i'm going to go as peter smith now the email is going to be learn code tutorial gmail.com and then let's create an extremely extremely hard password to crack so let's go here that is going to be my password and i'm just going to go with sign up for free once we sign up i'm not going to save this password uh we are given an option to free trial of airtable pro it's not what i want and then it says well tell us about about yourself well we want to do i guess build and launch the product whatever something like that and then notice we need to confirm the account do you plan to move data no i don't continue and then i'll skip this part we don't need collaborators but probably it would be better if we would confirm the email so let's navigate here we should confirm the email and then we're getting this workspace we're getting my first workspace and then in the workspace we have bases which serve as tables and like i already previously mentioned if you have ever done any work with excel or even just with tables you should be in good shape or even if you haven't done work trust me it's very easy to get started and we have workspaces and we have the basis now at the time of this recording the difference why you would want to have the workspace is because if you have multiple bases if you have multiple databases and you have the collaborator so there's multiple people that are working if that person has access to the database if you give the person access or permission to the database you automatically give the person access to rest of the basis on the workspace so for example i'm just going to rename it i'm going to say server less and then imagine that if i create multiple databases and i give access to the person to one of them then of course he or she automatically has access to all of them so that's why you need to be careful if you know that there's going to be collaborator if you know that you'll be giving some external permissions to access it it's a better idea to set up a new workspace and in that way you can control who can access the database and in order to set up the database we simply go with add a base like so and we can go with start with template we can import data or we can simply go with start from scratch so in my case of course i'm gonna go with start from scratch then we need to come up with a name i think i'm going to go with tutorial like so we can pick the colors we can pick the icons whatever you would want and should be in good shape once we log in we're going to have this example and you know what i'm gonna stick with views so i'm gonna remove this one and that way i have a little bit more room and then i also am a bit annoying with these names i don't like to have them as a capitalized ones so instead what i'm going to do is i'm going to say that the first table name will be products and i always like to use the lowercase again don't ask me why that is just my preference and the same goes with a column name so notice here of course we have the columns and then here we have the rows now one interesting thing that i must warn you about the error table is the fact that even though you have these rows as empty when you're fetching data they actually come back as a actual data if that makes any sense so for example if you have 15 items and then you have three of them empty you would think that they're not being sent but in fact they are so that's why you need to be careful where every time you add something to the air table make sure that there's no empty rows because as you can imagine there's some kind of functionality that we're doing on our back end when we're fetching from the air table correct if for example i'm iterating over data and if i'm trying to access some properties and they don't exist well your app might break that's one of those hard bugs to catch because essentially it's just a innocent empty line that should do it for the general setup and next video we'll start setting up the columns and adding the values as well awesome once we have the airtable account once we create a new base and we set up a new table by the name of product then of course i would want to add the data and let's see what we would want so i'm going to navigate back to complete project i'm looking for the age table and essentially it's going to be the same thing where we have some kind of image we have of course the name as well as the price and also since we'll make this project a bit interesting we'll also add the description now please keep in mind one thing where i purposely kept this info as little as possible because i just don't want to spend too much time on data entry now what i would like you to show you is the fact that of course you can go as complicated as you would want so for example if you have enrolled in my react course you know that we have the e-commerce store and for the e-commerce store i did set up the data in the air table and you can notice that you can set it up as complicated as you would want again the reason why we're not going to do that in this project because it's just going to take too much time and i think it's somewhat unnecessary but just don't think that you can add only simple data you can make it as complicated as you would want so let me close this one and i'll keep another one for reference so this is the one that i was setting up for this tutorial so i want to have a name i would want to have description column image column as well as the price column and as you can see i like to keep all my names lowercase because that just avoids some unnecessary bugs again this gives me that grid view which i don't want and i want to rename this one i'm going to go with name now this is going to be a simple text so when you click on the column you can set it up the data type essentially and here you can have single text long text and of course you can see the other options so in this case we're going to go with single text now i believe the next one is description that i have so let me have it as description i'll keep that one as a long text because here we'll just grab some value for description and i always like to go with not lorem ipsum hipster ipsum and the website is ipsum so i'll say beer me and i'll grab this value whatever you would want doesn't really matter just add some kind of text and now i'm going to navigate back to the air table and we'll just copy and paste so for all of them it's going to be exactly the same now for the attachments i'll rename this one and you know what by the way let me show you how you would delete the column as well so right click it delete the column and i'll delete both of them and then if you want to create a new one of course press on a plus and then the name i went with was image and then like i said you have multiple data types and the one that we're looking for should be i believe attachment yeah that's the one so we create that and asked me to import data no i don't want to do that and then the last one will be the price let's see here i named this price and then for the data type normally you would probably go with number and i'll talk about it when we work with stripe but in here i just went with currency and i went to a dollar and the precision yeah i'll just leave it the way it is so we create the field that is all good as far as the name again sorry but i'm going to be going back to see what i have so blue and then sneakers sneakers as far as the image this is where you would want to go to the assets that we have in a starter so click on select files now there's multiple options you can get it online and all that but what you're looking for is the desktop server list functions and then in the assets you have four to three products product one product two and product number three we open this up we upload of course the product and then we just need to come up with a price which in my case is going to be 39.99 something like that and once we're done we just need to add the other two as well so here this is nike shoes and pink shoes so i'm gonna go with nike shoes and pink shoes description is gonna be for all of them exactly the same like so and then for images we're gonna go with product number two upload yep and and we're gonna do the same thing for product number three again keep in mind that this will throw an error since we have the fourth one empty so that's why i'll go with right click and we'll just delete the record so again we'll add one more image we're gonna go here with product number three okay awesome good we are in awesome shape and let's just come up with some dummy values so again since these are nike shoes i think i'm going to go with 299 and then for the pink ones we'll go crazy and i'll say that it's going to be thousand dollars once we're done with that now of course we need to take a look how we can consume the data coming from the air table nice we have our products in place and now of course we would want to know how we can consume the data from the api from the error table api and in order to understand that we need to go to api documentation so we just click on this question mark and then we're looking for api documentation now their docs are really really good they honestly explain everything in detail but i have a big issue with their sdk so first i'll show you how their sdk would work and then i'll show you why we would want to use the airtable node package that effectively is built on top of it and the way it works like i already previously mentioned with air table api we need to have the base id and we'll also need to have the authentication and this is where we want to provide our own api key all right now why is that very very important well it is important because you don't want to stick this code in your front and as a side note you know what i think i didn't sign up for the key my apologies let's just quickly go back to the air table and i think we need to go to account actually what i would want is generate api key so i'm going to go here and now we're generating the key and this is very very important because we'll have to use that api key when we're setting up the consumption when we're setting up the fetch and that's why you don't want to just directly go to your front end for example here and just add that data because then anyone who knows how to go to devtools can have access to the key and then you can literally do anything you would want with that key for example you can just remove your whole data and now of course there is now we have this show api key again this is dummy account i have no problem showing that key because by the time you're watching this it's going to be deleted anyway just keep in mind that when you work with your own airtable data be very very careful of how you're sharing this key because literally the moment anyone has access to the key they can wipe out your whole data like i said they have really really nice docs will have to have access to the id of the base this is going to be very important and we'll also need to have access to the api key and then when it comes to their docs they explain two options we can use for example just a regular fetch request again that's something that we would do for example from the front end but again i wouldn't suggest doing that and also they have this javascript sdk and overall the javascript sdk that they provide is pretty decent now the problem is for example if you want to list the records right so you would need to require it yeah that's easy and once we require airtable then we need to set up a new instance and we need to provide these two values we need to provide the api key and we need to provide the base id now like i previously mentioned the base id is right over here and we can also see the api key now they're good enough that they provide in documentation so for example if i'm looking at list records option notice how they right away supply these values of course we'll have to set up the environment variables because you don't want to share them in your source code and then we need to set up the base where we provide a product now all of this is nice but then we need to start dealing with each page and then fetching the next page that's why we'll use another package that is built on top of it again yes you can definitely use their sdk but i think it's just going to be faster if we go with this package and the name of the package is airtable and no then let's just type npm and then we're not looking for the air table npm we're looking for airtable hyphen node npm that's the one that we would want now it's not the most popular package in the world but it gets the job done where in this case we require our table node we still need to supply the same values this would be the api key and we have the base and then we have the table so again in our case what is the structure well let me go back here we have the api key which we just created then we have the base id which we can find of course in our docs right and then as far as the table well it is product so make sure that you have all these values and then the api is just easier for this package where essentially instead of setting up this next page and then fetch your next record or whatever i simply can go with airtable list and then i can just wait since this returns a promise and i can just get all my records and you'll see how much easier it is to work with this package and that was the whole point why we're going to use this package instead of their official sdk so for example if i want to update again i just create a new instance and i get the id and then i can just use the update method that's all that's all we have to do and knowing this of course we can navigate back to our project since i already installed the package and we can start setting up our serverless function that fetches the records from the airtable api at this point we should have the data in our table we should be at least a little bit familiar with their api where we need to have the base id we need to have the api key as well as the name of the table and also we at least understand the basics of why i would want to use the airtable node the package that is built on airtable because it has a easier api and since i don't want 10 000 tabs open i'll close the hipster ipsum and eventually i'll also close the api docs for the airtable because we literally just need the id of the base as well as the api key because rest of the functionality is going to come from air table node now i'll repeat probably this 20 times during this video but do not push the project up to the github before we set up the environment variables which we're going to do in the next video just don't do it again otherwise you're just sharing with the rest of the world your api keys and then whoever gets a hold of them can just wipe out your data so we'll start simple we'll set up our serverless function without the environment variables and then later we will add them and we're going to start by going to the functions we'll create a new one and in this case i'll call this one air table our table js and we'll do the same thing like we previously did with basic api where i'm just going to grab the hello one and i want to see whether i'm getting some kind of response so 200 and i'll call this air table example so air table example remember we needed to restart the server so we're going to go with npm run metalfi here and then once we spin everything up we should have a new tab again we don't care about the new tab we just want to go back to our starter i'm going to refresh it and i'm not going to be looking for the second function because now i would want to get the third one so let's go with api three and then the function name was airtable at the moment i'm getting the fact that i cannot access it that's interesting why is that happening well that is because i have localhost 3000 for some reason my apologies i'm going to go back to 888 and if you see the airtable example then we're in good shape and of course we can continue and now we want to go back to docks of the air table node we would need to install the package which is already installed then we require it and then we set up a new instance and then we provide these three values api key base and table name so let me just grab these first three lines of code copy and paste and this is the first time where i'm reminding you please do not push this up to the github in next video set up environment variables and we have our table node awesome then i would want to navigate back to the airtable docs and i'm looking for the base id so pass it here and i'm looking for my api key so i'll keep on scrolling keep on scrolling and then there it is so that is my api key of course you can also access it in the place where we created and now pass in the api key okay awesome and then as far as the table what we're looking for is the product i believe right so that was the name table name we're gonna go with product and then inside of this handler i would just want to see what i'm getting back so i should have access to this table to the products and once we have access to the products table then in order to access the values again let's just go back to the airtable node documentation we can simply see that we need airtable so that's going to be our instance our product table instance and then if i want to get the records i just go with list and then in order to get the actual records we go by the structuring the records so since we'll be using again async await i'll right away set up try catch now for time being i'll just leave this return here the way it is eventually we'll move it and we'll set up one for error and one for success but not for now we're going to go with cons and for time being i'll just call this data and then again we run await and then our instance our air table and then the method name was list and i just want to cancel log data and now keep in mind though now this data will be in a terminal not in the browser but we do need to invoke it so that's why we'll navigate to our serverless function we'll invoke it we'll perform a get request there it is and now as you can see in the console we get back our records again i know i said this before but you can use the airtable sdk it's just going to be a bit more painful in my opinion because you have to jump through some hoops where airtable node just gives you a nice api you want to get the records just run list and you are in good shape so here like i said we have the object the property name is records and then here i have my array so in order to get my array i'll simply say that i would wanna the structure the records and then i'm gonna iterate over them and since the fields is an object itself and this is where i have my values so notice here i have the id i have the fields property and the fields is an object now that object represents all my values it has name description image and price and the way we can see that is by removing this data and we're going to say cons product is equal to records and i'm just going to map over it because what i would want is to return a different structure so i'm going to call this product so now i'm iterating over this object and i'm just going to destructure a few things from this object and first i want to grab the id now the id of course is sitting in the product it is sitting in the object that's why i'll say id is equal to the product now rest of the properties are going to be sitting in this fields object if you want you can cancel log it but in my case i already know that they're going to be there so i'm going to go with name image and price again why do i know that the names are like that well because i named them name description image and price and we're purposely not looking for description because if you take a look at our project you can see that we're not going to be displaying the description first we only want to access that value once we open up the individual page for a product and don't worry we're going to get there together so that's why we're not the structuring description and we'll set it equal to product and then fields of course and once we're done with that i also would want to get the url and in order to get the actual url we would need to grab the first item in the image array and then grab the url property again i'm not going to cut to log it just to speed it up but trust me it's there so we're going to go with url and that is equal to image and then it is an array and then we're looking for the first item that's why we go with image zero and then more specifically we're looking for the url and then from my map method i would want to return id i would want to return name and then url and price so that's going to be my new object that i'm returning and i'm just using the es6 feature where if the names match then i can just skip setting the property equal to the value so that should be in my product so now of course i can cut this sucker out and then place in my try block then this is going to be 200 of course then we go with json string of i and we pass in the product like so and then as far as the error yep there's going to be a return and we're just going to go with 500 and we'll just say general server error so server and we're going to call this error so once we navigate back to our browser we fetch and there it is now of course we have the product and cool thing of course right now is the fact that we are getting these products from the r table so now of course nothing stops me from going back to the air table and adding an extra product so i'm gonna go with extra product then we'll right away copy and paste everything i'll use the same image just to speed it up so i'm going to go with image number one i'm going to upload and then we're looking for some kind of price now i don't want to add that extra one so make sure that we delete that one if by mistake you also add that one and i'm going to set up the price to be 9.99 and once you have the message that the data has been saved you can go back to our serverless function invoke it one more time remember that every time we invoke it then of course we still communicate with airtable and this is our new data where we have that extra product and now of course we just need to go to our front end and build a nice user interface using our data before we set up our front end though let me repeat we would always want to hide these values we would always want to keep them as secret and that's why again we wouldn't set up the whole functionality on our front end because it would be very easy for somebody to get that data and even though right now this code is on our server so technically no one would be able to go there and look at the code the problem is that of course we'll be pushing this up to the github and once we do again we're exposing that there so how we can set this up as some kind of secret variables well in node we have something called env variables and the way we set them up again in the root that is extremely important we go with new file and then we go with dot and then envy so now of course we're setting up the file for our environment variables and then we just set up the key value pairs we go with whatever is the name and then whatever is the value so base id and of course the table name i think that can be exposed it doesn't really matter but what i would want to hide of course is the api key so here i'm going to come up with a name so i'm going to say airtable table underscore api key and a convention is using the uppercase but again you can do whatever you'd want and then as far as the colors if you notice that the color for the key is different than the color for the value it's because i'm using this package and package name was dot env so that's the one that makes it happen and as far as the value well i simply would want to probably close my sidebar and then i'm going to go to airtable.js and i'm just going to grab my api key so i'll cut it out copy and paste and now what i would want is of course to save the file now keep in mind one thing where in the git ignored i purposely add right away dot env because if you'll not add this to the getting or again everything that we're doing is somewhat useless since everyone will be able to see the env file anyway now in the airtable.js in our serverless function now of course i would want to access that variable however it's not as simple it's not as just going and saying what is the variable name that's why we need to use another package that i have installed and the package name is dot env and the syntax is following where we could technically assign it to some kind of variable but we don't have to we simply go with require so we require the package name and then the package name is dot envy like i said and then we run config method and if we have eme file in the root then we don't need to even provide any kind of parameters to the config we just run the config and now of course where we have the api key instead of providing the key and then pushing this up to the github so everybody can see i'm going to go with process dot env so now i'm accessing those environment variables and then whatever is the name of the key so in my case it is airtable api key we go back we copy and paste and of course we'll have access to it here now every time you work with env variables it is safer if you just restart otherwise you will have some weird bug so i'll stop the server i'll run npm run and then nutlify and by the way i didn't save the file so maybe i'm going to have the error cell stop and restart one more time so npm run matlify so we spin this up and if i go to the forward slash api and then two or no sorry three airtable i should have access to my data so if you still see the data you are in good shape that means that everything works and then once we're done with the project i'll show you how we would need to set up those variables on netfly because now we need to understand that the moment we'll push this up to the github of course nettlefly will redeploy our site but there's going to be an issue because netflie will complain hey i don't know what is the value here so that's why i just wait till we build out the front end and then once we're done with that then we'll push this up to the github and then i'll show you how to set up the env variables on metal files so that way of course your project will have no bugs or issues and once we have added our env variables now we're in good shape and of course now we can continue working on our front end now since i have bunch of tabs open i'll just start closing them i'll still leave the er table because later we'll add a table with more data so that one will stay however the api documentation i don't need anymore since we'll use this one instead so keep this one open and then this is going to be our complete project again what we're trying to achieve is the same thing like in the previous project where we just iterate over data and then display the products on a screen now this project is going to be a bit more complex where it will set up a separate page for more info so notice once i click on a product i open up a new page so that one will be product html and i provide the id and then once i navigate to that page then we refetch the data and more specifically we get this description that's why purposely we didn't pass it when we were setting up the initial function and later i'll show you how to combine everything in one function again i'm skipping a little bit ahead just to give you a general idea of what we're going to be working on so now let's navigate back to our starter we want to go to the air table and as you can see this is going to be our third example i'll close everything that i currently have open because we're pretty much done in our serverless function so let me close everything and of course i would also want to close all my files and i'm looking for airtable one and i'm looking for app js so that's where we'll set up all our functionality now if you're interested what is in the index.html again the same thing we have of course the airtable that's going to be our title we have the css we have the nav we have the heading one and time we have this loading in the result and of course the actual so now in the app.js i'm just selecting the result and we'll start by fetching the data of course so i'll close the sidebar here i'll zoom in we'll see how that works maybe i'll have to zoom out again so we'll go with const and then fetch product is equal to async again it's going to be a synchronous function because we'll use a weight and i'll right away get the data so we're going to go with const and then data and where we're fetching this from of course that is from our serverless function correct so we're going to go with axios.get and then api three and i believe the name was airtable let me just double check so there are no dumb bugs yep the name was airtable fetching that and i would want to right away stick it in the try and catch because maybe there is going to be a error and if there is an error i'm just going to go with result that's the node that i have selected and we're just going to go with inner html let's set up a heading 4 and let's just say there was an error like show i'll close my heading 4 and then fourth time being let's just cancel log the data just so we can see that everything works now in this case i did not set up the console log my apologies i mean the initial one hopefully everything works though so we're gonna go with fetch products and we should see the data so i navigate to my airtable one to my starter i refresh i still have the loading because if there's no error of course this is not going to change and in the console we should have this array so of course we have array of four items and now we just need to repeat the same steps that we did in a previous example the difference of course that we're going to be returning different html but the idea is exactly the same again we iterate over and then for every item we have a html and that's why i'll speed this up i'm going to go with const products again we'll call this data we're mapping over each and every item is an object i'll reference it as a product we'll destructure it id url name price all of that is coming from my product and as far as the return we'll go with the return i'll set up template strings and this is going to be the difference where i would want to return a link because again in a complete project you can see that once you click on the item you navigate to that individual page and if you take a look at the project you can see that in the air table we also have this product html so this is where we'll do a little bit more work where once you click on a product we will navigate to this product html and we'll have to fetch the info about that specific product so that's why it's going to be a link to a product html page but we'll have to supply the unique id of the product and of course that way we'll be able to make another fetch request from the product page hopefully that makes sense so we're going to go with href and here like i said we go with product html so that is the page in my example and then i would want to supply the url parameter or they're also called query string parameters and the way we set up we go with question mark and then again we use key value pairs and you can supply as many parameters as you would want but in our case we just want to set up the id so generally we work something like this where we go with question mark and then after the question mark the syntax is following where we go with key value pair so in our case we're going to go with id and then of course eventually this value will be dynamic but just to showcase how that would work i would go with id and then for example one then if i would want to add more query string parameters then of course i'm going to go with add so we're going to go with this ampersand and then again the name i don't know that could be a name itself and then whatever value so in this case it's going to be john and if you have been searching the web you know that these can get quite long and this is a very very useful info that we can use on the front end as well as on the back end first we'll use this on the front end where notice how we're navigating to the page but now i would want dynamically pass in that unique id of the product and since i'm using template string i simply need to pass in the id and in a second you'll see how all of them are dynamic because of course the id is unique and then still within a link i'm going to go with class because we would want to add a little bit of styling and i'll name this product and i would want to close my link tag of course like so and then inside of this link let's just go with image so img then we'll have a source and this is where i'll pass in that url of course the one that we're getting from our serverless function then we'll pass in the alternative and again we'll pass in dynamic value we'll say name over here and let's close the image and right below it again the same deal we're going to go div class and pass in the info and inside of this div we're going to say that there's going to be a name as well as the price so let's just do it here let's say heading five and we'll close the heading five and dynamically insert the name of the product as well as the price now for the price again we have the same spiel where we would want to have a class so that's why i'll copy and paste and i'll just add class and we'll call this price and here as far as the value let's add a dollar sign and then let's just say price remember we would want to turn this into a string so that's why we run join and we're going to join it with empty space that's why we'll provide that empty quotation mark and then when it comes to result we're just going to go with result in our html and then we go with products of course if you're for example using react then you'd set up your component you would probably set up use effect and then of course you would fetch the data and then stick it as your variable or something like that meaning state variable and once we're done with the setup now let's just go to our front end so this is going to be my starter let me refresh and i should have my products and there it is now of course i have them and i can nicely display them now again the key here is that they are links so once we click on them notice the browser url now we navigate to the same example example number three now the page is different of course right so now we have product html and here we provide this unique id so we have query string parameter where we have question mark and then in this case the value is the id and at this point we just see the single product there's nothing specific about it why well because in the product html this is what i have i have the single product and we'll use this structure to insert the dynamic data basically i didn't want to build the whole structure together with you i already set up the structure where i have the single product i have the article i have the image and all that we just need to supply that dynamic data so when we navigate to that page with our info complete then of course i'll be fetching the info about that specific product hopefully it is clear where we set up the air table we fetch using the air table node because it has a simpler api and this is where we can set up all our products and now we just need to worry about how we can fetch that extra info which in our case is just going to be a description about the product in a single page using the query string parameters beautiful we have the basics in place so now let's worry about the function that would provide info about specific product now first we'll set up separate function for that and then later i'll show you how we can combine it in one function where basically if we just want to get data about all the products we still provide that but then if we add the query string parameter then of course we're fetching data about that one specific product so i'm going to navigate back to my project i will leave the product html open i think i can close the app.js for time being and i don't think we need the index.html as well hopefully it is clear that in the products html we display or i'm sorry in the index.html at the moment we display the product products are linked and then once we click on a product we navigate to the product html page and we pass in the id and of course later on the front end will do something with an id because we'll have to provide it to the function that we're about to create so back to the functions we create a new file i'll say three and we'll call this product js and then like i already previously mentioned later i'll show you how we can combine both of them in one function because it also is a possibility i first would want to start with my hello code copy and paste and of course i didn't copy that so copy and paste and i'll say single product here single product let's restart the sucker so stop npm run metal phi i believe that was the command then i'll close it i don't need the new tab open and in here instead of air table we already know that that functionality works let's just go with product product and of course i can see that i have a single product and eventually the way it's gonna work is something like this where i have my products okay awesome and then once i click on a product remember i navigate to product html and then i use my query string parameter now i'll use the front-end javascript so the javascript code we're about to write in the product js on our front end in the example i'll grab this one and i'll make a fetch request to my serverless function and essentially i'll pass this value to my serverless function so now the question is well how we can check for those values well if we go back to our url and in this case i'll zoom in we can do the same thing we can just go with question mark and then of course i'll just keep the name the way it is but remember sky is the limit you can call this bugs bunny and for time being i'll just pass in one so we pass this in we still have the girth request and all that but notice something interesting right now where once we go back remember the event right so event and that was useful info about the request and now i'll open up the terminal of course i cannot see anything right now but if i'll go back and refresh i should see the object and what's really interesting is that i have this query string parameters object now it's always going to be an object even if nothing is provided but what's really cool i have this key and of course it has the value of one so now of course what i could do is just destructure that id out of the query string parameters and i can check if the value is provided if there is an id then i can try to get the data about that product using the airtable node if not then i'll just send back hey listen you did not provide the id and for this serverless function i need to have the id in order to retrieve the data about the product all right so how we can do that well i could set up a const id and i'll right away the structure and this is coming from event and query query string parameters parameters like so because i can see that they're over here so we go with event query string parameters make sure that you either copy or write exactly how the property name is otherwise it's not going to work and here i'm checking for the id and i'll right away set up the if statement where if the id is not provided then i'll right away send back the 400 where i'll say please provide product id and the way it's going to look like we're going to go with if id is there awesome we'll do some kind of functionality so for time being we'll just say single product so we'll keep it the way it is however if it's not then we're just going to go with 400 and we'll say there was an error or you're not let's just say please provide product id and keep in mind one thing where we need to have these returns of course because we know that in javascript if we hit this if if we don't have the return we'll always end up reading the rest of the code which in our case of course is going to be the error so now if we go back i should see the single product if the id is there but if the id is not there so if i just remove it not ours we have please provide product id keep in mind i still can provide my key value pairs over here i can provide the name i can provide i don't know whatever i want here remember sky's the limit we can add as many as we would want in our case we are just looking for the id the object will always be there but i'm checking for the property if the property is provided awesome we'll do something if not then of course we're just sending back 400 that well we're looking for the id so now of course i would want to use that data that id and fetch info about the product so i'll use again airtable node that's why i'll just copy these lines of code there's really no need to retype it from the scratch so let's copy from the error table js navigate back to the product js copy and paste again we have dot env because i want to access the variable the error table api key then i have still the same base and i have the product and now in the if block if i have the id well now i would want to communicate with the air table and see whether i'm getting back the id so the way it's going to look like first i'm going to remove this return for time being i'll close my sidebar and we'll just take a look at the try and catch so go here with try catch and we'll wait for the air table for instance and the method name in the airtable node is retrieve so we pass in the id so i'm going to say const product is equal to a weight and then error table and then also retrieve like i said that was the method name and then we pass in the id now the problem here is that the servers function is going to be kind of hanging because id will be there but there's no response so in this case let's just go back to the same one and i'm sorry i said to remove it let's just go with status code status code i believe right so status is code of 200 and as far as the body i'll say single product single single product my bad sorry i said to delete but actually we'll keep it and now what i would want is just take a look at the product because i would want to showcase that there is going to be a case where product exists and then of course we'll have a error as well meaning there might be a case where product doesn't exist and this is going to be the case right now because i'm gonna go with just id and then one so we will refresh it one more time and for some reason we removed it here so say product number three and now we fetch the single product but what i'm more interested is my console because if i cannot get the product by that id that i'm passing in and of course there is no product with an id of three that we just passed in then i'm going to get back this object we the property of error and it's important because we'll set up our logic over here where i'll say if the product that i'm getting back has the property of error well that means that i cannot find that product correct however if the property of error is not going to be there then i know that i'm getting back that product so inside of the try catch block we'll set up one more if statement we'll say product error and if that is the case then let's grab one of the returns it doesn't really matter which one because we'll set up a specific info anyway so now of course it's not going to be a status code of 200 since it is a error and if you cannot find the resource then the status code is 404 and in the body i'll set this up as a template string and we're going to go with no product with id and then we'll just set up our id and now again let's test it out one more time where once we refresh we should get no product with an id off three beautiful so now we can see that we cannot get that product now of course i would want to get the id that does exist so i'm just going to change this around a little bit where i'm going to go to the air table function and just grab any of these ids it doesn't really matter which one as long as you copy and paste the whole value you're going to be in good shape so copy that one and again we'll navigate back to the product then we want to set up the question mark and then the id and copy and paste the value so now of course we should get the single product because this actual product does exist so in this case of course the product error property is not there so we are in good shape so if that is the case i'll take my return the one that i have below the try and catch block cut it out and then if the product error doesn't exist then of course there's going to be a return and in this case we're returning 200 and of course we still need to use the json stringify we'll go with json stringify and we pass in the product now there's also a possibility for the error but i can tell you honestly that with this airtable node they technically don't throw that error so i'll copy this one here just so we are on the same page but tell me honestly when i was building it i was never hitting this one so i'm going to hold 404 no product found with this id and just to go over one more time so of course we set up the air table that stays the same and then here in the serverless function we use our event object and on event object we have this query string parameters where we can access the query string parameters that are set on the url and the object will always exist so that's why i'm not checking whether it exists i know that it will always exist but i'm checking for specific property and in my case the property name is id and then i'm communicating with air table node where i use the method of retrieve if the product comes back with another property that means that there's no such product so return 404 so product doesn't exist if that's not the case then we return 200 and we just stringify the product whatever we're getting back and then of course we also have the catch where if there's some kind of issue with our table now then we return 400 or you know in this case i think it's better with 500 let's just stay consistent and i'm going to go 500 and i'll say server error or something like that server error because again there's some libraries that would throw the error here in a catch in the air table node they actually provide the product with an error so that is the difference that's why i'm saying that most likely you won't hit this one but let's just add it there for the sake of consistency and then lastly i have 400 and that is happening if the id is not provided at all so then of course i want to throw please provide product id and now once we navigate back to the url and if you don't change anything about the id you should get the single product and this is the time where we get the id notice we have the fields we have the price like i previously mentioned image is an array and it is an array and we're looking for the first item and then this is the url where the actual image is sitting now if i remove or if i add some extra character now i should have no product with an id of whatever i provided over here so if i again set up the correct id i should get back the response hopefully everything is clear and now we can move back to the front end and actually set up the fetch request to our product serverless function and retrieve this info about specific product but not bad we have our single product function in place so now of course we just need to set up the functionality in front end where when this page loads the product html we fetch info about specific product the id of which has been provided over here in the url and then we just update this instead of this generic single product and generic photo and all that will get that dynamic data about specific product so let's do this people we're going to navigate back to our air table and in this case we're not looking for index html we're not looking for app.js we're looking for product html like i said we have the title by the way i should probably change this to a single product then we have the nav like previously then we have a link to navigate back to all the products keep in mind that this is not back to all the examples this is still within the example number three the index.html and then we have this generic data about the single product which we're going to use a little bit later once we set up proper fetch request now the gotcha here is that we're not working with app.js so this is why we want to go to product.js this is where we'll set up the info fetch data about that specific product and we're going to start by selecting the result again the div or i don't know let's check i think it was a div but just to make sure i'm gonna go with result and yeah that is a diff my apologies for the detour i'll save it over here and we're going to go with the result so select the node and we do that with document query selector and we're looking for the class of result and then once we have selected the result then again we would want to set up a fetch so we go with const and we'll say fetch product i guess in this case so fetch and product that's the function name again it's going to be a sync since we'll have some asynchronous actions and we'll want to right away fetch the product let's start with simple console.log and we'll just say single product page let's save it and again we need to go back to our starter and we need to navigate back to all the products i'll open up the console and at the moment should be empty and then once we navigate here notice we have single product page awesome and we're going to start by setting up the loading where we have the result so in a product html like i said we have div with the class of result and then while we're still fetching data i would want to display loading so in the product js i'll simply say result in our html is equal and we're just going to go with heading 2 and we're going to go loading dot dot dot dot let's close the heading 2 and if everything is correct we should display loading there it is now of course we have our loading then i would want to set up try catch block because again we'll have to set up a request and in this case of course it's going to be to our single product correct so let's remove that console log let's set up a try catch and now 64 000 question how can we access that id that we're passing in dynamically and let me set this up over here where i have the address of course in the example so how can i access this one and in the vanilla js world we simply go with window location and then search so back in the product js i'm going to go with const id is equal to window so that is the window object and then we have location and then we have a search property and what you should see is exactly what we're looking for in the product js so let's go back let's refresh and check it out now i have the question mark the id as well as the value and for every product of course that value is going to be different now i'm not going to compare them but i'm just telling you that even though the photos are the same please understand that this id will always be unique so what do we need to do well we just need to grab this id and we need to set up of course our request correct so we're going to go with cons now i'll cancel log this data i'm not going to destructure it yet and there's a reason why and we're going to set this up to a weight then again we go with axios and then we go with get and now what is the function name well we go with forward slash api then we have the product and in this case though we need to set this up as a template string so my apologies is not going to be simple quotation mark it's going to be a template string we go with api then number three just because i'm annoying and we're gonna go with a function name which is product and then since i access everything i have the question mark i have the id and then the value i simply need to pass in the id of course there's ways how you can get only specific id or the value but we don't need to because our function our product function is actually looking for all this it's looking for the question mark the id and then the value correct that's how we set up the function and there's going to be also a case for error maybe so that's why i'll set up right away a catch where i'll say if there's an error in our html is simply going to be equal to template string we're going to go with heading 2 and we're just going to go with remember error and in axiorys it was response and then we have data that's where the error is going to be and we're going to go with heading 2. now in order to simulate error first of all let's just cancel log data if it is successful because i would want to try that first so let's cancel log or i'm sorry let's refresh and then check it out now of course we have the data status is 200 which just means that yes there is a product with that id and then we have the data property and inside of this data property we have fields and basically why i'm showing you that because in this case notice how in our product i didn't do any destructuring i just grabbed the product and i sent it back to whoever is asking right in this case of course that is my front end and that's why we'll have to do a little bit of the structuring on a front end previously that wasn't the case because of course i did all the work e and the air table so that is of course the difference and by the way if you want to see the whole structure there it is if you navigate directly to the server's function using the browser but of course you need to provide the value for the id and that value needs to be existing id and since i would also want to try out the error i'm going to go here const id and basically the way it works is i kind of just dump nothing in there so i'll go with the value for eddy i'll say question mark id and for example equal to one so just change this value around and now in a single product once i fetch i should have no product with an id of one so i'm just showing you what would be possible error so move this up i'll comment this out for your own reference if you would ever want to check the error and we'll go back to a valuable id and then of course there is now we have loading because i have success and the only thing left to do is to destructure our data and again let me repeat one more time the data will be in the fields because i really don't need the id in this case i only want the fields because inside of the fields this is where i can get my values and then we just need to wrap it in nice html so start here where at the moment i have access to the whole data but i'm actually going to the structure data and then since data is an object itself this time i'm looking more specifically to the fields property in the data object and once i have access to that i'm just going to go to name name description then price and then the image and all of that is coming from the fields because that's the property amp and once i have all of this in place i'm just going to go with result in our html and this is where i would want to navigate back to the product and now select starting with a comment and ending with a comment but of course do not include the comments so start with heading one and end with a closing tag of the article now you can cut it out but in my case i'm just going to copy we'll go back and we'll right away set up a template string and copy and paste so now of course we just need to provide these values which are going to be different for every product for example for heading 1 it's not going to be a single product we'll say name then article stays the same class stays the same the id or i'm sorry the class for the image stays the same what i would want to change is the url that's going to be unique so since i have template strings i just interpolate the value and we're going to go with image remember it is an array we're looking for item number one and we're looking more specifically for the url then again interpolation we go with name for the alternative then we have product info same deal for the third time already we're getting the name then for the price we're just accessing the price property and then you can probably already guess what we're doing for description just remove this dummy value and then we just go for description and now what should happen when we navigate single product there it is now i have my product and if i go and select different product which now have different product displayed on a screen in the single product page and next video i would want to show you how we can combine both functions in one because that is still possible and then we'll deploy it and then of course i'll show you how we can add those airtable values to our netify so that way we don't get some weird bugs beautiful and before we deploy the project one more time on netfly let me just showcase how we could set up everything in one serverless function now please keep in mind two things first it is optional you can definitely keep it in two functions there's no rule against that and second there's going to be a lot of copying pasting because i don't see the point of setting up everything from the scratch so what we would want to do is go back to the functions again just because i'm annoying i'm going to go with three and then z because i would want to display this function last since i have one for error table and one for product so i'm going to go with complete and i'm going to call this js i do need to remember right away to restart the server we'll just go with npm run and then of course netify we spin this sucker up and we'll start in the product now again opens up a new tab i don't need a new tab what i want is to navigate to the product so start over here pretty much grab this whole info go back copy and paste and once we have dumped these values we just need to scroll down and remove that return where we say please provide product id so remove this sucker over here and now of course i need to go back to the air table and also grab this logic so say try and catch so you want to copy that and copy and paste below so let's understand what's happening so i have one serverless function that is my url where i go with three hyphen z and then complete so if there is an id so if there's query string parameter with the value of id then i'm trying to get that product now if i'm not successful i'm returning 404 and i say no product with an id of blah blah blah then if everything's fine i send back the product now if there's some weird error then of course i send back the 500. now if i don't provide it then of course i'm just getting the list i say airtable list and then of course i'm getting all the values and do the same spiel where i iterate over them and i send back the product and if there is some kind of error again i send back the 500 so now of course in order to test it out first of all let's go to the browser i think that's going to be a bit safer where we simply go with localhost sorry not like then we're going to go with localhost we're looking for eight eight eight then forward slash then api and then we go with three and then what was the name z and then complete in this case notice how i'm not providing the id correct so this should give us all the products okay hopefully that is clear and just stay on the safe side i'll copy and paste so i'll create a new tab and then i'll grab this one id i guess the first one and remember we needed to add the query string parameters we copy and paste and this should give us the single id correct and if i will tamper with it if i'll try to get some kind of id that doesn't exist then of course i'll get this error and now i'm going to go to the examples and first in the object i'll leave this one for your reference because again the idea doesn't change so we'll just copy and paste and i'll comment this out and here we go with three z and then complete like so and we're going to do the same thing in a single product so product js what you would want to do of course is to comment this out copy and paste and uncomment this and we're just changing the value here for our serverless function so we go with three hyphen z and then complete like so and if everything is correct our application should still work so let's refresh i can see shoes and there it is i have all four products so that can change and if i take a look at the single product i still have access to the info beautiful now we just need to push this up to the github add the environment variables to our notify and at least the example number three is gonna be good to go not bad not bad i think we're in good shape and we can push this up to the github and then netfly will automatically start rebuilding our site so what i would want is to navigate to nullify and i'm not going to show you what kind of error you would get if you push this up without the environment variables i think it's just going to be waste of our time so simply log in and then if you remember in order to set up those environment variables we needed to navigate to domain settings then we're looking for build and deploy keep on scrolling and check it out here we have those environment variables so we click here on edit variables then we navigate back to our project and check it out we have airtable api key so you need to make sure that you use the same name of course otherwise it's not going to make sense and you just want to pass this value like so so you pass the value save it and now we should be in good shape where again we would want to push this up to the get-up now let me stress something where if you want this data to be accessible on different apps just like i showed you the previous example with basic api include these headers now i'm not including them because well there's no point i already showed you the example with the basic api and these ones i mean i don't really care whether the different api can access them or not that's why i'm just skipping off adding the headers now if you have different app for example react app that will access that of course make sure that you add them make sure that you have those headers or of course add the function the serverless function that we created for example the z complete one to your react project which by the way we'll cover later in the course basically at the very end when i show you all kinds of functionality with the vanilla.js approach i'll simply show you how we can also add the serverless function to the react project for example so hopefully that is clear and i'm just going to go here to the github one and i'll say project project three or example let's do it this way example three complete complete and then there it is we just click on a check mark and then we push this up to the github now the build should be pretty quick there's not much to it so let's scroll up we see the deploys notice we have the message example three complete and here we're building of course building building building while netflix is busy building my site i'm going to remove some of the tabs because again it's just getting too busy over here and you know what i think i'm also going to close the air table node 1. if you ever want to double check whether the code that i'm writing is correct of course you can do it but for the remainder of examples i'm just going to tell you what is the method name and what do we need to provide looks like we're in good shape we have more functions that's awesome we have site is live that should do it so we can just navigate to our site and we can check it out we have the hello world basic api and we're looking for a table now we're fetching data from the air table by the way if you want to see it in action i'm just going to remove the product and say you know what this one is not needed uh let's just wait we'll see how long it takes and there it is within a matter of seconds we have our new updated data so we have nice gui which we can use to delete update create whatever data and we can display it right away in our application and if i want to see the single product there is now i have my nike shoes awesome i think we are in good shape and we can continue with our examples and at the very end i'm going to show you how to set up serverless functions with react app now we're not going to set up all the previous examples in react app that would be very time consuming but we are going to create a basic setup so you have a clear idea of how to add the serverless functions to your react app and what are some gotchas you need to be aware of if you're wondering why i ended up adding react project as well essentially there are two reasons first the time of recording react is by far the most popular framework so it's a good chance that most of the course students use react and second initially i used serverless functions to set up the api for my react course and i've been getting a lot of questions from my react core students about that about the whole setup so it only makes sense if i cover all of the steps in details if you want to see the app we are going to be making navigate to url serverlessfunk react example again the url is serverless dash func dash react dash example dot nutify.app and again it's not going to be super complex app however we'll take a look at how we can fetch data from our previous project remember our second example was local data but remember we added that header so we can access that data from other apps that's going to be our first example and second example we'll take a look at how we can add a serverless function to our react app and essentially fetch data in react component from our own app essentially we'll have our react app we'll have the serverless function that fetches product data from the air table and then instead of going to the third party api and fetching some data we'll fetch it from within our own server because of course we'll have the serverless function in our project and also take a look at how we can set up a single page with react router dom as well and of course if something is iffy at the moment as we're working on the examples i'll cover everything in greater detail and also since it is a react app there are going to be some gotchas when it comes to deployment so of course i'll cover them as well now in order to follow along with a project you will need a starter so you'll need to navigate back to my github and again the handle is john smilga and then you're looking for serverless funk react and starter now there's a complete one as well but again the starter is going to be in a repo by the name of serverless funk react star go there and just follow along with the videos and once i'm at the repo as always you can fork it you can download or you can simply clone which is gonna be my option so i'm gonna get the url i'm gonna navigate back now if you want you can leave this one on desktop it doesn't really matter and i'm just going to open up a new one so cd desktop let's just zoom in though desktop and then we're looking for git clone and copy and paste that's my starter so i'll open up a new window in my text error and since it is a react app and i used create react app to set it up of course we'll have to install dependencies and it's going to take more time than the previous starter so in this case we need to run npm install and while the dependencies are being installed i'm just going to showcase that it is pretty traditional react app where we have the public here of course we have index.html if you want you can change the title at the moment i have serverless and react starter so i think in my case i'm just going gonna remove the starter then we have the source this is where we'll do most of our work so i have the app.js here with just a heading two and as a side note i believe this is a react 17 and if you take a look in react 17 we don't need anymore that import react from react now as we'll be creating our own components since i'm using the snippet i believe it's still injects that import react from react but just keep in mind that with react 17 you don't need to do that anymore now in the source we also have index css for all our styles as well as the index.js where at the moment we have app but eventually this is where we'll set up react router dom then we have git ignored essentially the files that are going to be ignored by the source control now we're mainly interested in this dot env and of course we have netflix tamil file where we point to the functions folder which we haven't created yet as well as setup redirect now since it is a react app there is going to be a few more things that we'll add to this nettle phytamil file but we'll do that at the very end because it's just important for deployment and then we have package.json where of course we have all the packages that react needs as well as few of our own so we have axiorys again we have adder table node and of course i'll explain each package once we add it to the project and in the readme you'll just find a setup for the tamil one so this is going to be the complete setup and also have a build command and of course i'll talk about it again once we are ready to deploy the project and once we're done with the setup since we have nettle fire package technically we can run npm run nettle file again that is always an option because notice i have the script command over here the thing is for the first example for the basic setup i would just want to spin up the react server so that one is done with npm start because i would want to showcase that with the first example we don't need netfly server in place so in this case i'm just going to go with npm start and that should spin up a server on local host 3000 again keep in mind there's a difference there's a localhost 3000 where we have app served by create react app server and then eventually once we add the serverless function to our react app we'll have to spin up our server on localhost 888 and that is going to be done using the npm or on netfly and once you spin up the react server this is what you should see on screen and now of course we're ready to work on our first example beautiful so now let's work on our first example this is going to be the basic setup where if you remember as our second example we served a local api essentially the data was local however remember we added the header so that just meant that we can access this data from any app and if you need to jog your memory i'm gonna go to serverless functions course so that's the url and then if you take a look at the basic api remember we set this up with local data now i'm not really interested in this case in the front end what i'm interested is the api so i'll remove that part of url and we're just going to go with api 2 and then basic api so that's the data that i'm looking for and now what i would want is to fetch this data from this url so from the project that is already hosted on metalfi and just render it in my react app now here's the thing if you want you can grab this url essentially from my complete project and then you're just looking for api to basic however i would suggest grabbing this data from your own project because eventually if i'll see too many requests so if it's going to exceed that 125 000 that metal file gives for free then of course i'll just remove that header and you'll get a course error just keep that in mind if there's not going to be too many requests you should be able to use this url but there's going to be too many i'll just remove that header and then of course you'll get the course error now if you deployed your own project you should always have access to that url as well so i'm going to copy this url i'm going to head back to my project and then in the source so let me zoom in that's my source i would want to create a new file and i'm just going to call this basic js again in react 17 we don't need to import react from react but since i'm using my snippets i'm just going to import it anyway notice here we have import react from react and that's my basin component and i would also want to right away import two more things i would want to get use effect since we'll set up fetch as well as use state since i would like to store those products somewhere and i'll store it in state as well as axios from axios just because i think it's going to be easier than the regular fetch and we're importing this from the axios library and once i have my imports i'll right away set up my url so const url is equal to my string and let me set it up in quotation marks like so and once i have added this string then of course i would want to set up my state value and you know what before we do anything why don't we set up a section here and just let's see whether we're getting some kind of return so go here with section and say hello from basic example like so let's save that and then of course we need to navigate to app.js import that component the basic one so import basic from and then basic component and since there's going to be the air table component as well i'll set this up as react fragment since i cannot return to adjacent components so this is going to be my apparent one and i'll simply render my basic component i'll close the sidebar and i'll navigate back to localhost 3000 and there it is now half hello from basic example let's see what is my zoom level that should do it and then i'm going to go back to the basic one and like i said first i would want to set up state value for the product and in the beginning it's just going to be a empty array product set product here and that is equal to my use state and it's just going to be an empty array that's good then i'll set up a fetch data or fetch products function which is going to run when our component amounts and it's going to be synchronous and that's why i will set up right away a sync function so const fetch fetch data and that one is equal to my sync function now i'm not going to pass anything in there we'll just say that it is a function we'll set up try catch we're not going to do anything if there is an error let's just skip that part and i would want to right away the structure the data out of the axios because remember with axiorys we get a giant object however the data that we're looking for is sitting in data property and i'm just destruction right away so i'll go with axios.get and i'll pass the url again let me repeat you can use this url however if you get the course error that just means that you'll have to use the data from your own app that you have deployed because of course the generous 125 000 requests that the netlife offers have been exceeded all right and then we'll go with set products and we'll just pass in data so initially this is going to be an empty array and then once the component mounts in the product has a state value i should have these values and like i said i'll do that once the component mounts that's why we'll run our used effect here and i'll just pass in empty array and let's just say fetch data let's invoke it now if you want we can console log or we can simply use react devtools let's do it this way let's go to serverlessreact i'll refresh we'll inspect and we go to components there is our app and there's our basic component and notice the state now of course state has the product value awesome and once we have the products then of course i just need to work on my return like i said this is going to be very simple example where essentially i would want to set up some kind of styling so i'll pass some classes here as well we'll say section section center and then we're gonna go with div with the class of title inside of the title we're gonna set up a heading two with text of basic setup and let's add the underline as well so we're gonna have div with the class of title underline and once we save it this is what we should see the basic setup and now of course i just want to iterate over my products and then for every product return a article so right after the title div we're going to set up another div with the class of products and inside there we're going to go with products map so we're mapping over the state value each and every product is going to be represented by the parameter of product and then i know that inside of that product inside of that object i have properties of id image which is an object itself however there's a url property that i'm interested this one this is going to give me that image and then of course you know the rest you know the name as well as the price just destructure that right away i'm going to go with const and we're looking for id and we'll need that for the key because of course this is react and we're looking for url here as well then price as well as name and that one is coming from the product like so and once we have the of this data then like i said we just need to worry about our return and i'm returning an article and i'll close this one let's add a class name here right away product and remember in react if we have a list we need to have the key prop and inside of the key prop we just need to pass something unique and in our case of course that is an id then let's set up our image for the source we'll use the url for the alternative we use the name and then of course i'll set up the info so deal with the class of info and inside of the info what i would want is to go with heading 5 and we'll pass in the name name and then we have another one and this is going to be the price so here let's go with price and we'll add a little bit of styling that's why we'll have class name of price and let's add a dollar sign as well so let's add this one let's save it and this is what we should see on the screen again extremely basic setup where if you want to set up the api that's going to be consumed by multiple applications you simply create a project you set up the serverless function don't forget about the header otherwise you'll get course errors you deploy that project which in my case of course is this one serverless functions course and then that's my function and of course once it's live from any application you can access this data just keep in mind that as far as the free tier it is 125 requests and again if you have many users trust me you'll run out of that quickly if it's just you using of course you should be in good shape so we're done with our basic example now of course let's take a look at how we can add our serverless function to our react app because in this case we're simply fetching from external api now i would want to add the serverless function to our project and of course we'll be fetching from our own server nice and we're going to start setting up our serverless function so i'll split this up in a few videos so the videos are not extremely long and we'll start by creating component and i'll say here error table that's going to be my name our table.js and again i'm using my snippets to create my component and i'll say hello from airtable so all right we save that one then again we navigate to app.js import and then we're importing airtable from and the component name and then of course right after the basic one i would want to render let's save it and if i navigate to localhost 3000 i should have hello from airtable awesome once that one is in place now of course i would want to create my serverless function and remember in netflix tamil we already have the command where we point to the functions folder so of course we need to create a folder and then we have a redirect as well so in the root i'll create a new folder and i'll call this functions of course so so let me zoom in notice functions folder and then within the functions folder i'll create a new file and i'll call this product and js now here's what i would want i would want to get that function where i combined both the value for all the product and then for the specific one and if you need to jog your memory what am i talking about well i'm going to open up a new window and now i'm grabbing our serverless functions so the previous project i'll dump it and then let me just showcase where i'll close everything that i have currently open and we're just looking in the functions and then we're looking for that complete one that's the code that i would want to get again i don't see the point of retyping everything from the scratch just go back to the starter the serverless function starter go to the complete one or if you don't have the complete one then of course get the code from both of these ones so you'll have to set up two functions in my case i have the code for both of them so i'll copy this one and keep in mind that these values are not changing we just need to create that dot envy and i also install dot env package in our react one so you should have access to that one as well as airtable mode so save it or i'm sorry i guess copy that navigate to the functions and product so this is going to be the react app copy and paste that should be the code and of course we right away can create a dot envy file because we'll be looking for this value and we still need to use the dot env even though it is a react app one and then get the secret key from your air table again i'll copy and paste it and then i should have the product available now at this point though i don't want to run this on localhost 3000. here's the key now i have a serverless function so of course at this point what i would want is to run npm and you know what let me just clear the console first so npm and then run and nuttlefy and you'll notice something really really cool where natalify cli is very smart it can see that we have a react app with create react app so there's going to be two apps there's going to be one that's served on localhost 3000 so that is going to be the create react app and then there's going to be one again on localhost 888. see notice here we have still this localhost 3000 and by the way if you don't believe me see over here localhost3000 so we still have this app in place now the gacha of course is following where of course since we have our server list function i want to run the rest of my code essentially i want to test the rest of my code on localhost 888 because on localhost 3000 i will have no access to my serverless function so let's check it out we're going to go here with api and we're not looking for one hello we're looking for products why because that's how i named my serverless function and now if everything is correct i should see my product why well because i have all the code in there right i already have let me open up my products yep there it is so i have dot env so i can get my environment variables i get the airtable node i get the base i already have the api key i'm looking for the table by the name of product everything exactly the same and then the rest of the functionality and once we have this data now of course i can fetch it in my airtable component it's all we have to do similarly to what we did with a vanilla js approach beautiful so now let's just set up our return and we're going to do that first i'll remove the tab for the github and again you can keep the 3000 open if you want but i'll go to 888 like so so as you can see we still have our app and now of course i'll just want to work on this component and i think i can close this one as well so this is the url to the complete project where we were getting the two basic api so this is where we're getting that function and then the data that we are displaying in our basic component so close this one i'll just leave the product function open just in case i want to take a look at the values but should be pretty straightforward where we have array and then that's not what i wanted where we have array we have some objects and then inside of the object we just have four properties id name url and price and of course in the error component i would just want to fetch it from my function so that's not going to be a external api i'm sorry external url it's going to be local url it's going to be coming from my own server and then we'll do the same thing iterate over data and just render those products so let's navigate back we are and by the way this probably is my serverless function one star so let me close it i don't need it anymore and i want to navigate to the react project please don't confuse the two now i would want to do my work over here i'll close the terminal and we'll need to import some stuff as well just like we did in the basic one so we're going to go with use effect again we use use state and much of the functionality as you can tell is going to be pretty similar the only difference of course is the different url and also when we are getting the data when we're destruction of course we have right away four properties so technically you can copy and paste and then just alter the data in my case i'll rewrite it from the scratch because i think it's just going to be a bit more easier to understand so we're going to go again with axios for easier fetch requests so we're going to go with axios and then eventually there's going to be a link component from react router dom but we're not going to set that up right now and we're looking for url and then forward slash api and then product why well because that's where our serverless function is located then we have our airtable component of course where we go with const product again same deal and set that is equal to our use state use state and we pass in empty array like so and same deal we set up fetch data so const fetch and data and that is our function it's going to be in a sync function right away and instead of this function again we go with try catch and we'll just be looking for data coming from axios and i'll set it equal to that so go with await axios.get and we'll pass in the url so this is going to be the url on our own server where we have the product and then we just go with set product and pass in data again if you want you can console log it in my case i think i'm just going to use the react devtools so localhost 888 inspect and if we take a look at the components and airtable one at the moment state is empty now why is the state empty because i haven't called the use effect yet so we're gonna go here with use effect and again we'll pass in our callback function of course and then we'll say that dependency array is going to be empty and we'll just say fetch data so once we fetch the data in the r table yep there it is of course now our state has three values our three products and similarly to the basic one like i said we're going to go with section we'll add some classes here we'll say section section center and then inside of this section we're just gonna go with our title again subtitle and we'll say heading to our table and let's add that underline as well just because it looks better underline all right awesome and then same deal we're just iterating over the products so let's set up a dave with the class of products and then inside of it we go with products we're mapping over and you already know the deal every product is going to be an object and then what i would want is set up some kind of parameter in my case product and i'll write away the structure id url then price and name and eventually this is going to be linked to a separate page but we haven't set up our react router dom yet that's why for time being it is going to be a article and then eventually we'll set it up as a link so let's go with article and we need to add a class name again of product as you can see the styling is exactly the same we're going to go with key is equal to id and inside of this article i want to set up again my image i'll use the source and that will be url then we'll add a name here of course and then we would want to have a deal with the class of info and two heading fives one for name and one for price so let's set this up i'm going to go name copy and paste i would want to close it of course and this is not going to be name it's going to be price let's add here a dollar sign as well and we're going to add a class of price so once we save it and we navigate back to our project we should see two products one coming from the basic setup this is of course where we fetch the third party api which by the way we created ourselves with netify functions and then the second one is coming from our own server so this is where we set up a serverless function for our own react project so you have two flavors that's really up to you which one you would like to choose and next video i'll show you how we can set up separate pages now if you remember when we were setting up our functions for airtable products when we combined two of them one for all the products and one for single product the result was following where if we navigate to the url of api and then whatever is the function name which in our case is product we're gonna get all the products however if i navigate to localhost 888 and then we're going to go with api and again the name is product and if we pass in the query string where we set up the id and of course id needs to have some kind of value meaning it needs to be a valid id otherwise we'll split back the error then of course we'll get the info about that one specific product and we'll use this info to build a single page where of course in the basic setup we don't have that one but in the air table if i click on the link on the product then of course i navigate to a single product page and then i fetch the data about that one specific product and of course logic hasn't changed so if i'll pass the id that doesn't return any product i'll just get a no product with an id off whatever and if we take a look at the console we should get a 404 so in console of course there is i have 404 since that is the response that we're sending from the product so if we try to retrieve the product with that id um there's no such product so in the airtable node if there's a product or i'm sorry error property on a product then of course we just return 404 now for this one i will use the react router dom because i think it's just going to be easier and the way we'll set this up in the source let's create a new file i'll call this product js again i'll use my snippets and i'll say single product and then in this case i'll set this up in the index js where of course we would need to have few imports from the reactor of the dominant let me close the sidebar we go here with import we look for browser router as router then we're looking for route and all of that is coming from react router dom now i'm not going to set up the error page that's why i'm not going to use the switch statement so just go with browser router as router and route and then of course i also would want to import that single product so the way my setup is going to work if i navigate to the home page i'll have basic setup and air table so essentially that is going to be my app component and then for a single product i'll return that product component that we just set up with that dummy value that we're returning so i'll go with product from and product component and by the way i don't know why it's not returning a product let me see because i named it products my bad so rename and we're going to go with product and again we're importing from the product and now let's set up a structure for the react router where we go with router and then inside of the router we will have two paths basically two routes one path is going to be a homepage and in this case i'll set it up as exact because why not and inside of this route let's see exact we have as true and then inside of this route i would want to render my app like i said app component um then of course i'll set up another route and this one will be to that single product just keep in mind that of course it is going to be a placeholder we set up the page for the single product and we'll have to use of course url parameters where for the path i'm going to go forward slash and i'll remove that exact one and we'll say here colon and product id so eventually of course there's going to be a link we'll pass that id and then in that single product we'll get it and i guess let's just start there we're back in the airtable.js i'm going to go back and i'll import a link from react wrote down from react router dom and then instead of the article we'll return a link and now we just need to make this dynamic where we'll set up two and we need to go with templar literal and essentially i would want to access that id so say forward slash and then id and since i have set up reactor or dom now of course i'm passing in this product id so every time i'll click on this product which is a link i'm going to navigate to the product page but i'll pass the product id like so and again if you're not familiar with the setup please watch other videos where i show how it's done as far as react router down so save the airtable js and if we navigate to our current product or i'm sorry our current project then we can refresh just so we can start from scratch and there it is now have link outside of the router so if you get this bug we simply need to navigate back to the injects and just check and there it is of course i have two setups for app i didn't remove it so we have one app where we pass it in the route and then we have a product that we passed in the second route so make sure that you remove that app because otherwise you'll get that error let me refresh and there it is now i have the basic setup and here i have the air table so now since these ones are links and we can clearly see that since our cursor is changing as we hover over it notice how we navigate to the product component but i pass this id like so and i can navigate back of course and you'll see that this value will be different so each and every time we click on a product we pass the product id in our url because we use url parameters from react router dom and now we simply need to go to the product js our component and we just need to probably set up the loading we need to set up use params which is a hook from react router down because of course i would want to get that id and then i would just want to render my product that's all we have to do so let's go to the product js and you know what i'll close everything that i have currently open in my editor just so it's cleaner so we're going to go with product js and here there's going to be a few more things that are coming from react we have use state we have use effect like so and i also want to get the x here's because of course we'll be fetching product data from our product function we'll just add that query parameter there axios from axios like so and then we also have a link because there's going to be a link back home back to the home page and also use param since i would want to access that product id and that one is coming from react router dom and once we have this setup in the product and by the way since the name originally was product that's why i have both for component as well as export as product so i'll change it now you don't have to there's default export so it doesn't really matter but in my case i will then let's set up loading since it might take a little bit of time set loading and by default it's going to be true so use state we'll set this equal to true then we'll go with our product so const product and we'll set set product equal i guess let's just start with null so by default it's going to be null and then in order to get that product id that we have in the url we simply go with const and we're going to get back the object so for time being let's just go with data and i'll invoke that use params hook that is coming from reactor or dom and i'll cancel log the data and you'll see that every time we navigate to our product page will have in a console a id and let's see so we have used params data and for some reason i cannot see there it is now once i refresh i have product id and here i have the value now we'll need this value because of course we want to set up another fetch request right so right away the structure product id and of course if you named it bugs bunny in the index.js just make sure that you use the same value in my case i named it product and then uppercase id that's why in the product component i'll use the same name and then the same deal we go with const fetch and we'll call this data again let's just stay consistent let's name it all the time the same and again we have try catch now the url is going to be a bit different right so we're going to go const data that is going to be my product data that is coming back await axios and then get and now of course the url will set it up as a template literal why because we'll pass in this product id and remember in order to get info about single product we went with api product like so then we need to have question mark id and then whatever is the product id so we go with product id and if everything is correct i'm gonna go with set product equal to data just keep in mind one thing that we'll have to do a little bit of the structuring here let's say we have the id and what we're actually looking for is the fields property so we'll have to do a little bit of extra work but regardless whether we get the data or there's an error i would always want to set loading to false set loading and now one is equal to false and once this is in place i'm just going to go with use effect and pass in my callback function empty dependency array and let's just say fetch and data we will invoke it and let's set up a if statement if we're loading and then if we're not loading then of course let's just destructure the data so we're going to go with if loading if that is the case then i would want to return a section and i'll add some classes here so say class name section section center and then instead of this section we'll set up a heading 2. with loading. okay that's good and then if we're not loading then of course there's going to be a return but what i would want to do first is right away this structure what i'm looking for from my product now i'm not going to cancel log the data because i already showed you in the browser but what i would want is to go with fields so that is coming from the product and again we're able to access that because i'm assuming that there is no error if you want to set it up with error of course you just need to add more data and more specifically from the fields i would want to right away get name then description and then price as well as the image and that one is coming from the fields and i'll just cancel log the name i'm not going to cancel log rest of them we can navigate back to our project and i'll spin this up and there it is i have blue sneakers so that means that i have access to the data if i'll navigate back to my home page and i'll go with this one i should have pink shoes so i'm loading for a second and then i display these pink shoes so now of course we simply need to set up our return so we're gonna go here with a section and then let's remove it we'll set up some classes as well so class name section section center and then instead of the section let's set up that link back home so link to and we're navigating back home so go with forward slash and also let's add a little bit of styling off a link now instead of the link what i would want is some kind of text so say back home like so let's save that one and then right after the link let's set up a div and then instead of that they will have a title div and then again the same deal we're going to go with heading to in this case the name will be dynamic that's where i'll access the name and i'll add that title underline as well let's save it there it is now we have pink shoes as well as the link back home and it doesn't look like i added css so i'll have to capitalize it myself and of course i can do it also if we go to the css but i'll skip that part and then okay we have the div and right next to this div we're gonna have the article article and the class name will be single product like so and we're going to go with an image again there's going to be a class eventually so why don't we add right away the css we'll say single product and then img and now of course for the source we need to look for the image but remember we were not doing any of the structuring in our api so we need to go with image zero because image is an array and we're looking for the first item then url and then we'll have access to the image now again i'll add the name for my alternative and then we simply want a div with two values or three values apologies we also have description in this case so go with heading 5 and we're looking for a name then copy and paste this is where the price is going to be displayed so class name and price and of course i'm looking for the value of price and then lastly we have a paragraph of description that's all we have to do so description here and there it is if we navigate back to the browser this is what we should see so once we refresh this is going to be our look now there's one thing missing here and that is the fact that div needs to be placed within the article my bad so now of course we have the css as well so navigate and there it is now we have our single product setup as well all right and once we're done with our project now of course it's time to deploy it however there are some gotchas that i would like to cover when it comes to react projects and deploying them with serverless functions on metal file that's well first go back to the metal phyton and by the way if you want to see the code we'll be typing just navigate to a readme and first what i would want is to add a build command because remember with create react app we have a command that builds our project right so we need to tell netify hey what is the command and we need to go with command and then of course the value is npm or unbuild and then we need to showcase a published directory and we do that by pointing to forward slash and build so let's do that i'm going to go to my tamil file which i cannot find for some reason and again just to stay consistent let's add these tabs here and what i would want is to have a command that was the name so we go here and we can go in front of the functions or after i don't think it really matters but i think i'm going to set it up before command is equal to npm run and then we go with build so then i would want to go with my publish directory and that one will be equal to a forward slash and build so that's out of the way and then we have one more thing if you took my react course you know that once we deploy a react app that has react power dom we actually need to set up redirect and just to showcase that i'm going to go to github i'm looking for the comfy sloth that was our react project the e-commerce project the big project we built during the course and if you take a look at the public folder you'll notice this redirects file and here we simply say that every route is going to be redirected to index html now if you add this file with that code to react project what's going to happen well these redirects that we have for our functions is not going to work so either you need to remove this redirect for the api or you would need to remove that file now there's a solution though where i can still keep my api option so that's just going to make it easier and then of course i can just set up another setup redirect because if you don't then every time there's going to be a path to api it's going to be redirected home and then you won't be able to access that from your code remember we have been using all the time this forward slash api and then the function name but if we add this file the redirect file in the public folder then our functionality won't work now if you don't add this redirect file then of course the another issue is that your react router won't work so the solution is following where we set up another set of redirect so we don't create a file in a public we don't pass it in instead what we do is we go with redirect again and we just type out that anything from and in this case of course we're looking for forward slash and the star so any url and then two and of course that one will be equal to forward slash index html again this is specific to react router dom if you're not using it then you don't need to add it and we go with status and 200 so we save it and check it out now of course everything is going to work once we deploy our app because first when we're looking for api everything is awesome we direct to netflix functions and then if the react router dom needs it then we just navigate back to index html so that's how both of them can play together the redirect for our amplifier functions and then redirect for react router dump and before we continue one quick thing that i would like to mention is that if you take a look at the package json notice the build command so i added this c i and then equal sign and if you don't add that one you might get some strange bugs where the project works locally but then once you try to deploy it on netfly it's going to spit back that there was an error so that's why i added it and also as a side note i added the code to the readme so if you ever want to use it in your other project just copy and paste this line of code and you're going to be in good shape and once we have this one in place i'm going to start by removing a git repo because i think i wanted to do that but i forgot so i'm going to go with remove rf and get because i'll create a new one and i'll go to my github even though i have the tab open and i'll say new and i'll call this serverless serverless func and react so that's going to be the name of this project then i would want to copy these three commands and let's just run git add or sorry git init first git add and git commit and commit message is going to be first commit so and then i'll copy and paste these three commands and once i have everything in place i should see in the repo my project now what's missing of course is the dot env of course right and that is on purpose because we don't want to share our secret variables so we're going to go to netlify and we'll spin up a new project i'll say new site from git we're looking for github and since i named my one serverless so we'll go with serverless func and we'll have multiple options at least in my case i'm going to have multiple but and of course here it says server less let's do it this way and we should see the last one so i don't want to deploy the star i don't want to deploy the temp one what i'm looking for is this serverless function react and then notice here i have right away npm run build and the directories built and by the way there is a bug this one should be built so let me go back then i don't want to do that i want to push this up to the github let's say tamu bug fixed and once i have fixed my bug now of course i'm going to do it one more time where i'll refresh all right so we have tamil bug fixed and let's do it i'm gonna go with login new site from git github and we're looking for serverless server less and the repo name was serverless func react and like i said we have npm run build and then publish directory build and if we want uh the environment variables of course we'll get the error when we try to deploy the project so at that point we can either do it through the gui or we can add it right now and that's why i'll navigate back to my project and we're looking for dot env grab the key and pass in the value and once you do that everything should work i'm gonna go with deploy site now it's gonna take a little bit of time so meanwhile i'll change the site name and we're gonna go with serverless funk funk and react example all right let's save that one and i'll resume the video once the build is complete all right and once netflix is done building our site we can navigate notice this is going to be the simple setup where we're just fetching data from our previous serverless functions project and then the second one is the air table where essentially we're fetching data from our own server because we have a serverless function and if we want to navigate to api and then product of course there it is we'll have our data and also our redirects are going to work with react or dom if i navigate to a single product page and if i refresh notice there's no bug there is no error everything works awesome that's how we can set up our react project with serverless functions whether we just want to fetch data from some other serverless functions project or we can add a serverless function to our react application and we're going to be in good shape

Channel: Coding Addict

Views: 13,104

Rating: 4.9540229 out of 5

Keywords: serverless, what is serverless, netlify serverless functions, netlify, netlify serverless, lamba functions, netlify-cli, netlify lamba functions, airtable, stripe, serverless api, serverless basics

Id: AfAZ33XjIBU

Length: 267min 5sec (16025 seconds)

Published: Fri Jan 29 2021