Coding

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