Environment Variables

Enviornment variables are great because it allows you to hide your important information (logins, passwords, database connection paths, etc) in a variable that a user can never see or access. They are stored in your hosting area outside of the reach of the user, but we have to define them first in our code. So to do that we are going to label some very specific lines of code in our files with process.env.VARIABLE with the VARIABLE name being edited to what we specificially need.

In our app.js file we change our Mongoose connection path and our Passport secret using the code example above. For our mongo connection line we need to change it from mongoose.connect("mongodb://localhost/goodfellas"); to mongoose.connect(process.env.MONGO);. For our Passport secret We need to change the secret line to secret: process.env.SECRET, so that we can change it in the hosting variables. These are the two biggest secuirty holes that we need to close since a malicious user could grab your entire users' information with those variables being the direct links. After our first deployment we will add the environment variables inside of Heroku (our hosting platform) so that we can define what the MONGO varaible should be pointed towards.

The only other place we need to hide our variables is on the contact.js route in our Nodemailer code. I am going to wrap your email username and password in 2 new variables authUser = process.env.EMAIL and authPass = process.env.PASS so that we can just pass the variables in the Nodemailer authentication object. Add those two lines of code under the console.log(req.body), and then change your authentication object to have the user be authenticated as user: authUser, // user and authenticate the password as pass: authPass, //pass. Now, we have all our variables that should not be seen by our end users ready to be wrapped up environemnt variables. Lets move on to starting our deployment setup.

GIT

GIT is a control system that is going to help us keep track of a few things for our deployment. It will help us track our edits, track what files we need indcluded in our deployment, and where we are going to be deploying out site to. the basic GIT commands that we are going to work with are git status, git add -A, git commit, git push heroku master. The first command git status will tell us what we have changed and if there are files that we have added to our file tree that are untracked (meaning will not be pushed to our live stie if not added). The second command, git add -Ais used to add any untracked files to your repository. The third command git commit is actually packaging everything we want to push to our hosting for our live site. It is usually seen like this in the real world git commit -a -m "message to go with commit". the -a -m is saying include all that is being tracked and add this message as a reference. The last one git push heroku master is what we will use to send your information to Heroku to be posted live on your site. Lets do our last stages of setup before we install GIT and get ready to push to our hosting.

Mongo Connection String

To get your connection string you need to be in your Mongo Atlas account and looking your cluster. Seletc the connect button that is directly under you cluster name and then choose the option connect your application. Copy that connection string and add your database admin password (not your login password) in the string and put it on a blank text file. You will need this string immediately after we set up our heroku hosting.

Heoku Prep

Before we start using GIT we need to do a few small setup steps to get Heroku ready. In your command line you need to run npm install heroku -g, this will install Heroku's CLI and allow us to sync our account from our C9 terminal. Once that is done, type in heroku login -i in your command line and login with your username and password. Lastly, type heroku create and you will see that it creates a new app for you. Once that is created, go back to Heroku. Click on Settings and then click Reveal Config Vars. The key is the variable name we gave in our code on C9 and the value is your personal setting that is needed (example: process.env.MONGO for your mongoose string separates to KEY: MONGO and value: your string). Once you have added all the variables, close the cofig variable windows and lets get back to C9.

Install GIT

To start using GIT we are going to hit the command line with git init and you should see a line generate in your command line similiar to Initialized empty Git repository in /home/ec2-user/environment/v3/.git/. Type in git status and you should get a list of the entire diretory that are untracked files. Type in git add -A to add the entire directory to your repository. It will take a second but you will see your entire directory plus the Heroku CLI get added to your git. type in git commit -a -m "initial build load" so you have git ready to load up.

We need to run heroku apps in the command line to get the exact name of the app that you are going to use. Once it generates that line, you need to type in heroku git:remote -a yourAppNameFromAbove to direct your GIT push to your heroku app. You should see a line that says set git remote heroku to https://git.heroku.com/yourAppHere.git to know that it took successfully. Ok, now that we have the setup down, lets transition and get ready to deploy the first time.

Layout Deploy

To get ready to deploy our app we have to give it a start point for Heroku to know how to run our app. To do this we need to go into our package.json and add a few things. We are going to be inside the scripts area, and we first need to add a comma after the existing test line to make it "test": "echo \"Error: no test specified\" && exit 1", before we add our new line "start": "node app.js" directly under it. This is telling our future hosting to run node app.js to find our main file and get our app loaded with all other information provided.

Now, lets deploy our app to heroku for the first time. type in git push heroku master and watch the magic happen. It will string out a long list of dependencies that are getting built into the hosting and it will check to make sure that the proper node.js version is installed and it builds your app for you. There is a small catch: You will notice that you have no users, no services or anything from our local dev environment. The reason I call this the layout deployment is that you have a chance to make sure your CSS, HTML, JS and everything are playing nice and rendering exactly how you want before you tie this hosting to any domain. I want everyone to go to their Heroku account and open their app and make sure it looks exactly how you want it to look (I left all the dummy text in there because I wanted to make sure nothing changed). If it looks acceptable, register yourself as a user by going to your /register route and then STOP.

Live Deploy

Go back into your C9 account and find your index.js route and comment out the register route only by selecting all the lines in that code block and hitting command + / and save the file. Immediately run git status and git commit -a -m "removed register route" and then git push heroku master. This locks out any new people from registering on your site so only you have access to make changes. You now can add back all your services that you would like to offer from your /services/create route.

Heroku makes it easy to add you personal domains that you add in Add Domains section of your account. Add them there and then follow their instructions to direct your DNS to your Heroku app.

That does it, and congrats on making your site fully live and functional. I truly hope that you guys learned a lot from this tutorial and feel free to contact me if you find any errors in the course. If you want the source code you can find it on my GitHub account. Please email me if you have any questions at abuccellato@goodfellastech.com and I look forward to hearing from you.