Build Your Own Responsive Web App Step 5: Finishing Touches

We add our final touches to our site, close some security loopholes, and make our site active for everyone to see!

Education
Blog Home

Build Your Responsive Web App

Step 5: Finishing Touches and Deployment

Hey everyone, welcome to final wrap up of the build your responsive web app series! Its been a good month of learning how to code and finally we are about to put our code out in a live site! This last step is mostly a small clean up to be professional and closing security loop holes so you dont leak important information. Its amazing this is coming to an end, and I hope everyone enjoys this last step in the tutorial. Thank you all for reading and following along.

Heroku and Mongo Atlas

I am choosing to host this site on Heroku and am going to host our MongoDb on Mongo Atlas. Ummmm, why are we deploying this on two different sites if our AWS C9 site is in one? I got that question a lot from people as I boucned around the best way to do this tutorial online, and the big reason is they are both free at the entry level and are extremely reputable. Some large Fortune 500 companies use this same deployment platform. C9 is a great dev environment since they allow to do everyhing in one space, but in the real world it is best to use vendors that are specific to the task you need to use.

Heroku Account

To create a new account lets go go Heroku.com and fill out a little information. Fill out the required information and the last field asking about your primary language use Node.js. You will have to verify your email before going forward to ensure that you are not a robot, and then you can set your password and you get to your landing page. Write down both your username and password as we are going to need it again at the start of the GIT section we will be coming to shortly.

Mongo Atlas

Creating a Mongo Atlas account is a little more complicated since you have add the layer of who has access to the database as well as security passwords to help keep your database as exclusive as possible. To start the process we are going to go to cloud.mongodb.com and create a new account. You have to fill out every field on this one before it will allow you start the next step. I chose the free tier and AWS servers in the local region to where I live and then click the green create clusters button at the bottom of the screen. Once you get to the landing page cluck on Database Users under the security heading on the left side of your screen and add yourself a username and then let it generate a password for you. COPY THIS USERNAME AND PASSWORD DOWN AS YOU WILL NEED IT SOON.

When you add the user, a small pop up should guide you to the next step of whitelisting ip addresses. Whitelist all IP addresses for now because heroku will not be deploying from your person IP Address you have. Lastly, go to Access Management under Project and click the edit permissions button. Make sure that in project role that the permissions project owner, Project Data Access Admin, Project Data Read/Write are all checked. This sets us up to have full access to our cluster


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. My site is live at right here, and 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.