- 00:00:01 hi welcome back in the last video we
- 00:00:04 created our Express project with Express
- 00:00:07 generator I already changed the port
- 00:00:10 number here but it didn't talk much
- 00:00:12 about this well the server file here
- 00:00:15 basically I will do this now and then
- 00:00:18 also talk about the app dot she has file
- 00:00:20 and the other folders because it's very
- 00:00:22 important to understand so that you're
- 00:00:25 able to well actually work with the
- 00:00:27 structure and create cool applications
- 00:00:29 with it so in our server file we're
- 00:00:32 beginning by well having some imports
- 00:00:34 here and that's basically our app file
- 00:00:37 we'll have a look at this in a second
- 00:00:40 which sets up our Express application we
- 00:00:44 import the HTTP module which we did in
- 00:00:48 all the other lectures or videos before
- 00:00:50 when you were you working pure nodejs so
- 00:00:54 this no it's HTTP module then here we're
- 00:00:58 creating a port variable and we're
- 00:01:01 initializing it with this normalized
- 00:01:03 port method here let's have a look at
- 00:01:06 this method we can find it here
- 00:01:08 basically what this method does is it
- 00:01:11 parses a string value into a number into
- 00:01:16 an integer that is natural what it does
- 00:01:19 because here we're passing it like this
- 00:01:21 like a string and then we're
- 00:01:23 transferring it into a number why are we
- 00:01:25 doing it this way because it also tries
- 00:01:28 to get our port from our environment
- 00:01:31 variables so basically here we're just
- 00:01:35 setting the port and then with app set
- 00:01:37 we're setting it inside the Express app
- 00:01:41 which again will handle all well
- 00:01:44 everything for us all the communication
- 00:01:46 with node 0 to say will be handled by
- 00:01:49 Express and therefore the setup which
- 00:01:52 poured to creation of the server and so
- 00:01:54 on everything is handled by Express and
- 00:01:57 therefore we have to set the port in our
- 00:02:00 Express app then here we're creating the
- 00:02:04 server
- 00:02:04 well basically straightforward within
- 00:02:07 normal HTTP module by now
- 00:02:10 and we're passing our Express app as a
- 00:02:13 handler for all the well tasks coming
- 00:02:18 from the server so to say then we're
- 00:02:22 setting the server to listen to port and
- 00:02:25 there's nothing else than what we had
- 00:02:27 here in our server chest find the last
- 00:02:29 project HTTP create server then what
- 00:02:33 should handle the requests in the case
- 00:02:35 in our current video express in the last
- 00:02:40 video we did it manually with this
- 00:02:42 handle request function and then that we
- 00:02:44 listened to this port while we're doing
- 00:02:46 the same your split up over several
- 00:02:48 fonts we're creating the server tell
- 00:02:50 that Express will be responsible for
- 00:02:52 handling all requests and then we're
- 00:02:54 calling the listen method on the server
- 00:02:57 and set it to the port which is just an
- 00:03:00 integer we parsed out of this then we
- 00:03:04 got you well our function here which
- 00:03:08 listened to certain events an error
- 00:03:10 event and a listening event the error
- 00:03:13 event put call this on error method here
- 00:03:16 and we'll just well take care about
- 00:03:18 whatever error may appear during
- 00:03:20 listening for example that a port is
- 00:03:22 already in use so just our server file
- 00:03:26 now let's have a look at our app file
- 00:03:28 which is our actual Express application
- 00:03:31 in here well we get a bunch of imports
- 00:03:35 at the top and well basically what kind
- 00:03:38 of utilities we need to get our work app
- 00:03:40 working nicely we're requiring two
- 00:03:45 routes here these are default routes
- 00:03:48 that ship with this as an example so to
- 00:03:50 say because routes are stored in a
- 00:03:52 separate folder we'll have a look at
- 00:03:54 this a second and then well first we're
- 00:03:56 creating our app by running Express as a
- 00:03:59 function this is our module were
- 00:04:01 importing here this creates the Express
- 00:04:04 application then we're configuring it
- 00:04:07 first we can figure out we set up our
- 00:04:09 few engine because with Express we use a
- 00:04:12 templating engine to be able to
- 00:04:14 dynamically output variables in our HTML
- 00:04:17 files for example you might know
- 00:04:20 something like this from
- 00:04:22 languages like PHP for example where we
- 00:04:25 also got templating engines here we're
- 00:04:28 setting up which engine we want to use
- 00:04:29 shade in this case and we will have a
- 00:04:31 look at different templating engines in
- 00:04:34 future videos and where we store our
- 00:04:38 fuse so in this fuse folder now by der
- 00:04:42 named fuse we're basically chest saying
- 00:04:46 welder name always refers to this root
- 00:04:49 folder sub judice 0 5 Express first app
- 00:04:52 folder and then we tell it's in the fuse
- 00:04:55 folder there this is basically what
- 00:04:58 we're saying so that our fuse can be
- 00:05:01 found in this fuse folder where we have
- 00:05:03 our JS files here now dot Jade is
- 00:05:07 basically something which will be
- 00:05:08 compiled into HTML in yet but as well as
- 00:05:12 a set of a look at this templating stuff
- 00:05:14 in the next videos then we continue and
- 00:05:19 well we got a bunch of middleware we're
- 00:05:23 using your service a bunch of actions
- 00:05:25 were using on each request which we get
- 00:05:29 where we basically parse the body and
- 00:05:32 possible cookies and well so on we also
- 00:05:36 declare where our public finds are to be
- 00:05:40 found in this public folder this is
- 00:05:43 important because these files are well
- 00:05:46 style sheets or JavaScript files and
- 00:05:49 this we're basically just setting up
- 00:05:51 that these heart should be accessed
- 00:05:54 accessible statically so the dis dis
- 00:05:58 files should be loaded like example and
- 00:06:01 import link in our HTML code and so on
- 00:06:05 so this sets up our public folder where
- 00:06:08 our assets will live then we're setting
- 00:06:10 up to routes and we're always using this
- 00:06:13 use method which just says used current
- 00:06:17 request apply some action on this
- 00:06:20 request to some middleware something the
- 00:06:23 request is routed through so to say so
- 00:06:25 with this here we're saying well this is
- 00:06:30 the path we're accessing
- 00:06:32 the root folder or users so in the URL
- 00:06:36 ever just a slash at the end war slash
- 00:06:38 users and then which well route should
- 00:06:42 be executed so to say now that routes
- 00:06:46 and users are variables we're setting up
- 00:06:48 at the top here and which point you
- 00:06:51 average javascript files so all we're
- 00:06:54 saying here is that if we access this
- 00:06:57 route every having this as a path in our
- 00:07:01 URL then we want you well use this
- 00:07:06 routes file here this index file this
- 00:07:11 file here to handle this request and if
- 00:07:16 we have users we want this users file to
- 00:07:18 handle this request so which is
- 00:07:20 filtering the pop and then determining
- 00:07:22 which file which method should take care
- 00:07:27 about this request job is clears however
- 00:07:31 having a bunch of filters here doing all
- 00:07:33 kind of stuff with our poor request and
- 00:07:35 one of these were important actions is
- 00:07:38 that we're filtering and saying well
- 00:07:41 which of our files where our functions
- 00:07:45 should actually handle this request and
- 00:07:47 will render something back and so on so
- 00:07:50 in a way this is comparable to our last
- 00:07:54 video where we were saying that well
- 00:07:58 everything should be handled by handle
- 00:08:00 request and here we were also getting
- 00:08:03 the path and then saying okay we want to
- 00:08:07 render this or this HTML file and here
- 00:08:09 it's a similar thing we're getting the
- 00:08:11 path and then saying who should take
- 00:08:13 care about this next thing is we well as
- 00:08:18 the description says caching seven 404
- 00:08:20 arrows so again this is some middleware
- 00:08:22 and the same middleware is used in
- 00:08:25 Express so you already saw we get
- 00:08:28 several arguments we can pass through
- 00:08:30 this use functions can pass a path and
- 00:08:33 then well a function which should take
- 00:08:37 care about it well we can pass our
- 00:08:42 functions and we
- 00:08:43 also pass anonymous functions which take
- 00:08:46 a request a response and the next object
- 00:08:48 but in the end all these functions here
- 00:08:53 resolve to a function that well takes
- 00:08:56 this request response an X because this
- 00:08:59 how we will funnel through our
- 00:09:01 middleware we're calling next at the end
- 00:09:05 to say okay now the next step should be
- 00:09:07 executed so that we're dropping through
- 00:09:10 all these use cases and not stopping in
- 00:09:12 one and we also say what do we want to
- 00:09:16 do with the request or the response so
- 00:09:19 here we're just handing 404 errors down
- 00:09:22 here well we get some other arrow
- 00:09:25 handless basically just making sure that
- 00:09:28 if errors happen they are handled in a
- 00:09:30 certain way let's have a look at our
- 00:09:32 routes so when we're accessing slash
- 00:09:36 like like here we're on this index page
- 00:09:40 or we're using this index route this
- 00:09:42 routes index file here let's have a look
- 00:09:45 at this index dot J's file as you see it
- 00:09:49 while it uses the Express router which
- 00:09:52 is well just another helper object so
- 00:09:55 what you say which in the end just takes
- 00:09:58 this middleware function your as I said
- 00:10:00 with request response next and here
- 00:10:04 again well it just gets this dot slash
- 00:10:08 route so kind of a duplication here but
- 00:10:11 here again we're just saying for slash
- 00:10:13 we want to get this dis route here and
- 00:10:18 while we're doing this is something I
- 00:10:20 will show you in a second
- 00:10:22 then here we're rendering out this
- 00:10:23 index.html file and we're passing a
- 00:10:26 JavaScript object into this file and
- 00:10:29 this just sets up some variables a title
- 00:10:32 variable which you can use inside our
- 00:10:34 template to output content dynamically
- 00:10:36 there now templating is a topic I want
- 00:10:38 to talk about in a separate video but
- 00:10:41 for now just know here we're rendering
- 00:10:43 the file and we're passing some
- 00:10:45 information into that file which you can
- 00:10:47 then display there
- 00:10:48 now our a users chess file is pretty
- 00:10:52 similar and well here we also have this
- 00:10:55 slab
- 00:10:56 ha strange right because in this app
- 00:10:58 Dutchess file we're using users as a
- 00:11:02 path to use users and then in here we
- 00:11:05 get slash and not users because that yet
- 00:11:11 method here describes our route in the
- 00:11:16 app touch AS VAL we're just saying
- 00:11:18 whenever we encounter this path this
- 00:11:21 file or this file should take care about
- 00:11:24 it inside this file we have the actual
- 00:11:28 routing going on and here we have a get
- 00:11:30 road as we do in this index dot JS file
- 00:11:32 you might also have a post route here
- 00:11:34 and we will of course see this in later
- 00:11:36 videos now the path specified here is to
- 00:11:41 be seen relative from the path we're
- 00:11:45 using here so we're kind of resetting
- 00:11:48 this back to zero once we're inside this
- 00:11:50 file
- 00:11:51 therefore users slash is still URL slash
- 00:11:57 users but here we get a route for the
- 00:12:00 case that were just accessing the slash
- 00:12:02 users let me add a number around here
- 00:12:05 but just copying that and then I call
- 00:12:07 this let's say user detail or just
- 00:12:13 detail slash detail and then I want to
- 00:12:16 say detail here's what we see it
- 00:12:18 actually changed so now we would expect
- 00:12:21 that if we navigate to let's say
- 00:12:24 localhost 8,000 years that we see this
- 00:12:28 route because we just got this slash
- 00:12:30 here at the end but if we navigate
- 00:12:33 choose users detail we'll see this when
- 00:12:37 we access this route let's try it out so
- 00:12:40 let me save this now let me rerun my
- 00:12:44 server p.m. start and now I navigate to
- 00:12:48 slash users respond very source is
- 00:12:51 exactly the text we see here it's number
- 00:12:53 targeting this road now let me attach
- 00:12:56 slash detail at the end now you can see
- 00:12:59 we're seeing detail which is what we
- 00:13:01 entered here so these are kind of sub
- 00:13:04 rouse starting at the
- 00:13:07 we're specifying here slash users and
- 00:13:10 then we can give ad sub routes to bed
- 00:13:15 now if you handle it this way or you
- 00:13:18 just have let's say not this users
- 00:13:21 folder but justice slash path you're
- 00:13:24 leading to delete this to my routes file
- 00:13:28 or into this index dot GS file to be
- 00:13:30 precise and then in here I could also
- 00:13:33 add these routes so let's say like like
- 00:13:37 this and then get rid of users Ches and
- 00:13:40 then just have to make sure I add users
- 00:13:43 here and here users detail if I now
- 00:13:46 reload this it still works
- 00:13:51 now get all my routes in a single file
- 00:13:54 because in my app which is fine I'm just
- 00:13:56 saying all routing starting at the root
- 00:14:00 folder so to say at the root level of
- 00:14:03 our URL should be handled by my routes
- 00:14:06 variable which is just this index file
- 00:14:08 here and then this file I'm setting up
- 00:14:10 all my routes so this is another
- 00:14:12 possibility have it split up over
- 00:14:14 multiple files have it at one file this
- 00:14:17 is how our basic skeleton looks like and
- 00:14:20 how it works and in the next video we'll
- 00:14:24 play around with it a little bit more
- 00:14:26 and add some more fuse and yeah well
- 00:14:29 create start creating our own
- 00:14:31 application
- 00:14:32 see you there bye