 Okay so second part of this lecture is all about Node.js which is really what we call server-side JavaScript or to make it a bit more appropriate we do actually browser less JavaScript so we run JavaScript files outside of the browser. Now what we know so far is mainly over here and sort of this connection here so we have seen how to send requests to a server and of course the most basic way of doing that is just requesting a URL so every time you open a website or you click a link in the internet you send an HTTP request somewhere. The other thing we have done is we have used JavaScript to send AJAX requests so from our code we have sent an HTTP request to the server and gotten a response while the HTML file was loaded so we could request things without reloading basically. Then we have produced content and structure in our HTML code we have made it pretty hopefully using CSS and finally we have executed JavaScript but only in the browser so far and what we do now is we go away from that we move to the server and we still want to execute functionality we'll still do that with JavaScript but you can do a whole lot of different things here and as sort of the arrows indicate here servers are not just execute a functionality but a lot of that has to do with accepting handling requests and sending appropriate responses and it doesn't always have to be to a client it can also be another server that requests something so that's very common. Now we directly jump into Node.js what is Node.js all about? Node.js is a JavaScript script runtime which is built on the V8 JavaScript engine that runs for example in Chrome and it's just like a runtime environment so every browser contains some kind of runtime environment and in a way it's similar so it's very similar as well to other runtime environments for programming languages for instance when you run Python scripts you go into your terminal into your console and you type Python and then you have a program so it's very similar to that it's quite different from what we have done with JavaScript so far so so far what we have done is you write a JavaScript file you have an HTML file that somehow includes it and you open that HTML file and the browser then goes through your HTML it finds the the script tag that includes the JavaScript and it executes the JavaScript using the browser's engine and the problem with that is it means that JavaScript can only be executed in a browser on the client side so you have to have this browser you have to have this HTML file and that's not very that's a very specific use case let's put it like that it's only for websites. What we would like to do instead is run JavaScript files in our command line in the terminal so what you can actually do using Node.js is you build command line tools you can run it in your terminal and that also enables us to run it on a server which we then call server-side JavaScript so we'll jump right in and then later we discuss a bit more the implications of doing that maybe but the most basic thing so first you have to install Node.js and if you have no idea how to do that then I would just recommend going to the link so you just go through the to the Node.js website and the Node.js website directly actually points you to download here it shows macOS because that's what I'm running but there is documentation how to use it how to install it for the different operating systems and it should not be too difficult the important thing is once you have installed it in your console you can type Node and it actually does something so something happens and usually if you type Node version it shows you what kind of version you have installed you don't have to have the same version as me just in case you're wondering I probably should update it again but that's not the most important thing so for the kinds of applications we write the versions should not make a big difference now what we'll do is we'll just continue as we did so far we write the JavaScript file hello Node the classical hello world it's just a console log there's nothing new here you should know this definitely and we just save it in a regular JavaScript file so as we have done so far the only thing we'll do then instead of going into a browser and including our JavaScript file as we just run it in the console we just say node app.js now let's see what I actually have something like that yes so I have console log hello.node and the classical way here is just to have an HTML file that includes it so that's what we have done so far and if I show you that of course there should not be any surprise hopefully at this point in time so if I just run my app.html and I look into the console you see hello node so it's just a regular JavaScript file but if I then go into the console and I run it I'll just get the output here so this is of course now much more what you're used to in programming what you have done before so that's a good thing now what we have done so far in JavaScript had we wrote a bunch of functions but quite often we did stuff with the HTML file we added elements we read input fields or so on and if you don't have an HTML file it doesn't make much sense so the question is what can node.js do and what can it not do the first thing as I said there is no HTML file so there is no DOM there is no document there are no HTML events so all of that does not make sense anymore and if you write something like document.getElementById node will complain that it doesn't know the document element it doesn't exist instead node has a number of modules a number of additions that are missing in regular JavaScript so for instance in regular client-side JavaScript you cannot read or write files from or to the hard drive and that's simply a security thing because you load JavaScript files from the internet you don't want them to write stuff on your computer so you cannot do that you cannot access a database you cannot write the server but all of that is regular stuff you want to do in a server-side setting so all of these things are added in node.js so suddenly you can read files you can access the database like a MySQL database or a MongoDB database and you can write an HTTP server so you can actually handle HTTP requests and most of these things we couldn't do in client-side JavaScript and they also might not make sense but everything we have done so far in this specific lecture in lecture 14 that this keyword arrow functions modules can also be executed using node.js even though this is a slightly different story in node.js node.js comes with a bunch of standard modules that are inbuilt so there is one module called HTTP which you can use for handling and for actually sending HTTP requests there is FS which is a module that you can use for what's called stands for file system so you can use that to read or write files from the disk there is a crypto module cryptography and encryption there is an assert module which you can use for assertions for example in testing so these are kind of standard things and if you want to use any of that you just use the require statement so for example you just define a variable my HTTP require HTTP which means please import the HTTP module and then you can use it you can do my HTTP.get to make a get request to send a get request somewhere else so that's very similar to what we did before with axios for example and of course you can write your own modules that's why I've covered it in the beginning you can actually use the regular module pattern using an IIFE but node.js has a module mechanism it has introduced some specific keywords some code and make it very easy to write modules because that's a common thing so the way this works remember I have my SSID I have the log function I have the get function and now instead of all the fuss with putting brackets around it and returning the right stuff all I do is I say module dot exports dot get it I get SSID so I say please export this as a part of a module and then I put it in a JavaScript file and now if I'm in another file and I want to use this all I have to do is I use the require statement so I say please load the my module file note that I'm leaving the JS away here so it just means that if the JavaScript file is in the same directory dot slash means it's the same folder please load this and then I can just use this function I cannot use the other things so by default these are not accessible in note but everything that I have exported module dot exports is accessible using just the my module dot get SSID so this is much much easier and the require statement here as you might have noticed it's exactly the same I stated here for these kind of general built-in modules so whether you write your own module or you use an existing one doesn't matter the difference is that I just write HTTP here so it's just kind of a global name whereas here I write I point to a file and then only get SSID is available so that's perfect that's exactly what we want to do I have also so this is all the code I'll upload for this lecture there is all the example code for the first part for example on arrow functions so you can test that but I have for example also built the module so here is exactly the code for the for the node module I have my SSID I have the lock function I have the get SSID and I just do module dot exports and this is no JS syntax this won't work in a browser and then if I'm in another JavaScript file I can just include it and run it so we can test that if I use if I use node to run this module user then this file will load my module dot JS and it will execute the get SSID function so you see that it actually prints the SSID we can also test just to see that that the other things are not available so if I try to directly access SSID for example so that's the variable name here if I try to do that hopefully it doesn't work yeah so you see it says undefined I don't have access to the variable that's exactly what I want the other thing that's important at this point is that the module dot export statement here and the require statement these are node specific syntax so if I try now to write an HTML file that includes something that is node JS syntax it will not work so we have seen that some things don't make sense to run in node JS if it's anything to do with HTML the other way around that of course also happens if I have JavaScript files that include specific node JS syntax so here we see reference error require is not defined so the browser does not know how to deal with this statement here plain and simple and the same would be the case for the module dot exports so even though both this JavaScript there are slight differences in the syntax and that's an important thing to it to learn that will cause some problems in the beginning but you'll figure that out quickly now this is cool we can run some some h some JavaScript code we can write our own modules but let's actually start with the kind of things we want to use node JS for and the most basic thing is an HTTP server so we want to have something that actually responds to HTTP requests what we can use we can use the inbuilt HTTP module so we can just say require HTTP there's one interesting thing I'm doing here I'm using the const keyword I haven't done that yet but that basically defines a constant variable that is not changing so it's like again like in many programming languages you can say this thing is constant this shouldn't be changed what I'm doing here is I import the HTTP module I define where it should run and now this is running on localhost it's my own machine so I just say please just listen to my own input sort of the old machine on port 3000 and that's just a random port I've chosen typically everything over 1024 is open so you can just decide which number you think fits what I then do is I create a server and HTTP has a specific method for that so I just say create server and I just say what's in here is a callback function and this callback function is just whatever is being called when there is a request coming so my server here says whenever there's a request send status code 200 set the content type to text so I'm sending text back and this is what I'm sending back welcome to my Node.js HTTP server so basically this callback function just handles all the requests and you have two parameters you have the request parameter that contains all the details like which method which body content like what is being sent what are the headers so you can read all of those things and the response is what I'm sending back so you see here that I'm actually changing the HTTP response object I say the return status code is 200 and after I've done that I have my server object I just started I say okay please listen please listen to any kind of request that comes in on port 3000 on local host and once the server is started I just again have a callback function I just print server is running so that's what I'm doing let's try this the important thing is this listen statement here is blocking so once this thing runs the server just runs it doesn't stop and that's how we want it to be because the server should always listen what's coming what's going on and whenever there's a request coming it should answer it so let's see where I have saved it probably in HTTP server yeah so that's exactly the code so all I do is note HTTP server and you see now this is the the server running output so we're here and you also see that I'm not getting back to the regular console so this is just a blocking command now the server is running and is listening and if I now go into Firefox and I just type 127 0 0 1 or local host exactly the same and then I need to do Cologne 3000 so that's the port if I do that I'll exactly get welcome to my Node.js HTTP server so I'm just getting this text back that's all it is so that's already nice I have written a server we can finally do something I could run this code on a different computer so now I'm running it on my own computer and I'm accessing it from my own computer that's a bit boring but later on we could use the same code and deploy it somewhere on the cloud and then it's really on the internet it's accessible so this is just for making it easier to demonstrate this but the same code would work if it runs on the internet with minor modifications the problem here is this server doesn't do a lot because it answers whatever you send it always answers the same thing so whatever request you send is just answered with 200 welcome to my Node server that's not very practical what is used very commonly is to use an additional framework to do these things and in this course we'll use the express module the express framework which is just a kind of a collection of libraries that makes it very easy to write these kind of servers because if I would like to do this in a better way I would actually have to have a lot of if statements here that read the request for example if the request is a post request do something if it's a get request do something else if it's a get request to a certain URL do something if it's a get request to another URL do something else so we would just get a long list of if and if else statements here and there are just libraries that make this look nicer so express is one of them that's the that's one of the only frameworks we'll use in this course now the interesting thing with express is it's an external module it's nothing that is included in node so these are kind of the things that note comes with the inbuilt express is not one of those it's sort of an external thing and that's the other reason why we use it to show you what you can do how you can include other external modules that you haven't written yourself now in client-side JavaScript we also did this for example we had Axios so we had to do a script tag and we just pointed it to some JavaScript file on the internet and if we did this then we could use the Axios functionality we don't have tags in note so we cannot do that instead there is package management so there is a tool that comes installed with Node.js which is called npm node package manager and this one makes it extremely easy to install dependencies install external libraries so for example if you want to use Axios in node we just type npm install Axios npm installed and just checks what is needed maybe Axios needs some other packages and so on so it installs a ton of modules and then you can just include it afterwards so let's see what I have this here so I have a script called Axios.js if I just show you that I'll show it to you in VS code that's easier to read so all I'm doing is I require Axios and then I can do Axios.get I'll just do a get request now if I run this it will throw an error it complains it says cannot find module Axios and that's because I haven't installed it so it doesn't know it's not inbuilt in node it doesn't know where it is so first I have to install it and that's where I do npm install Axios and now a lot of things will happen certain things are fine there are some warnings but it actually looks like it worked so in installed Axios and if I now run the code again there is an error because I cannot connect to localhost but it has actually worked it has done something it has executed this line so now it knows what Axios is it can do a get request maybe if I run my server at the same time this will actually work let's try so now I have something now if I do Axios.js again then everything works it doesn't do anything but apparently the get request goes through there is no error so this is what we do with npm install it's a very useful tool because it just does everything automatic and we'll now do that to write a small HTTP server that actually does different things we'll put all of these things together so what we want to do is we want to run express that's a framework and what we need to do for that is first install it so we just do npm install express and I think it's just express but I have to look that up at least something happens and express has been added so now I've installed express and I can use it in my code and here is the code I'm writing now it looks different from before I still have my hostname and I have my port and I still have this listen statement that is very similar to what I had before this would just starts my code but I have some additional things so I include the express module say please use express.js and then I have to start it so that's just how this framework works I have to initialize it I have to say please run express and whatever is returned I put into app this is just the way express works you just have to look into the documentation how it works the good thing is now down here I start my server but now I have two lines here and what you see what they do is they handle different kinds of requests so the first one only handles a get request so if anything else comes if a post request comes this is just ignored and it only handles a get request that goes to slash so that goes to our root URL and then the code is is pretty much as before we just have the response and we set the status to 200 we sent hello world back that's all we do and the next one here only handles a post request and it only handles it to slash test so all the other URLs are ignored and we do again the same we just returned 200 slightly different text but that's all we do so now instead of having all these ridiculous if and else statements I just have these app dot get dot post dot delete and I can just put them under each other and I can handle different kinds of requests to different kinds of URLs and I'll just show you that so I have my express HTTP server here that's precisely the code from the slides and I'll just execute that so let's just do note express HTTP server if I have installed express properly then this should just run yeah and it says express app listening blah blah blah it again blocks our server is running now there's two things I can do I can run the get request to slash let's start with that and that's again the same thing I just go to localhost 3000 and I do slash but it's implicit so I the slash I can leave away if nothing else comes if I just do like that you see that I get hello world if I do dot slash it will give me exactly the same so there's no difference now to test the post request I'll probably use postman it's the easiest I'll just create a new request set add request post express yeah let's get rid of the update so and I want to do a post request the post request goes to localhost 3000 and if we look into the code you'll see I should only answer to slash test so if I do anything else if I do slash and I send this should not work so it says 404 not found error cannot post didn't work if I instead do slash test then I get test post 200 back so I get exactly this as a return value so this is now very practical because I have basically in my code in few lines I have defined exactly which requests I'm replying to in what way and I have nicely separated that so I don't have any messy if else statements so that's the the advantage of using something like express frameworks that make your life easier express can do a whole lot of other things that we might not see in this course but this is definitely already a good start what I'm doing here is called routing it's a very common concept in in HTTP servers but also in in for example front end frameworks that you say if a certain URL is called with a certain method then run this code if something else is done please run this code and so on so I just route the requests to to a different portion of my application okay so that's what I've done now there is some more stuff I want to do which has to do with with all of this npm install so I've installed Axios I have installed express and because I have done that I can run my express server the problem is I have installed this locally so it's just in my folder here I haven't displayed this but when I did npm install what happened is that this folder called node modules was created and in this folder there are all the dependencies so if we look into here there will be a lot of stuff but one of the things you see is Axios and the other thing you see is express so those are the two things are I installed all the other stuff are dependencies so express for example needs to have something called body parser and other things so that those are just other packages that are needed but the problem is now if I want to share my code so I want to give this express HTTP server to someone else it will not work so what we can do just to this to show this is I just copy this file somewhere else for example in the folder above and I just try to run it there and then you see that we get an error it says cannot find module express so our application doesn't run because I haven't installed the right things and that's a bit of a problem because usually we want to be able to to exchange our code we want to give it to someone else to run or we want to install it in a different directory or on a different computer and we need to have all the dependencies and of course what I could do is I could just send an email to the person that wants to install this server and say okay you need to do npm install express for example then it will work the better way of doing that is usually and that's there are a thousand different ways in npm there's a specific way to say we share the information so we share software with other people and we define what is needed for that so what we have done so far is we have just done npm install express which means it just installs the stuff in our current folder so it creates this node modules and puts everything in there you can do something as npm minus g that installs it globally so it installs it everywhere on your computer but that still doesn't help us if we want to run it on a different computer so finally what we can do and what we will do now and for the remainder of the course is we define an npm project so we define exactly which modules are needed for this software to run and the way we do this is to call a different ways but the easiest one is to just call npm in it so let's do that we just make a new folder express l14 and I just want to say here I want to create a new npm a new node project I do npm in it and now I get a lot of questions I get okay what's the package name if I press enter it we'll just use this the suggestion here that's just a folder name let's do that version one one I can do a description a basic express server entry point what what is sort of the starting file let's do index js test command we don't do anything git repository we don't have I can add keywords express l14 author I can add it's just some information you can have a license is that okay yes and what has happened now if we look into the folder it has created a single file package.json and that file just contains first of all is a json file so it's json format you should recognize that it just contains all the information that I have just been asked sort of what's the name of the project what's the version what is the the main file what is the test command most of these stuff is is not really needed we don't care and so far there's nothing in here that is essential but we'll get there now the interesting thing is now in this package.json file we can also save information on which modules which dependencies are needed and all we do is instead of running npm install module name we just do npm install minus minus save and what it does then it installs the module just like before but it also saves the dependency and the package.json file so it adds the information that this is something that needs to be installed so I can show this if I now do npm install express and I add the save command then it looks fairly similar to before if we look at this you see that the node modules folder is there in the node modules folder there is our express so it has been installed that's good but the other the really relevant thing is if we look at the package.json file you see now this part here so there has been a line added that says the dependencies for this project are express version 4.17.1 or higher so now we have actually information on what is needed and now let's say we add some other stuff we don't really need this but for example let's say we also want to have body parser we also wanted to use axios so I just add some modules then you see that all of these things are added here and now let's just copy my file from before express HTTP server I'll just copy it here as index.js so now I have it here and I can run this of course I can run node index then we just have our express app as before but now the important thing is if I wanted to give this code to someone else if I want to install it somewhere else I just can give that person the JavaScript file and the package.json so that's all the information they need if we try that now index.js and package.json and I want to install the app somewhere else for example in temp I give these two files to someone else and that person now can go there and if they try to run index.js it won't work it shouldn't work probably I have done something wrong I have probably installed express globally bad example but if they want to do if they want to install all the dependencies all they need to do is npm install and now what npm install does is it reads the package.json file and it create it downloads everything that is needed so now you see that because I've done npm install we have node modules and we actually have all the things we have defined Axios body parser and express have been installed automatically and now it works now this was a bit lame because it already worked before so let's try that somewhere else for example I'm pretty sure that here this should not work express so if I do node index yeah now we have a problem we have not installed express but now instead of telling the person you have to do install express you have to install axios blah blah blah you just run npm install and it will just look up the package.json file and now after you've done that you can run the server no problem so that's now this package.json file is now the key to make our code exchangeable we can give it to someone else that person can just run npm install and everything that is needed will be installed automatically so you can just run the code wherever you want and that's an important thing to package management that makes it easier to move code to a different location to a different computer to a different folder so that's what we've done we have saved all our dependencies in the package.json file we just run npm install and this install command just looks into the file and installs everything and that's really what what an npm project is about it's basically this package.json file and everything else is just installed automatically so the node modules that's the folder where all the modules are installed for this project the package.json contains the actual project information it contains all the dependencies and the package.loc is actually just something used by Node.js to calculate dependencies this can be deleted every time you run npm install it's just created from scratch one important thing is if you share your project or if you submit an assignment in the case of this course the node modules folder and the package.loc file you should exclude so those things do not submit them especially the node modules folder takes a lot of space so we don't need them we only need the package.json because there is all the information on what needs to be installed and of course we need to have the JavaScript files otherwise it doesn't make sense so just to show you this in this example the node modules folder is not too large but still it has two megabytes and it has 454 files and if you have more dependencies this thing very quickly gets very large so it's not a good idea to share this when you upload your project somewhere. Okay so those are npm projects and we'll use them a lot now I'll round up this introduction to Node with a pointer to something that is called learn you node or workshopper because my slides don't have a lot of examples on Node.js it's just a quick introduction I will do some more in the live session but if you just want to use the slides to solve the assignments this will probably not be possible so the idea is if you want to practice use tools like learn you node. Learn you node is a learning environment that is actually written in Node.js you can you can use this to write basically tutorials for different tasks programming tasks web design tasks in this case ironically it's a Node.js application that is written to teach you Node.js look at the literature reference number four for for any installation instructions but you can just install this using npm so it's very practical the good thing about it is it asks you to do something but you can automatically check your solution so there's an inbuilt tool that checks what you have produced of course this is not meant to just let you do your stuff on your own and I don't care you are of course welcome to ask questions on piazza anyway and please go to the labs so this is just if you want to practice I'll just show you this so I have actually installed Node.js learn you node I have installed that globally so there is nothing special there but it's just a npm install g learn you node so it's just a global installation I have done that and once you have done that you'll get this learn you node command and you just run it and it looks like this good old console application but it has basically different tasks so it goes from basic to more advanced so if you go to the very basic one it says please write a program that prints hello world to the console and then there are always some hints how to do that this is very basic so it starts with to make a Node.js program create a new file blah blah blah and this is how you log text to the console and if you're done you can run learn you node verify to actually check that the solution is correct and you can look at these instructions every time you want and that's really how it works so if I want to do for example input output something I haven't covered I could just go in here and it says write a program that synchronously reads a file and prints number of new lines to the console or something like that and then there are some hints on how to do that so you might want to use the FS module you might want to use this so it's it's fairly it's fairly good to give you a hint how to do that and you can just do that so that's a recommendation if you want to practice node if you want to get used to some basic Node.js stuff okay so this is where we'll stop lecture 14 lecture 15 then as discussed will be a theoretical one where we all we do is we discuss the representation of state transfer or rest architectural style so it's one style of how to program web services it's extremely common in the web so you will be used to a lot of the things that are in rest already because that's just how a lot of the internet is set up it's a purely theoretical lecture there's no coding going to be involved that will follow them in lecture 16 thanks for watching