 Hey folks, my name is Ben Decray and I'm a developer advocate at Auth0. Stick around with me for the next 10 minutes and we're going to get into the first part of a series on building applications with Express. In today's episode we're going to set up Express from scratch and use EJS as a views engine. All right, let's first get started by creating a directory for us to work in and we can install the modules ahead of time so that we can just focus on all the coding. So we'll initialize this as an NPM project and then we'll install Express and EJS which is the templating system that I want to use. And now let's just go ahead and start a code editor visual studio code so we can see what's going on inside here. All right, so we've got an empty project to start with. I'm going to create a new file called app.js. This is going to be the entry point for us to launch the Express app in through Node. So the first thing we're going to need to do is to load Express and then we'll define a new app which is an Express app. Now there's a couple of things we want to do before we start defining the routes. So the first thing we want to do is we want to set the fact that we're going to be using a views engine. So the views that the engine is going to be pulling in are in the views directory and we also want to define the actual views engine we're using. So for that we say view engine is EJS. Another thing we'll want to do is add in a little bit of middleware so the requests that come in can be handled in regards to the payloads that come in. So there's two ways that our endpoint, our web application might receive data. One of them is through query strings and the other one is through post type payloads that might contain JSON. So I'm going to say that we want to use the express.json middleware handler so that any JSON that comes in can be handled and treated as such and also the express.url encoded middleware handler which will handle any URL encoded query strings. I'm also going to pass an extra parameter in here which is an object and I want to define that extended URL encoded data that comes in through the query string. We're going to set extended to true which basically means we're going to be able to handle nested data coming through in the URL encoded query string. Finally before we start the application and before we pull in any other routes I'm also going to add another one in here we're going to pull in express.static and what this allows express to do is to handle before the routes are defined any static files that might want to be served so we're going to be probably having some images some static style sheets files like this that we don't want to create a route for just to handle those we can put those into a static response which will pull information out of a specific directory and that directory is defined in here. So I'm going to create a directory called public let's do that now. So now anything in this public directory will be served before the express app tries to resolve any routes. In terms of the routes that we do want to resolve I'm going to create one here for the home directory and we're actually going to put this in as a separate file so we're going to create an index router in a second we'll define that up in the top and then finally we want to do an app. Listen we're going to listen on port 3000 and we're going to call a function once this is running so we can just log to the screen what's going on I'm going to say express is running on port 3000 all right so we need to define this index router now let's come up to the top here and we'll do an index router and we'll require this from a local file in routes index.js so we'll need to create that file now routes index.js so first of all again we pull in express and because this is going to be returning a router we need a router to use so we're going to define router to be express dot router this one here and now we can define the actual endpoint handlers the get and the post and the put etc we're just going to create one for now we'll say router.get so if there's a get request that comes in for the home directory for this route now this route is also the route for the home directory so this is going to handle any requests to the home directory at local port 3000 and if that gets called this function is going to get executed and into that function we get at least two parameters provided we have the request that's the information that comes in with the request and response which is an object that we can use to handle the response back from our application and i'm going to use the response.render to use the templating system in our case we've chosen ejs so it'll use ejs to return the index route and we're going to pass in there some extra data that the route can use i want to pass in a title and we'll just call that express for now and the last thing we need to do is to export this so module.exports equals router so now when the app.js requires this module the result of that which goes into index router at this point here this index router now becomes the exported router information from this file so before we can run this we obviously need to define this view we've defined the view in app.js as being in the views directory and we've said here that we want to load the index view so let's create a new file we'll do put that in the views directory we'll call it this index.ejs so it's got the ejs extension for ejs templates i'm going to cheat slightly and just paste in some html app before just to save some typing but it's pretty straightforward we can see we've got the header in here we've got the body the title that's passed in through this object here in the router is what's then rendered into the title tag into the h1 tag here as well and also part of the paragraph tag we're also putting in this style sheet so we better make sure this style sheet exists first now remember we can put this into our public directory because that'll get rendered by node through the use static that we defined so let's create a new file in here star sheets slash style.css and i'm just going to put something really basic in for now just so the file exists and we'll say the font family should be sansarif save that save our index file now next thing to do is to run the app so we've got an app.js again as that entry point we should be able to execute this now if we launch this on port 3000 i'll open up a browser here we'll go to localhost port 3000 and we've got our express app the font is coming up in sansarif and if we just split this view so we can have a look what's going on at the same time in both sides just scoot this over a little let's just double check now if we come into the router here and we change this value from express to let's just say express demo we do need to restart node for this to take effect so i'll come down here and i'll rerun this which is now reloaded all of the templates and everything into memory hit refresh hit refresh over here and the word demo comes in one last thing i'm going to do before we wrap this up is i want to create a new script rather than writing node app.js down here every time i want to create a little start script here which will run node app.js we'll hit save on that what this now means is that instead i can just run npm start which is going to do exactly the same thing we've got express running on 3000 over here and it's more of a standard way if you're pulling down a node or npm based project you're probably familiar with running npm start to get the application going so now we've got the consistent start interface here that's all for this episode in the next one we're going to look at bringing in Auth0 as an identity provider so that we can get the person to log in we can find out some information from the json web token about the user's identity well that about wraps it up for this video if you found it useful hit that like button so other people can find out about it too and let us know in the comments what you're planning on using express for i'd love to find out about your projects and if there's any kind of videos we can create to help you on that express journey put that in the comments too i look forward to seeing you in those future videos and until then happy coding