okay then so to begin with we're going to set up a starter project using node and express and in this lesson there's actually not going to be any HDMX content or at least there's going to be very little we will be linking to the htx library but that is about it so if you don't care about setting up an Express app or if you're already really comfortable just doing that on your own then feel free to skip to the next lesson however if you want to follow along exactly like me then stick around and we'll set the start project together and you can find that St project by the way on the course files repository right here you just need to select the starter project Branch then you need to hit the code button to download a zip folder of that Branch once you've done that unzip the folder and then open up the project in vs code right then so once you've got that folder open up in vs code the first thing we need to do is install any dependences listed in the package.json file to do that open a terminal and type npm install in the rout directory then hit enter that's going to grab any dependencies for us and put them into a new node modules folder all right so now that's done let's have a quick look around this St project and if any of this goes completely over your head and you're really confused about the code then feel free to check out my node crash course first of all either on YouTube or in net Ninja Pro and that crash course explains all of this stuff in much much more detail so then as you can see I've already created a Bare Bones of an Express back end in the the app.js file first of all we import Express which is a dependency we just installed then we make the express app by invoking that Express function we imported beneath that we use this Express URL encoded middleware on the app which allows URL encoded data sent from web forms to be passed by Express and attached to request objects so that we can access it we'll see that later and you can actually see one of those request objects by the way right here inside this get request Handler so this is how we make Handler functions for different types of requests in Express this one right here is saying that when a get request comes into the app to this endpoint which is just a for Slash the root URL via this Handler function inside that function we get access to two arguments a request object containing data about the request and a response object which we can use to send back a response like this right here using the send method right now we're just sending back an empty response but pretty soon we'll be sending back some HTML above this request Handler we use the express static middleware to declare a folder where all static assets like images and stylesheets can be stored then they can be all accessed from the browser from the root URL and in fact inside that public folder we already have a stylesheet with some Styles in it so we'll be linking to this from the HTML later on now at the bottom of the file we tell the app to listen for requests on a specific port number 3,000 in this case and that means when we run this app locally we can visit Local Host Port 3000 to trigger this root get request Handler right here because remember when you visit a URL in a browser you actually send a get request to the server and generally the server responds with an HTML page now we're not doing that just yet but we're about to so right here where we send an empty response at the moment I now want to send back an HTML page now if you're building a larger application you might want to use a template engine like pug or EGS or something else entirely to create your HTML views which ultimately then get sent back to the browser and when you use those template engines you can inject Dynamic code and content into them which is great but to keep the focus squarely on htx for the rest of this series I've decided that instead we'll just use JavaScript template strings to create our HTML views and Snippets that we can respond with and again we can also inject Dynamic content into template strings which we'll need to do later on when we're working with data Maybe in the future I will do a series also about how to use hdmax with a template engine like pug or something so anyway what we could do then is just create a template string of some HTML directly inside this send method to send back that HTML to the client but instead what I'd like to do is create a views folder and then inside that views folder we're going to have a bunch of different files for different views we'll be using for the application now those views could either be full page views or or they could just be views for small sections of the page and contain just little Snippets of HTML anyway inside the views folder we're going to create a file called index.js so that we can create an index HTML View and notice this is a Javascript file right and not an HTML one because remember we'll be using a JavaScript template string to make the HTML so we can output those Dynamic values inside the templates later okay so inside here we're going to create a function called create homepage template and this function can be called whatever you want by the way it doesn't have to be called this thing right here but the job of this function will just be to return a template string with HTML code inside it so this can be an arrow function that just returns that template string directly right here so that's back tis remember to create that template string now after this we also need to export the function so that we can use it then in the app.js file to invoke it and give us that returned template that template string now if we were to just write some HTML tags inside this template string at the moment then we don't get any kind of emit features or syntax highlighting as we would inside an HTML file because at the end of the day this is a Javascript file and we're working inside a JavaScript string right but there is an extension that I've already installed that gives us those EMT and syntax highlighting features for inside inside a template string for HTML code and that extension is called inline HTML so if you want you can install that first of all if you want to take advantage of those features then once you've done that if you come back to the template string back ticks and add a little comment just before it so forward slash then an asterisk and then type HTML then do another asterisk and then a forward slash and then now this template string will have emit features Auto complet and syntax highlighting which makes these HTML strings much easier to work with and also much more readable as well so now we could add some HTML like a div with a class and that's going to look much much better this time around anyway we don't just want a div tag right we want a full HTML page so that we can send it back to the browser so what I'm going to do now is grab the HTML code from my course files and you can do the same thing if you want and then I'm going to paste it inside this template string so that you don't have to watch me typee all of this out from scratch so let me just very quickly go through this templates dead simple we have an HTML tag then inside that head with a title and also a link to the styles.css file in the public folder right here then we have the body header with an H1 that says my reading list that's for the page title and then down here in the main tag we have two sections one for the book list where later on we're going to dynamically output all the books in a list and then another div for the book four to add new books later as well okay so it's a very simple template for now and what we want to do is send this template now back to the browser as a response right here okay so we need to send that so what do we need to do then well we just need to invoke this function create homepage templates over here because remember that function Returns the template string for us which is the HTML so if we invoke it right here then it's going to send back that template string for us so we'll say create homepage template I'm going to click on this should import it but we need to add for SL index.js to this all right and then we need to invoke that function as well let's save this and then I'm going to run this app by opening up the terminal now I'm going to use nodemon to run the app and what that does is watch for any file changes and when there's a change and we save it it restarts the server for us so those changes are going to be reflected when we visit the application in the browser you can just use node to run the application by typing node and then app.js which is this file right here but it means that every time we make a change to one of our files then you need to cancel out of the process and rerun this now when you install nodemon which you can do by typing npm install and then hyphen G to install it globally and then nodemon press enter to install it once you've done that you can just type nodemon and then app.js like I said that's going to watch for any changes and rerun the server whenever it detects any changes all right so now let's try this out in the browser by going to Local Host and then Port 3000 and hopefully we should see that homepage template all right so now when we view this in a browser Local Host Port 3000 we can see this HTML template is sent back to us so if we inspect over here we can see it's exactly the same template that we just saw in our project that we created so we're invoking that function we're grabbing that template string and we're sending that back as a response and that's now rendered as HTML in the browser awesome all right then so now we have the Express at working there's just a couple more things we need to do the first thing we need to do is hook our HTML page up to the htx library so that we can use HTM Max's features in the browser so we can bring over the htx docks right here which shows us how to get started with HDX and you're going to see it actually is really really simple just a link to a script like the good old days and that's all there is to it so you can either use a CDM or you can download a copy of the library host it yourself we're just going to grab this CDN link to the hdmax library and I'm going to add that then to the head of the HTML that we just created for the homepage so let's go back to the HTML and we're going to paste it somewhere inside the head and then that's all there is to it now we can use any hdmax features in this HTML page okay so there is one more thing I want to make mentioned before we move on to the next lesson and start using hdmax and that is this data folder right here that I've already made and inside that we have a data.js file which contains the data we're going to be using later on so this is just an array that we export called books data and at the moment we just have two book objects inside this array each book has an ID a title and an author and starting in the next lesson we'll be using this data inside our HTML templates when we make a request to the server using hdmax