Node.js + Express – Tutorial – Express Project Structure & First little App

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

You may also like