Learn Express.js In 48 Minutes: Web Server Tutorial

hello everyone welcome back it's been a few weeks uh this is a new chapter so in this chapter we're going to learn about servers let's begin in this first video by talking about why we need server-side code in the first place because we've seen that you can do a lot with javascript in the web browser you can connect to other servers and apis you can create interactive games you can do just about anything however this doesn't eliminate the need for servers so that's what we're going to cover in this video and we're going to be using the node environment the node ecosystem so without further ado let's jump into the action so first i want to spend just a minute or two to explain why we need a server in the first place right so the question is why can't we just use client-side javascript for everything we've already learned how to program in the web browser well here's why so imagine this super legitimate looking bank website says your balance is a hundred dollars uh but imagine i'm a dishonest or malicious person and i just click view page source and see that there's a main javascript file i can click on that and i see that there's just a variable named balance and then there's a function named render so if i was a dishonest person i could just open up my console in my browser and say you know what i think my new balance should be nine quagillion jillian and then just call the render function and there you have it so obviously we can't actually trust client-side javascript because once javascript gets sent to the web browser individual people can manipulate it or view it or do whatever they want with it we cannot trust it or just for another quick example here we see what color is the sky on a clear day so if you type anything other than blue you're going to see that is incorrect please try again now obviously we know the answer is blue and if you type that in you see that is correct here is some top secret data that we do not want anyone else to know grass is green so imagine instead of this message this actually was some sort of private piece of data that we didn't want anyone to see unless they knew some secret password right so use your imagination and pretend this was a 12 character password instead of just the word blue that we wanted the answer to be now even if you and i did not know this secret answer if we were a malicious user we could just view the source view the javascript file and there we can see that secret success message or even worse if you go into your dev tools and click on sources and then instead of index.html if i click on the javascript file in question you could imagine that even if the secret value was encoded or encrypted in some fashion all you would need to do as a malicious user would be to manipulate this if statement that checks for the value just manipulate that so that it's always true so i could literally just say true here or if two plus two equals four hit ctrl s or command s to save that and now back in the browser i don't even need to type in blue for this to evaluate to true i just see that is correct no matter what i type in so clearly we cannot trust client-side javascript instead we need a trusted environment where we are in control of executing the code right when we need to make actual important decisions that actually matter and have real world consequences or security concerns this is when we need a server or trusted environment and that's exactly what we're going to learn how to set up and understand in this video so right now let's go ahead and create our first server so i want you to follow along with me i'm going to open up vs code now if you have not seen the earlier videos in this bootcamp series and you do not have node.js installed on your computer you'll want to go back in this series or you can look for another guide on youtube on installing node however just so we can keep rolling along in this video i'm going to assume you have node so i've just opened a new folder a new empty folder you can create it anywhere on your computer but then go ahead and open it up in vs code in the command line let's say npm and knit dash y just to start a new project okay and with node technically we could code our own basic web server from scratch however in the real world people don't do that in the real world there's a super famous package called express express is the industry standard for creating servers in node so let's just say npm install express okay let's go ahead and create a file of our own in our project folder you could name it anything but i'll name it main.js okay let's begin by pulling in the express package so let's say const express equals and then just require it in so the package name was express next let's actually use that so let's create our own variable you could name it anything i'm going to name it app but there's nothing special about that name you could call it pizza or anything you like but let's just set that to equal and then just use the express package right so we're creating a new instance of express and now on that variable we can begin to do things so for example down here we can say app dot and then call a method of listen let's give this two arguments so the first is the port number that you want to run this application on so you could say 3000 or 8080 i'll just go with 3000. if you're super new to programming don't worry you'll see where this number comes into play in just a moment i will say though that if you watched the previous video about setting up a webpack dev server if your webpack setup already uses port 3000 you'd want to use a different port number here so maybe four thousand anyways let's move forward so before we save this file and test it out we do need to set up a route so above this listen line and the ordering here does matter it needs to be above the listen line let's say what should happen if someone visits the home page of our server so let's write out a bit of code and then once it's up and running we will circle back and explain it but for now just type this in with me let's say app.git and we're going to give it two arguments so the first is a string of text representing the route a forward slash means the home page right just the base url of our domain or server we give it a second argument and it just needs to be a function so you could use a traditional anonymous function or an arrow function but we need to give it two parameters so let's say req and res these stand for request and response we can talk more about these a bit later on the video for now though let me finish out this function so arrow symbol curly brackets inside the function let's just send back a message that says welcome to our home page so res we're using the response object we will talk about where these come from in just a moment but for now inside the body of our function let's say response dot send and string a text welcome to our home page now i promise we will circle back and explain this code but before we get to that i actually want you to select these three lines and just copy and paste and duplicate it only in this new copy let's change this first argument to be slash about right so this would be the about us url or page on our website and then we can change this message to say thanks for learning more about us let's give this a save and test it out so in our command line we just say node and then the name of this file so that's main you could include the dot js but it's not necessary and let's go ahead and run this now at first it might look like the task is just taking forever to finish and that's because it sort of is so we told express to listen on this port meaning it's just going to keep running until we tell it to stop right and that's what you would want from a server we want it to be up and running ongoing so this is just going to run until we press ctrl c to stop it but we actually do want it up and running so let's make sure it's running and then now in your browser we can visit localhost colon and then whatever you chose for your port number so i chose three thousand cool there we see welcome to our home page and that's our base url right but if at the end of the address we add slash about well that's the about route that we set up so back in our code each one of these is a route so a route is just us describing what should happen for a very specific type of request so let's actually break this code down now so we know that app is just our instance of the express package what is git well in the world of the internet and http requests there are different types of requests so sort of the default type of request when you just visit a website in your browser that is a get request however if you submit a traditional html form right you fill out a bit of info and then hit the submit button then your browser sends a post request so altogether we're just saying which type of request we're listening for then we're saying which part of the url we would be listening for right and then the final part of the equation is just the function that we want to run in response to that request now what about these two parameters well express is going to call this function for us at the appropriate time right when this request happens and it's going to pass into it two arguments so that's why we're receiving them with two parameters request and response you could name these anything you could name them pizza and unicorn we call them request and response because the first thing that express is going to pass into our function is an object that represents the incoming request from the visitor and then the second thing that it passes into our function is a response object where we can do all sorts of useful things right and that's where we're getting this useful send method to actually send a response back to the visitor cool so now that we've seen a working example of a get request let's try a post request so imagine our home page sends a form that asks the user what color is the sky and then they have to type in an answer and submit the form so let's do that right here we can get rid of the traditional quotes inside this response.send and instead if we use back ticks now we're free to drop down to multiple lines and just start writing out a bit of html so for example in between the two backticks let's have a heading level one and say what color is the sky on a clear day okay and then right below that let's have a form right opening and closing form tag now before we go any further i do want to point out that i'm well aware that typing html into a template literal like this in the middle of our route is not ideal so if this feels hacky or gimmicky it should this is just a quick proof of concept a bit later on in the video we will learn how to implement a real templating engine but for now this will definitely do the trick anyways inside this form tag let's have an input with a type of text and let's give it a name of color okay and then right below that let's have a submit button so opening and closing button and just have it say submit answer okay and then this is really important on the opening form tag we need to give it two attributes so first let's say action equals quotes and then we just say where we want to point towards which url you could use any value here you want but why don't we just say slash result okay so that means we're going to need to set up a new route in express for slash results you'll see where this comes into play in just a moment however let's also give this opening form tag another attribute of method equals quotes and let's say uppercase post by default the browser will try to send a get request when you submit a form now there's nothing wrong with that however the browser will take whatever value the user typed into the field and add it into the resulting url now in some situations like a search engine result screen you might want that you might want the value to be part of the resulting url however if we use a value here of post if we send a post request the user's values will just live in the actual body of the request instead of in the url long story short as long as you don't need the resulting screen to have a shareable or recreatable url post looks a lot cleaner for the end user anyways when the user visits this page and submits the form their browser is going to send a post request to this url so we need to set up a new route for that type of request so down here we can just say app but instead of using the get method let's use the post method right because we're listening or looking out for a post request okay the first value would be slash result because that's where the form is submitting to right slash result okay then we want to be sure to have a function so parentheses request response arrow symbol curly brackets let's just say response dot send thank you for submitting the form now a bit later on we can actually learn how to evaluate their answer right we would want to check to see did they type in blue or not and then say either that is correct or that is incorrect but for now let's just get this basic response up and running so if we hit save and then refresh our home page nothing will happen this is because express runs in memory or it should say node apps in general run in memory so in order to actually see the changes take place you do need to go into your command line hit control c to stop the server and then start it back up again so it'll use your new code so node main fire it up now if we refresh our home page cool so we can just fill this in it doesn't matter what we type just submit the answer cool thank you for submitting the form notice the url is rather clean looking if we would have used a get request on the form instead of a post request the resulting url would have looked something like this so it would have been slash result question color equals whatever the user typed in now there's nothing wrong with that in some situations you would want a shareable or recreatable url like that however oftentimes i think post is the right tool for the job also just to make this clear if you go up into the address bar and try to manually visit this url of slash result and push enter you'll see cannot get slash results this is because when your browser just visits a url remember that's a get request we didn't set up a route for a get request to slash result we only set a route up if it's a post request to this url right so for example we could go into our code and set up app dot get a get request route for slash result and just have a function that says response.send why are you visiting this url and then if i stop the server and start it back up again now when you manually try to visit that url we see why are you visiting this url but if we actually go to our home page and submit the form that's a post request so that actually works or i should say it uses the route for the post request cool at this point now that we understand the basics of routing and get requests and post requests let's actually try to use the data that the visitor types in right so let's try to evaluate whether they type in blue or not what color is the sky on a clear day so if they type in the right answer we would want to say that is correct or if they type anything else in we would say sorry try again so let's jump back into our code and within our route for the post request inside the body of our function here right before we respond by sending anything back right here we would want to be able to access the value that the user sent over now up until this moment we have not used the request object that express gives to our function and as you might have guessed this is where it comes into play right when we want to get info about the incoming request so wouldn't it be nice if we could just say request and then look inside the body of the request and then whatever property or input value we're interested in remember we named that input field color wouldn't it be nice if we could access their value by just typing this well we can however this feature is not enabled by default in express so before we can do this let me actually get rid of that i need to show you how we enable that up towards the very top of this file so maybe right after these lines where we import express and then create a new instance of it so right here where my cursor is let's say app and then we want to use a method called use this is how we can use a piece of middleware globally now don't worry i don't expect you to know what middleware is just yet i'll explain that in just a moment or two for now though inside these parentheses let's type express dot url encoded parentheses to call that give it a configuration object so curly brackets say extended give it a value of false now this is just boilerplate standard option code so you don't need to memorize that you really don't need to memorize any of this line this is boilerplate however this is a built-in part of express and what it does is it'll look at the body of the post request and it will add super conveniently named properties to our request.body object so that it's really easy to access the values the user submitted big picture we just used our first piece of middleware and we can learn what middleware is in just a moment however with this line of code in place now back down in our post request route right app.post inside the body of our function now we actually can just say request.body.color or whatever you named that input and this will let us access whatever the user typed in so inside the body of this function let's give ourselves a clean slate and let's just say if parentheses curly brackets let's have an else block as well for the condition we can just say if request.body.color if that equals blue well then we would say response.send congrats that is correct otherwise in the else block say response dot send incorrect please try again okay let's go ahead and save this and test it out now if you're anything like me it's rather annoying to have to stop your server and restart it every time you make changes so instead what we can do if we say npx nodemon right as in node monitor and then the name of our file so main dot js push enter that will take just a moment to complete it's going to go out onto the internet download the package called nodemon and then use it to run our file and what this does is now anytime we save a change to our file it will automatically quit it and restart it for us so we don't need to keep restarting the server anyways now back in the browser if we refresh the home page if we type in something other than blue hit submit incorrect please try again if we go back and actually say blue submit congrats that is correct okay next this has nothing to do with express but just to make our form a bit more robust what if the user typed in uppercase blue or all capped blue or what if they started with a space and then typed blue and then entered another space so we would still want those to be true or correct so what we can do in our if statement just say if request.body.color maybe call dot trim to remove any white space at the beginning or end and then also call to uppercase and then we can just check against all uppercase blue right as long as this is true so if we save that nodemon will automatically restart our server for us and if i type a space and then blue halfway capital halfway lowercase i still want to give the user credit this is correct in my opinion hit submit cool congrats that is correct okay now at this point let's answer the question of what is middleware middleware is such a central concept of how express works that we really can't skip over this so a piece of middleware is really just a function that can access and modify the request and response objects now up towards the top when we used app.use whatever function we provide in the use parentheses that's going to be used globally or we could call it an application level middleware however we can also apply a piece of middleware just to individual specific routes we would call that a router level middleware and that's actually a much better way to really see and explain how middleware works so let's give ourselves a quick task so that we can walk through creating a piece of middleware together so for example on our home page imagine we want to show a message that says whether it's currently raining or not where the visitor lives now we're not actually going to look up someone's location and fetch real weather results we're just going to fake the actual raining or not data because that's not the point the real point here is just that oftentimes you don't want to do everything for a route in one function instead it would be nice if you could split the task up into multiple smaller byte size functions this is better for organization purposes and in case we need to reuse the function elsewhere so check this out when we define a route and express instead of just giving it one function here as the second argument we can actually give it two or three or four or 10 or 20 functions and express will just handle calling them one by one one after the other so for example after the url and in between the second argument of the function so right here i could just start typing in another function right so a comma here and then where my cursor is now you could either spell out a traditional anonymous function or an arrow function or to stay organized you could create a named function why don't we go ahead and do that so let's imagine we name this function get weather the main idea that i want to get across here is that when you're defining a route you can list as many functions as you want so you could have get weather comma get pizza come on walk the dog and then if you wanted to reuse these functions elsewhere for other routes you absolutely could but anyways we just want the one get weather okay now let's actually create this function so up above i'll say function git weather parentheses curly brackets now just like before when we had request and response you always need at least those two but there actually is a third parameter and we typically call it next now we don't need it here for this function but when we're creating our middleware function our getweather function let's say request response and next so now within the body of this function we are free to use request and response or we could modify them we could add on new properties to them and then when we're actually done we just call next and that way express knows that this function is done this piece of middleware has done its job and it's time to move on to the next function for a given route so for example in our function let's just say maybe we add on a new property to the request object and call it visitor weather and let's just set it to equal true which means yes it's raining right this is just a quick proof of concept example but you're free to modify the request and response objects and then once you're done you just call next so altogether when someone visits our home page that function is going to run express we'll call it express will see that we called next so then it will move on to our next function which is just this function we already wrote the point is is that now we can access this request.visitorweather property so in our html maybe after the form i'll just have a paragraph and i'll just use a ternary operator dollar sign currently brackets and say if request dot visitor weather if that's true then let's say it is raining colon otherwise say it is not raining let's go ahead and save this and nodemon should restart the server for us back on the home page if we refresh cool we see it is raining test this out if we set that in our middleware function to be false give it a save refresh it is not raining so really that's all there is to middleware it's just a function and you can have as many functions as you want for a route and you just need to be sure to call next so that express can actually move on to the next function now you can use them for individual routes or if you say app.use it's going to use your function for all routes and this is why the ordering of our lines of code matter so when it's middleware for a specific route obviously you can control which function or which piece of middleware runs first by just controlling the ordering that we see here however when you want to use a piece of middleware application wide with app used that's why the ordering of your lines matter so that's why this line of code needed to come up above any of these lines right so that way this piece of middleware that adds request.body properties of the user's form inputs that way that actually lives on the request object by the time we need it so just as a quick test if we wanted to apply our get weather function application wide you could just get rid of it here for this request and then say app.use get weather save that and it still works just the same so big picture middleware is really simple it's just a chance to manipulate the request and response objects which is really all we need when you think about building a web server really all a web server is is listening for an incoming request and then responding now before we move on to the next topic i do want to make it clear that you don't need to call next sometimes you will want your piece of middleware to sort of intercept or end the current request so for example let's imagine that if it is raining we don't want the regular website to display at all we just want to respond back with a bit of text that says please come back to our app when it's not raining so in that case we would only want to call next if it's not raining so we could get rid of this next call here in our get weather function and instead have an if statement and an else block and say if request.visitorweather if this equals true then let's just say response.send right so we can end the request or respond to the request right here in this function we don't have to pass it on with next so we could just say please come back to our app when it is not raining in the else block we actually could call next right so now if we set visitor weather to true and save we should just see yep please come back to our app when it is not raining however if we set this to false save now it does work right because it's not raining now if you use your imagination a little bit you can imagine that you can use this middleware pattern like this to lock visitors that have certain content that they don't have permission to see or if they're not logged in then show them a message to please log in right you can intercept a request asking them to log in if they are logged in then you could pass them along to the next function for that route with next the possibilities with middleware are endless but hopefully you get the general idea now before we bring this video to a close there are a few quick topics i want to cover so right now let's address the fact that spelling out html in the middle of a function like this is not ideal instead if our app needs server generated html we probably want to implement a legitimate templating engine now in the world of javascript there are many different template engines to choose from i'm not going to tell you which engine you have to use the choice is definitely yours to make so there's a really popular one called handlebars so we can see it has almost 7 million weekly downloads there's another fairly popular one called pug it used to go by the name of jade it's also fairly popular slightly over a million downloads per week pug is fairly trendy and hip and cool i'm not personally a very big fan of it because i don't want to have to learn an entirely separate language just to output html now that's my personal totally subjective opinion a lot of people absolutely love pug i would say when you're just starting out if you're a beginner don't waste your brain's horsepower trying to learn yet another language you already know the basics of html so i would just stay away from pug until you're maybe a little bit more advanced and understand the bigger picture of javascript and back end and front end but that's just my own bias shining through anyways the template engine that i recommend is called ejs you can see it has almost 7 million downloads a week i'm not saying that ejs is the best template engine the reason i recommend it is simply because it feels like it's the least opinionated and there's really not a whole lot of new things you need to learn in order to start using it it's really just javascript which we're already familiar with so let me show you how we could start using this in our express project we just need to go into the command line and press ctrl c we want to install the package so it's npm install ejs now again after this video if you want to try handlebars or pug absolutely go for it but in this video we're going to use ejs okay now that we've installed that we can go ahead and tell nodemon to start monitoring and running our app again for us so again that was npx nodemon and then the name of our file okay now up towards the top of our file we just want to tell express to use the ejs view engine so first of all actually in our overall project folder why don't we create a subfolder named views technically you could name the folder anything you want templates pizza whatever you like but just so it makes sense why don't we call it views okay now towards the top of our express file as long as it's before any of our routes we should be okay so up here let's just say app.set quotes view engine comma ejs okay then let's also tell it to look inside our views folder for the actual viewer template files so app.set let's say views comma and then we're going to give it an absolute path towards our folder where all of our templates will live to create an absolute path let's actually use the path package that's built into the core of node so up at the top here const path equals and then just require in path down here for the second argument for views it's just path dot join call that underscore underscore name for the current directory comma and then the name of our folder is views okay now let's actually just go create our first template file in our views folder so i'm just going to click new file you could name it anything but we want it to end with dot ejs so why don't we just call it home dot ejs now inside this file you're free to write html so you just say doc hit tab and in the body section i'll say welcome to the home page hit save okay now back in our main javascript file let's find the route for our home page here it is right app.get just forward slash and let's actually just completely empty out the body of this function so we don't want any of this response.send instead of response.send now we're going to use response dot render right we don't want to just send a string of text that we're defining right here we want to render a template so you just say the name of the template which we named ours home right home.ejs and for now that's it so if we hit save back in the browser cool welcome to the home page so now back in that file we could create our form again right in the ejs file so right below that we could say form action should point towards slash results method should be post inside the form let's have an input with a type of text name was color let's have a submit button and have a little message that says what color is the sky on a clear day give that a save refresh if we say blue perfect however i do want to show you one big distinction when you're actually using a template engine so if we go back here the question becomes well what if we want to do something dynamic or access a dynamic value within our template right so previously within our home page route we were looking at the request.visitorweather property now by default you cannot access the entire request object inside of a template however it's very easy to pass any data you want into your template so all you need to do when we say response.render as a second argument here you can say comma and now you can just give it an object with different properties so just as a quick example you could say is raining should have a value of request.visitorweather comma just as a quick test why don't we have another property and call it pets comma and set that to be an array and inside this array let's just have two pets so the first object let's give it a property of name set it to meowsalot comma let's have another property of species set it to cat inside this second object let's say name should be barks a lot give it another property of species and set it to dog big picture when you call response.render the second argument can be an object with any data you want to pass into the template so now it's going to be super easy to access is raining and pets so if we save that then back in our ejs file in a way ejs is similar to php so by default this is just html but if you want to do something dynamic you drop into ejs so maybe below the form let's say we want to work with that is raining property so it's less than percentage and then if you just want to simply output something you can say equal sign and just the name of the property right is raining and this on its own will output it so if i refresh we see false right because the request.visitorweather was set to false or within ejs if you want to run a little bit of logic or just regular javascript code you don't need the equal sign to output so it's just less than percentage now inside here we could just have a regular javascript if statement so we could say if parentheses curly brackets even have an else block and just say if is raining okay then in here you could do something with javascript or if you just want to output html then right here you could just exit out of ejs and then on this line you could enter back into ejs you get the idea right here you would exit it right here you would enter it so here it could say if it is raining have a paragraph it is raining else say it is not raining give it a save refresh perfect and really quick let me show you how we could loop through our array of pets so below all of this let's start working with our pets array so just less than percentage and then close it out inside there we would want to start working with our pets array so pets in javascript arrays have access to a method of four each so i just say pets dot for each inside here let's give it a function let's just use an arrow function so we only have one parameter we don't even need parentheses we could call it x but why don't we just call it pet as in singular the current pet that's been looped to and then we want the arrow symbol and then curly brackets let's drop down now right after the start of the body of our function why don't we drop out of ejs because we really just want to output a little bit of html for each item in the array and then down here right before the ending or closing of the body of our function let's just jump back in to ejs okay so right here we're free to output html let's say list item maybe and let's just have the pet name and then in parentheses they're species right so it would be name parentheses species so instead of name here hard-coded we could just say ejs and to actually output something instead of just running javascript and it will automatically escape it for us we can just say equal sign so that would be pet dot name close out of ejs and then inside the parentheses so the parentheses have nothing to do with ejs i actually want to output those in the html visually but then we would just say ejs equals pet dot species drop back out of ejs let's give this a save and test it out back in the browser if i refresh cool we successfully looped through that array now i realize that was probably difficult to follow along with all the dropping into and out of ejs please rest assured that you can find a link in the description of this video with a github repo where you can find this finished code okay now there are just two more quick things i want to cover before we bring this video to a close so we're in a html template right now what if we wanted to link to a css file right so up in our head section you would imagine we'd want to say link hit tab and just maybe point towards a file called style.css the question is though in terms of our folder structure where would we place a stylesheet so that the visitors of our website actually have access to it because the whole point of a server is that the visitors can't access our source code right the visitors of our website they're never going to see this actual ejs template file with our source code here and they're definitely never ever ever gonna see the actual contents of our main js file the whole point of a server is that visitors only see the actual content that you send back in your response so we do want to specify a special folder to be our public folder and then that's where we can place things like a css file or a javascript file that we do want the whole world to be able to easily access so in the root of our project let's create a folder you could name it anything but why don't we name it public and then towards the top of our main.js file let's just use a piece of app-wide middleware so just say app.use and then inside here we're going to call a built-in part of express so express dot static and we just want to serve up a static folder right our public folder so path dot join underscore underscore der name comma public okay now inside of public we could create a css or javascript file and then link to it in our html right just like you've already learned how to do throughout this bootcamp series so just for a quick test if i say new file style.css and then if i say body color purple give it a save back in our ejs or html we're already pointing towards that and actually to make this work with all routes and all url patterns you would want to include a slash here so that way even if you're in a nested url it knows to look at the root of your server or domain for style.css so if we save this and refresh everything is purple and you could obviously do this exact same thing down right before the closing body tag to load in a javascript a front-end client-side javascript file okay in changing gears the very last thing i want to show you in this video is how to send json instead of html as your server's response right so for example you could imagine that on our website someone maybe would want to visit slash api pets and they would want to get just raw json data about our different pets so how would we serve up json instead of html well let's go do this right now let's go set up a route for a get request to slash api pets so in our main js file maybe down towards the bottom let's just create a new route say app dot get slash api slash pets give it a function so request dot response arrow symbol and now instead of response.send or response.render there's actually a method in express called response.json that's it you just give it an object or a bit of json and it will convert it into plain text for you and in order to save a bit of typing i'm just going to scroll up and i'm just going to grab this array with the two pets in it so from the starting square bracket to the closing square bracket copy that down here in response.json just paste that in hit save and now if you visit that url cool now talking about json briefly at the end here segways perfectly into what we're going to cover in the next video having said that that does bring the technical aspect of this video to a close congrats on making it to the end of this video the question now is where do we go from here so in our next video i want to talk about how we can connect the back end with the front end so towards the end of this video we saw that you can send back json as the server's response and as we've already learned earlier in this bootcamp series it's very easy to fetch raw json data on the fly with client or front-end javascript so in our very next video we're going to set up a very basic super simple api this will allow us to do a few things so we'll see how our server's data is available from anyone right you could access it from a native ios or android app or or and we'll also see how to leverage that data from perhaps a react front end i think seeing how all of these things connect and work together could be an aha moment anyways as always if you're enjoying this series so far i'd appreciate it if you could share the link with your friends and family take care i'll see you in the next one [Music] you

Channel: LearnWebCode

Views: 22,062

Rating: 4.9698925 out of 5

Keywords:

Id: z7ikpQCWbtQ

Length: 47min 38sec (2858 seconds)

Published: Mon Oct 26 2020