- 00:00:00 welcome to this new project where we're
- 00:00:03 going to build a shopping cart or a
- 00:00:05 little shop like application with no
- 00:00:07 Cheers Express and hand Laban's
- 00:00:10 as the templating engine and of course
- 00:00:12 MongoDB to store all our data let's get
- 00:00:15 started as already said I have nothing
- 00:00:18 prepared for this course so we're going
- 00:00:20 to build it step by step from scratch so
- 00:00:24 let's start I will set up a new project
- 00:00:27 by using the Express generator and you
- 00:00:30 may just google for it Express generator
- 00:00:33 and find it on the expressjs page chorus
- 00:00:39 you may switch to English here and well
- 00:00:41 here is a basic explanation what it is
- 00:00:43 and how it works but I'll also give you
- 00:00:45 my explanation it's a little tool which
- 00:00:48 quickly scaffolds out a basic notes yes
- 00:00:50 Express app it has some sample routes in
- 00:00:53 it but besides that no boilerplate code
- 00:00:56 no annoying code in it just some things
- 00:00:59 like starting a server applying some
- 00:01:01 basic model where we would use any way
- 00:01:03 to quickly get started with Express and
- 00:01:06 to not write all the code lines you
- 00:01:08 would have to write anyway to have a
- 00:01:10 work express app so like for example
- 00:01:13 with level you got create project on
- 00:01:16 composer to quickly scaffold out a basic
- 00:01:18 level application Express generator is
- 00:01:21 the same for Noches and Express so make
- 00:01:25 sure to install it and you will find how
- 00:01:27 to do this in this guide on this page
- 00:01:29 here and once you have installed it you
- 00:01:33 may use like well describe here and it's
- 00:01:36 really simple to do so I will go to my
- 00:01:41 terminal window and navigate into the
- 00:01:43 folder where I want this project to be
- 00:01:45 in so where I want to set up this
- 00:01:47 project and you should do the same of
- 00:01:49 course in this folder I can use Express
- 00:01:52 which just executes this Express
- 00:01:55 generator which was installed globally
- 00:01:57 on the system and then the name of the
- 00:02:00 folder or of the project in the folder
- 00:02:02 name will be the same so I will call
- 00:02:05 this shopping cart and I'll add a flag
- 00:02:10 HBS to set the
- 00:02:12 useful templating engine to handlebars
- 00:02:15 because I really like handlebars but if
- 00:02:17 you prefer another templating engine
- 00:02:20 you're free to choose that of course
- 00:02:22 so this scaffolds out this project and
- 00:02:25 if I now see the into this newly created
- 00:02:28 project and first I have to install all
- 00:02:31 the dependencies required for this to
- 00:02:33 work correctly we're running npm install
- 00:02:35 so the installation finished here and
- 00:02:37 what did it install a couple of required
- 00:02:40 for party packages like express itself
- 00:02:42 for example which are of course needed
- 00:02:45 for this application to work correctly
- 00:02:47 so with this in place i may now run npm
- 00:02:50 start to start the server and as a
- 00:02:52 little script which is provided by
- 00:02:54 express generator but all this does is
- 00:02:57 it runs the server setup
- 00:03:02 programmatically with no GS now that is
- 00:03:06 the important side note of course you
- 00:03:07 need to have no chairs installed on your
- 00:03:10 machine if you haven't already and order
- 00:03:12 to do that you might head over to no
- 00:03:15 chests or org and download latest stable
- 00:03:17 version for your operating system but
- 00:03:19 you probably do already have it that's
- 00:03:22 to be honest why I forgot to explain it
- 00:03:24 I think you are aware you need note when
- 00:03:26 looking at a no chest video but
- 00:03:29 nonetheless now that you got it an are
- 00:03:31 ready to go you should have your server
- 00:03:33 running and if you now access localhost
- 00:03:36 3000 for 3000 here with a colon you
- 00:03:39 should see this Express welcome to
- 00:03:41 Express page and this means that
- 00:03:43 everything is working and that's just
- 00:03:45 one of this these very basic routes the
- 00:03:47 Express generator ships with the Express
- 00:03:50 generator generated for as q well have
- 00:03:54 something to work with and to see that
- 00:03:56 everything works now if you are totaling
- 00:03:58 you two node and have no idea what is
- 00:04:00 going on here
- 00:04:01 I strongly recommend checking out my
- 00:04:04 basic notes yes which is I have on his
- 00:04:06 channel where I will explain what note
- 00:04:09 is how it works how a servers grid with
- 00:04:12 node how a request flows through an
- 00:04:15 Express application and much more so
- 00:04:18 definitely check this out in case you
- 00:04:20 are having any questions there now with
- 00:04:23 this basic project beings
- 00:04:25 set up here it's time to open it in your
- 00:04:28 editor of choice or your editor of or
- 00:04:31 your IDE of choice and I will use
- 00:04:34 phpstorm for this so here's the project
- 00:04:38 opened in phpstorm and it's a default
- 00:04:42 express noches project Express generator
- 00:04:46 generates for us and has just said I do
- 00:04:48 have videos explaining this structure
- 00:04:50 and how it works on this channel so
- 00:04:52 check out these videos if you're having
- 00:04:54 any questions about that
- 00:04:56 I'll also post the links to them in the
- 00:04:58 description now using handlebars in the
- 00:05:02 views folder we get this error HPS fault
- 00:05:05 this index dot h PS file at the layout
- 00:05:07 dot h PS file while the error file is of
- 00:05:11 course called reused when an error has
- 00:05:14 to be read or to the screen and I
- 00:05:16 believe dislike this for now the layout
- 00:05:20 HBS file if we open it holds the default
- 00:05:24 HTML skeleton and this is the file which
- 00:05:27 will be extended but all the average
- 00:05:30 view files if we not specify otherwise
- 00:05:33 so by default our view files will use
- 00:05:35 this basic skeleton and then render
- 00:05:38 their specific content in this body part
- 00:05:41 here so where we have is free curly
- 00:05:44 braces and in the body this is the hook
- 00:05:47 where the other views will come in and
- 00:05:49 render their content so for example this
- 00:05:54 index dot H PS file here this is the
- 00:05:56 view if we have a look in the routes
- 00:05:58 folder in next chairs file here this is
- 00:06:02 the route for currently accessing here
- 00:06:03 by the way because we may think of
- 00:06:07 having a slash at the end of this URL
- 00:06:09 and therefore we're reaching this route
- 00:06:11 here which just handles the route route
- 00:06:14 and here the index dot HBS file is
- 00:06:17 rendered so this file here and now I can
- 00:06:20 see this file only has a heading and a
- 00:06:22 paragraph but still it has some styling
- 00:06:26 as it seems and this is because as I
- 00:06:29 just explained this content gets
- 00:06:32 rendered instead or in the place where
- 00:06:34 this body hook here is provided software
- 00:06:37 acts
- 00:06:38 seeing here this page here is this
- 00:06:40 complete HTML document here with the
- 00:06:43 stylesheet and then the content
- 00:06:47 specified in the view being embedded
- 00:06:50 into this skeleton or into this layout
- 00:06:52 and this whole layouts work in pretty
- 00:06:54 much all templating engines and we also
- 00:06:57 have access to this functionality in
- 00:06:59 handlebars and that's important to know
- 00:07:01 because wrote this application I will
- 00:07:03 use this basic layout to provide an
- 00:07:06 overarching styling and structure and
- 00:07:09 not to repeat the code many and many
- 00:07:11 times of course so with that I can for
- 00:07:16 example change this from outputting some
- 00:07:19 kind of title here I will come back to
- 00:07:21 that in a second – hello there
- 00:07:24 saved us and now if I reload the page
- 00:07:27 you can see this text here so you can
- 00:07:29 immediately see how you can change your
- 00:07:31 views and how the content gets rendered
- 00:07:33 to the page now back to the question
- 00:07:36 what this title thing here is of the
- 00:07:39 double curly braces remember in the
- 00:07:42 layout i had the free column braces to
- 00:07:45 provide a hook for our views to insert
- 00:07:47 their content however i also do have the
- 00:07:50 title with the double curly braces in
- 00:07:52 the overall layout – like indy in extra
- 00:07:55 h vs file this syntax here is used to
- 00:07:58 output a variable passed from note c as
- 00:08:01 express queued view to be rendered to
- 00:08:04 the screen because our views of course
- 00:08:06 don't stay static they don't have static
- 00:08:09 content they output content which is
- 00:08:12 retrieved from the server which is the
- 00:08:14 result of some calculation or something
- 00:08:16 like this therefore this title actually
- 00:08:20 refers if we go back to the index dot JS
- 00:08:23 file responsible for rendering this view
- 00:08:25 refers to this title variable passed to
- 00:08:29 this view or pass to this render
- 00:08:31 function here now this render function
- 00:08:33 basically tells note or house express
- 00:08:36 hey please send back a response to the
- 00:08:39 browser containing the HTML code of this
- 00:08:42 index file and dot h PS is automatically
- 00:08:46 added since handlebars is set up as two
- 00:08:49 default view engine of this project but
- 00:08:52 not only send the actus HTML code here
- 00:08:56 but before sending it back replace all
- 00:09:00 hooks between double curly braces with
- 00:09:04 the appropriate or corresponding data
- 00:09:06 passed as a second argument in this
- 00:09:09 javascript object here so by having a
- 00:09:12 title variable here we can replace the
- 00:09:14 title variable here with value this
- 00:09:17 title variable is set to express for
- 00:09:20 example and this is why we can here see
- 00:09:22 welcome to Express if we replace Express
- 00:09:25 with shopping cart and save this we
- 00:09:32 won't see any changes because we didn't
- 00:09:35 restart our server therefore the code on
- 00:09:37 the server is still the old one or the
- 00:09:39 code running at least as still the old
- 00:09:41 one so in order to see change as we make
- 00:09:44 anywhere besides the view files we have
- 00:09:48 to restart a server and I will do this
- 00:09:50 by going to the terminal where I entered
- 00:09:54 NPM start and then I had control C to
- 00:09:57 stop this server now I could restarted
- 00:10:00 by running NPM start here but I will do
- 00:10:03 this in my ID here just to have quicker
- 00:10:05 access this is just a normal terminal
- 00:10:07 window automatically navigated into the
- 00:10:09 shopping cart folder so here if I run
- 00:10:11 NPM start does also restart the server
- 00:10:14 and now very load you can see welcome to
- 00:10:17 shopping cart so this works too so
- 00:10:19 that's the view basics here next I want
- 00:10:23 to do some cleanup I don't need the
- 00:10:25 users J's file because these
- 00:10:28 pre-populated routes are not something
- 00:10:30 I'll use and the app touch as file which
- 00:10:33 is the first place each request will
- 00:10:36 come to I will get rid of this users
- 00:10:38 variable which was well referring to
- 00:10:41 this users chairs file I just deleted
- 00:10:44 and if I scroll down here you can see
- 00:10:49 that we kind of parse some paths and
- 00:10:52 then redirect the request over to this
- 00:10:55 routes variable which refers to this
- 00:10:58 index.js file in the routes file or to
- 00:11:01 this
- 00:11:02 users variable which related to the
- 00:11:05 deleted file if the path was something
- 00:11:08 like slash users instead of just / or /
- 00:11:11 anything else than users but I won't
- 00:11:13 need that now so I will get rid of this
- 00:11:15 here and now I can again close my server
- 00:11:19 by hitting ctrl C and restart it with
- 00:11:22 NPM start so every load it still works
- 00:11:25 because I didn't change anything we
- 00:11:27 could see here just some cleanup being
- 00:11:29 done as a next step I want to bring
- 00:11:33 bootstrap in to have some basic styling
- 00:11:35 this application because well I won't
- 00:11:38 create a complete shop or a complete
- 00:11:41 online shop I will provide a shopping
- 00:11:44 page with the products I will later
- 00:11:47 provide a user login view the shopping
- 00:11:49 card and for all that I will need
- 00:11:51 styling and to be able to quickly create
- 00:11:54 a prototype I will use bootstrap to have
- 00:11:56 some styling out-of-the-box so I will
- 00:11:59 head over to get bootstrap calm
- 00:12:01 click on download bootstrap and I won't
- 00:12:05 download it I will grab the link to the
- 00:12:07 CDN here and back in the application I
- 00:12:11 will go to the layout on H PS file and
- 00:12:14 enter this file right above the import
- 00:12:18 here which light relates to the
- 00:12:21 stylesheet we may edit throughout this
- 00:12:22 application living in this public folder
- 00:12:24 and then style sheets so right above
- 00:12:27 this link here I will add the link to
- 00:12:29 the bootstrap package and I will also
- 00:12:33 bring in the bootstrap JavaScript here
- 00:12:36 to be able to control modal's and
- 00:12:38 something like this because you never
- 00:12:40 know when we will need this or for
- 00:12:42 example for the responsive navigation on
- 00:12:45 mobile phones with collapsing menus and
- 00:12:47 so and so always handy to have this here
- 00:12:50 we could always tell Lee that in case we
- 00:12:51 don't need later on but as I said I want
- 00:12:53 to be able to quickly create some
- 00:12:55 prototypes here and I will also
- 00:12:57 implement jQuery now I will also fetch
- 00:13:01 that from a CDN and I can do this by
- 00:13:03 scrolling down and then here clicking on
- 00:13:06 this kill jQuery comlink and I will
- 00:13:10 choose version 1 point x 1 point 12 in
- 00:13:13 my case here and then
- 00:13:15 version just wrapped this link here and
- 00:13:19 also entered this right above the
- 00:13:22 bootstrap script here at the bottom so
- 00:13:25 with this that is prepared and if I now
- 00:13:29 reload my page we see if the style
- 00:13:32 changes I will also go to these style of
- 00:13:36 CSS file here the custom style sheet
