‫We're almost ready to deploy our application now.
‫But before we do that,
‫there is actually a couple of things
‫that we should take care of.
‫And so let's do that now.
‫And the first thing that I want to do
‫is to install a package
‫that's gonna compress all our responses.
‫So basically, whenever we send a text response to a client,
‫no matter if that's JSON or HTML code.
‫With the compression package,
‫that text will then be dramatically compressed.
‫All right, so let's install here.
‫Npm install, and simply, compression.
‫All right.
‫So let's include that here.
‫Now, so this will then expose
‫a very simple middle layer function
‫that we simply have to plug
‫into our middle layer stack.
‫So let's do that somewhere here.
‫Close to the end, doesn't really matter.
‫So app.use,
‫enter in there call compression.
‫So this here will then return a middle left function
‫which is then again going to compress
‫all the text that is sent to clients.
‫So it's not going to be working for images
‫because these are usually already compressed.
‫So for example, a JPEG format is already compressed.
‫So this is only going to be working for text.
‫So once our website is actually deployed,
‫we will then test if this compression is actually active.
‫Anyway, the next step before deploying our app
‫is to get rid of most of the console.logs
‫that we still have in our code.
‫And that's just because these logins will end up
‫in our hosting platform logs.
‫And so we don't want to pollute these logs in production.
‫Okay.
‫So let's just quickly search here for console.
‫And as you can see, there are a lot of them.
‫So this one is already commented out.
‫So I'm not going to work on that one.
‫But this one here, let's actually get rid of.
‫And so now, one by one,
‫we will take a look at all of them
‫and the ones that are not relevant
‫we will simply comment them out.
‫All right.
‫Here in the error controller we also have a ton of them
‫but some are actually relevant.
‫Now, not this one.
‫Let's actually get completely rid of it.
‫Also not this one,
‫but then here we have these three
‫that we actually created on purpose
‫so that they end up in our hosting platform logs.
‫Okay.
‫So remember that we set it up in a way
‫that when there is an error on the render website
‫then we'd then get a log
‫of the error that actually happened.
‫Together with this emoji here.
‫And so each time we see this,
‫we can then easily identify in our logs
‫that something bad happened on our side.
‫Okay, and so we have a couple more here.
‫For example, for other unknown errors where we
‫do not want to leak the error details to the client.
‫And so these ones are okay to keep them.
‫This one we also want to keep
‫in order to inform us in the logs
‫that the database connection was successful.
‫These ones here as well.
‫This one here is actually in the import-dev-data
‫so they are not important at all.
‫Anyway, all the logs here, let's keep them.
‫Then here, we have this one here,
‫that we only really did in order to use this middle layer.
‫So let's actually turn off this middle layer.
‫Which again we only really used
‫to test this post find middle layer.
‫Next up in the user model.
‫Well, this one we also do not want.
‫This was just once more for testing purposes.
‫Then we have package JSON,
‫so these are actually not even come to the logs.
‫Then we have to bundle
‫where we are not going to change anything.
‫Then we have index.js.
‫So that's our client side JavaScript.
‫So let's get rid of this console.log here.
‫Then we also have some more here in logout
‫but this one let's actually keep it.
‫Some more in stripe.
‫And we're not interested here in the session.
‫But this one here when there is an error
‫is actually okay.
‫And then in server.js,
‫we have these ones here,
‫which we actually, again, did on purpose.
‫So that they really end up showing in our log files.
‫And don't worry if you don't really know
‫what I mean with log files.
‫You will see once we actually put
‫our application onto Heroku.
‫So I will show you with the log files by then, all right.
‫Anyway, all of these console.logs here
‫are on purpose.
‫And so is this one here
‫about the successful database connection.
‫This one here as well
‫informing us the port where the app is running.
‫And this one, and this one are also important.
‫All right.
‫And so with this we took care of all the
‫unnecessary console.logs that we're only just
‫polluting our log outputs.
‫Okay, so let's close all of these files here.
‫All right.
‫And now, next step,
‫let's change URLs or API codes
‫in the client side, JavaScript.
‫So for example here in login.js,
‫right now we do this API codes
‫to this development API.
‫So here, we of course, have our development URL.
‫And so like this,
‫it's not going to work in production
‫because obviously from there,
‫we are not gonna be able to access any development URL.
‫And the same up here.
‫But fortunately, there is a very simple solution.
‫So all we need to do is to really get rid of this part.
‫So if we just delete it like this,
‫then we're gonna end up with this relative URL.
‫And since the API and the website
‫are hosted on the same server
‫this is gonna work perfectly fine.
‫So doing it like this is a bit like
‫specifying the path to images in the HTML.
‫For example, here in the overview page,
‫where we have these images,
‫we just simply say "/img"
‫and that will then go to the current URL
‫and will then add that path onto to that.
‫Okay.
‫And so the same thing is going to be happening here.
‫Okay.
‫Now again, this only works because the API and the website
‫are basically using the same URL.
‫So we're hosting them on the same place.
‫But if you were hosting your website
‫or your front end on one URL,
‫and then your API on another URL,
‫then it wouldn't work like this, okay.
‫But in this simple application we can just do it like this
‫because we have this very simple set up.
‫So let's delete it here in login.
‫In the index I believe we don't have any URLs.
‫Yeah that's right.
‫Also not in the alerts.
‫Not in Mapbox I believe.
‫Nope.
‫But certainly in stripe.
‫So to get our session.
‫So we can just do the exact same thing here.
‫And also in the updateSettings.
‫Okay.
‫Give it a save.
‫And all of them.
‫And so that one is fixed as well.
‫And now finally, and continuing working on
‫the client side JavaScript,
‫we need to create our final bundle.
‫All right.
‫So right now, this is our bundle JavaScript file.
‫But remember that this was just created
‫using the watch function.
‫So in our package.json
‫we have this watch.js script which will just create
‫a new bundle whenever we change one of the files.
‫But without any compression,
‫or without any performance optimization.
‫But now that we're really done with all our JavaScript
‫we are ready to actually build our JavaScript
‫into a final bundle.
‫And here we should replace this watch with build,
‫and so that will then create
‫our final compressed JavaScript bundle.
‫All right.
‫So let's try that out here now.
‫With npm run.
‫And once more with tab to auto complete.
‫So let's see if...
‫And it's done.
‫And so let's take a look at our bundle now.
‫And to see that now, it's really
‫this nicely compressed.
‫All right.
‫Now you also see that we have a ton of these new files here
‫and that's because you're in our file tree.
‫Parcel actually creates this cache folder.
‫But we do not want that folder in our git depository.
‫Right.
‫So let's add that here.
‫And so now
‫you see that automatically as soon as we save it,
‫it will then go back to
‫the original files that were updated.
‫Okay.
‫So once more, VS Code is really smart
‫about everything related to git.
‫All right.
‫Okay.
‫And I think that's actually it.
‫So our application is now prepared to really be deployed.
‫And so now the last step is to actually commit
‫all of these modified files to our repository.
‫So remember that the first step is to add all the files
‫to the staging area.
‫So git add, and in this case, all of the files.
‫All right.
‫And now all we need to do is git commit,
‫then the message, and let's say,
‫"Prepared app for deployment".
‫Great!
‫So you see that all our modifications are gone.
‫Also from here.
‫Which means that the current working branch,
‫is so called clean.
‫And so yeah, we're actually now ready to deploy our app
‫in the next video.