- 00:00:00 hi welcome back so here's where we
- 00:00:03 currently are or where we left our
- 00:00:05 project um with our product page
- 00:00:08 our working user management where we
- 00:00:11 were able to sign up and sign in and log
- 00:00:13 out and so on and that's all great then
- 00:00:15 I'll come back to all the user related
- 00:00:17 stuff later but I think now is the time
- 00:00:19 to actually get started with well the
- 00:00:22 shopping cart that is what the series is
- 00:00:24 about and yet right so let's make this
- 00:00:26 button work and let's add ad
- 00:00:29 functionality to well add items to the
- 00:00:32 cart as well as see the card so how do
- 00:00:36 we do this well there are different
- 00:00:38 approaches but I'm going to go with the
- 00:00:40 approach of storing the cart in the user
- 00:00:43 session which means that it persists if
- 00:00:45 we navigate across pages or even if
- 00:00:48 we'll leave the page and come back later
- 00:00:50 as long as the session is still well it
- 00:00:52 and the advantage of this is says it
- 00:00:55 that it will also work for anonymous
- 00:00:57 users so for users who didn't log in and
- 00:00:59 then of course as an important feature
- 00:01:01 because you don't only want to have your
- 00:01:03 shopping cart for logged in users but
- 00:01:06 also for locked out or well not signed
- 00:01:09 up users so ash based will be the
- 00:01:13 approach I'll follow and yet with that
- 00:01:15 I'd say let's get started I will get
- 00:01:18 started in my project here and the very
- 00:01:22 first thing I want to do is I want to
- 00:01:24 configure my session appropriately if I
- 00:01:27 go to the app the chess file you'll
- 00:01:29 probably remember that we already use
- 00:01:32 Express session we set it up here and we
- 00:01:37 also use it to flash messages until now
- 00:01:40 and that's all great but I need to do
- 00:01:42 some additional things I want to add a
- 00:01:46 session store due to it specifically
- 00:01:49 because the session has to be stored
- 00:01:51 somewhere on the server right and
- 00:01:53 currently it's stored in memory
- 00:01:55 now that really isn't something you want
- 00:01:58 to do in production as it has memory
- 00:02:01 leaks and it's not really optimized in
- 00:02:03 any way so we need a different store as
- 00:02:06 we won't store it memory
- 00:02:08 now which stores can we use let's have a
- 00:02:11 look I'll head over to the Express
- 00:02:14 Express session page the scat hub page
- 00:02:18 here and you're right at the beginning
- 00:02:20 you'll see a warning that we shouldn't
- 00:02:23 use the memory store which is to default
- 00:02:25 which is only good for testing or
- 00:02:27 development purposes but that we should
- 00:02:29 use the well one of the compatible
- 00:02:32 session stores so if I click this link
- 00:02:34 we see well a list of session stores you
- 00:02:38 may you may use only may install for our
- 00:02:41 session to work with as you can see we
- 00:02:44 basically got a lot of different
- 00:02:46 databases our answer on we could use now
- 00:02:50 since we already use MongoDB I think it
- 00:02:54 would make sense to use Mongo and while
- 00:02:58 we could either use connect Mongo or
- 00:03:00 connect MongoDB session well I'm going
- 00:03:02 to go with connect Mongo just because
- 00:03:04 well I know it and if I click on this we
- 00:03:07 are taking to the respective NPM page of
- 00:03:12 this package and of course we will also
- 00:03:15 find installation instructions here but
- 00:03:17 we also find instructions on how to
- 00:03:20 configure it and one important thing is
- 00:03:23 of course if you already do have an
- 00:03:25 established MongoDB connection our
- 00:03:28 application from Mongoose the great
- 00:03:30 thing with Mongo store is that we can
- 00:03:32 reuse this connection so we don't have
- 00:03:35 to open another connection therefore
- 00:03:37 have to open connections which doesn't
- 00:03:39 make any sense but we can use longus
- 00:03:41 connection to well for this store to
- 00:03:45 store our session in Mongo database now
- 00:03:48 since we're storing the session in the
- 00:03:50 Mongo database another question is how
- 00:03:52 does it get cleaned up for the expired
- 00:03:55 sessions right because we don't want to
- 00:03:57 crowd our database with old sessions
- 00:04:00 which are no longer valid
- 00:04:01 well the package answers this question
- 00:04:04 too if we scroll down we see this
- 00:04:07 session expiration part and we are what
- 00:04:11 we can read that expired sessions are
- 00:04:13 automatically removed with the TTL
- 00:04:16 collection feature of MongoDB which is a
- 00:04:18 bolt in fact feature
- 00:04:20 where we can basically specify when
- 00:04:22 certain records should be removed
- 00:04:23 automatically and this is all managed by
- 00:04:26 this Mongo's store which is of course
- 00:04:29 great and well makes it very good to use
- 00:04:32 here so that has been a lot of talking
- 00:04:35 let's install it so back in my project
- 00:04:37 I'll just open up a new terminal window
- 00:04:40 here and let me make this a little bit
- 00:04:42 bigger so that you can see it and then
- 00:04:45 I'm going to run NPM stall – – safe to
- 00:04:49 install it as a production dependency
- 00:04:51 and then connect Mongo is the name of
- 00:04:56 our store here as you can see on the
- 00:04:59 well on the page of this package so I'm
- 00:05:02 going to run this and with that
- 00:05:05 installed
- 00:05:06 I'll make this smaller again I will of
- 00:05:11 course use it here in my app chests when
- 00:05:14 I setup my session I want to use this
- 00:05:16 new store and I want to tell my session
- 00:05:18 that it shouldn't use the default memory
- 00:05:20 store anymore of course so in order to
- 00:05:23 do this I'll first add an import here
- 00:05:26 let's say right below the validator
- 00:05:29 whatever you want at the top important
- 00:05:32 part is that you do it after importing
- 00:05:35 your session here your session package
- 00:05:37 and I'll name it mongos store and I will
- 00:05:41 of course require connect Mongo the
- 00:05:44 package is just installed and this
- 00:05:46 basically exports a function – which I
- 00:05:49 need to pass my session like this so
- 00:05:55 with this I'm importing Mongo store but
- 00:05:57 of course I also need to configure my
- 00:05:59 session I'm doing this down here where I
- 00:06:02 will set up my session whiffed is
- 00:06:05 JavaScript object and I'll just
- 00:06:07 restructure this so that we can see this
- 00:06:09 a bit clearer since will add some
- 00:06:11 options here so this is how we currently
- 00:06:14 initialize our session and that's fine
- 00:06:16 but I need to add something most
- 00:06:19 importantly of course I need to add a
- 00:06:21 store with the store key here and here I
- 00:06:24 add a new Mongo store the package I just
- 00:06:27 installed and this store here also takes
- 00:06:34 configuration or options specifically
- 00:06:37 one important one is that I specify the
- 00:06:40 Mongoose connection key to tell it to
- 00:06:44 not open a new connection on its own
- 00:06:46 which you could do of course check out
- 00:06:47 the NPM page for more information but
- 00:06:50 instead that I want to use my existing
- 00:06:53 Mongoose connection which I can access
- 00:06:55 on my Mongoose object with the
- 00:06:56 connection property here instead I'm
- 00:06:59 making sure that no new connection is
- 00:07:02 open and then I'll add another option to
- 00:07:06 decision not to distort the session the
- 00:07:09 cookie I want to configure it
- 00:07:12 specifically I want to configure how
- 00:07:14 long it should live so how long my
- 00:07:16 sessions should live before they expire
- 00:07:18 I do this by setting the max age key
- 00:07:21 here and I will set it to let's say 180
- 00:07:25 minutes so I have to multiply this with
- 00:07:27 60 seconds and then with 1000
- 00:07:30 milliseconds since max H expects a value
- 00:07:33 in milliseconds so if that I'm setting
- 00:07:35 it to 180 minutes so 3 hours and of
- 00:07:40 course change this to your needs for
- 00:07:42 testing you might also maybe reduce it
- 00:07:44 to 10 seconds to see if it expires and
- 00:07:46 so on but yeah I'll go with with this
- 00:07:50 default value here and with that the
- 00:07:54 discussion has been configured
- 00:07:56 you are now storing it at MongoDB on the
- 00:07:58 server on the client of course still in
- 00:08:00 the cookie and will expire after three
- 00:08:02 hours I also want to do something else I
- 00:08:05 want to make my session available in my
- 00:08:09 views so that through handlebars I can
- 00:08:12 directly access my session and I already
- 00:08:15 have a middleware here where I make my
- 00:08:17 authentication status available and I'll
- 00:08:20 do the same for the session so we'll
- 00:08:22 address locals and then name it session
- 00:08:26 and I will pass the session object and
- 00:08:30 again this just make sure that I may
- 00:08:32 access session in all my templates
- 00:08:34 without having it to pass around without
- 00:08:37 having to pass it explicitly in my
- 00:08:40 routes file or in
- 00:08:43 routes functions so I can always access
- 00:08:46 the session variable now in all my views
- 00:08:51 it's okay that has been the basic
- 00:08:53 session setup but with that of course
- 00:08:55 the all the basics are done but we're
- 00:08:58 not able to do anything else than before
- 00:09:00 so that'll be what I will next have a
- 00:09:03 look at
