Environment Variables from External Keystore
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Scaling Web App Configuration with Environment Variables course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Scaling Web App Configuration with Environment Variables, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

[00:00 - 00:05] Welcome to module two. This module is about building and deploying .n to production.
[00:06 - 00:20] The purpose of this lesson is to demonstrate how to make your code work with third parties like AWS, particularly AWS Lambda. This lesson I'll be showing you how to deploy environment variables.
[00:21 - 00:37] You will be connecting to a Mongo DB instance, create a Webpack bundle, zip our bundle, upload it to Lambda and configure it. Sounds like a lot, but you already know how to do most of this stuff to do it.
[00:38 - 00:54] The Mongo DB knowledge is supplementary and I have added links to in the description on how to set up a make a free Mongo DB cluster, but I'll be showing you the configuration. So let's get started.
[00:55 - 01:12] Yeah, as you can see, we have the module 1.4 code and I've already set up a test Mongo DB database for a code to connect to. So let's rewrite the script so that it can work as a Lambda and connect to the DB.
[01:13 - 01:23] Firstly, I'll install the Mongo DB client library. Next, we have to connect to the Mongo server.
[01:24 - 01:34] So in our index.js, we'll clear everything up that was already there. We'll add a Mongo client configure instance configuration and then we have to connect to the database.
[01:35 - 01:45] So I'll create a function. Function DB in it, which is initiating our connection string.
[01:46 - 02:09] And then we will copy from Mongo some code. And we'll create a Mongo string, which is Mongo DB serve my database user.
[02:10 - 02:18] This is from the documentation. We'll have to change all this, but at least it's not complaining that there's nothing missing.
[02:19 - 02:46] And then we need is a Lambda handler. So what I'll do is I'll create a handler that just run, get some Mongo string, prints it out and the event pretty empty handler there.
[02:47 - 03:05] But it will run the DB in it on the Lambda run. So back to this Mongo string, instead of hard coding these values, like user, password, database, et cetera, we can just use dot end for this.
[03:06 - 03:16] So what I'll do is we'll create four variables. Mongo domain, the DB name, your username and your password.
[03:17 - 03:28] And then we will have some handling and like a default value in case that has not been set. So it's not undefined or something.
[03:29 - 03:43] And then we'll add an error, another error check, which if any of those values are not there, just so that way you can see the better. I'm just going to hide this.
[03:44 - 04:02] So if the values are not there, then we'll fire an error. And instead of referencing the Mongo string like this, we will put these values into that string.
[04:03 - 04:18] And the way I'll do that is by putting username, password, domain, MongoDB and the DB in one of these template strings. Okay, that looks great.
[04:19 - 04:29] But now let's make it so that way the lambda is just a simpler production build . We can remove any dot end flow stuff.
[04:30 - 04:43] So I end up production and then we'll change this to be production. Move all of this.
[04:44 - 04:55] We actually don't want to do burn in for this. So we're not actually going to use this plugin that we created.
[04:56 - 05:01] So we can remove that and that I'll remove this in a second. Just want to show you the next part.
[05:02 - 05:10] Also have to uninstall dot end flow. So npm uninstall dot end flow.
[05:11 - 05:34] And we'll be wanting to be very careful to make sure that this is in our git ignore because this is actually going to influence our zip that we're going to create. Interesting that I've noticed is that mom does work better when the library target is set to common JS.
[05:35 - 05:49] We're going to be using a zip library for this. I know a lot of people use serverless, but because I'm really just trying to show the dot end process, we're going to stick with the simple zip library.
[05:50 - 06:03] So that zip library is and can install dash D zip webpack plugin. I'm going to link to this in the description below.
[06:04 - 06:12] I just realized that Webpack and Webpack CLI were not in depth dependencies and move those over. This should apply to other projects as well.
[06:13 - 06:19] That was a mistake. Oh, let's configure the zip plugin in the Webpack configuration.
[06:20 - 06:27] I'm not using God and so I'm going to require the zip plugin. And then that goes right in your plugins array.
[06:28 - 06:37] This new zip plugin and you can give it any file name. I give it main.
[06:38 - 06:46] OK, it's ready to bundle and TM run bundle. Let's see what the output is.
[06:47 - 07:05] OK, we built the zip and we're going to be uploading this to AWS shortly. One thing to remember, since we removed the burn in earlier, we can actually commit the compiled zip if we want to, but it's still probably better that we don't.
[07:06 - 07:16] So that way it's just better when it's compiled per user. So that way, you know, people can build it however they need to.
[07:17 - 07:35] And it doesn't bloat the repository with copies of the zips that are not actually relevant. So we can actually even take this zip that we've built and run it in multiple configurations and multiple environments.
[07:36 - 07:44] Now that's only been built once. So before we upload this to AWS, there's one thing that we have to do.
[07:45 - 07:50] And if you guessed test, you'd be right. So let's test it.
[07:51 - 08:18] To test it without adding code to the code, we have to actually add another dev dependency called dot end CLI, npm i dash D dot end dash CLI. And this will actually temporarily inject environment variables, well, into the environment.
[08:19 - 08:30] All we have all we have to do is add another script that says local dot end dash E. So that's the CLI.
[08:31 - 08:35] And it says dot end. So that's where we're getting the values from.
[08:36 - 08:44] I'll have to set value. There will test the values that are there and then node and dot dist dot main.
[08:45 - 08:49] So that will be running the JS file that we're generating. Okay.
[08:50 - 08:57] So npm run local. Well, it's good.
[08:58 - 09:02] We tested it because it says Mongo string is not defined. Yep.
[09:03 - 09:11] So we declared it in this function, but when it's tried to be accessed over here, it's not there. So what do we do?
[09:12 - 09:22] Well, we'll declare it outside of the function. I'll just use this example as our test as our initial value.
[09:23 - 09:32] And then we can redefine it here. The trick though is once you change the value, you cannot just run npm run local.
[09:33 - 09:36] You have to re bundle it. So npm run bundle.
[09:37 - 09:49] And then after that, then we can do npm run local. Okay.
[09:50 - 09:59] Now, the next error that I see is says use unified topology. That's because we're using the old way to connect to the Mongo client.
[10:00 - 10:12] I'm going to rewrite this with the new way. And also I realized that this is not working because we forgot to import the environment variables when we deleted the dot end step production file.
[10:13 - 10:24] So I've rewritten this so that way we just declare the client first. And it doesn't need to actually have any of the other details in there.
[10:25 - 10:31] And we actually get the Mongo string. The client is generated there.
[10:32 - 10:46] And in the DB in it, all we do is we connect and we error handle. Now, let's make sure that our dot end file has the correct values that we want.
[10:47 - 10:59] That is making sure to set these four values, Mongo domain, DB user and pass. And now let's bundle and run.
[11:00 - 11:10] This time, it's saying we didn't use the destructuring import for the Mongo client. So let's do that now.
[11:11 - 11:17] And we'll see what happens. And it works.
[11:18 - 11:31] One last thing before we upload to AWS is we need to actually rename this to index.js. That's because AWS will be looking for an index handler.
[11:32 - 11:41] So in our Webpack config, change main dot JS to index.js. And we'll delete the main JS that has been built.
[11:42 - 11:45] We can leave the name main.zip. It doesn't really matter.
[11:46 - 11:56] And let's build it again. And make sure to rename your local script as well when you rename your file.
[11:57 - 12:01] All right, let's upload it. All right, I've created a test Mongo function.
[12:02 - 12:20] I'm going to upload from my zip file. And it's starting to upload the code and unzip it.
[12:21 - 12:39] And before you start using it, make sure to do the most important step, which is configure the environment variables with your Mongo details. Once you've added your values, make sure to hit save.
[12:40 - 12:45] And when I run it, it says status live. All right.
[12:46 - 13:00] If you are deploying something to Amazon via elastic container service, you can also set your environment variables in the task definition file. Under the environment variable section.
[13:01 - 13:14] Try and avoid using files to save environment variables whenever possible. Choose the option though that is safer and avoid saving your secrets to a repository.
[13:15 - 13:22] Even when you're requested to use parameters, try to be careful not to commit them. That's all for this lesson.
[13:23 - 13:23] See you in the next one.