Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #11 Adding a Session Store

  • 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