Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #1 Intro & Setup

  • 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
  • 00:13:38 expressed generator ships with and
  • 00:13:41 delete all these styles for now I will
  • 00:13:43 later on add styles but for now I don't
  • 00:13:45 want any so if I again reload I can see
  • 00:13:50 that well it changed it certainly looks
  • 00:13:53 worse but we will fix this a few seconds