TL/DR: We add our final touches to our site, close some security loopholes, and make our site active for everyone to see!
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.
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.
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.
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
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.
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(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 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 add -A,
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.
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.
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.
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.
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.
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
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 email@example.com and I look forward to hearing from you.
Hello! I'm the owner and lead developer here at The Good Fellas Agency. I've been working with code for the past 10 years and started this business over 5 years ago. I mostly write about how Web Design, Digital Marketing, and Search Engine Optimization help your business grow.
This is the first in a series of 5 posts to build a fully functioning web app for your business using the MEAN stack. In step one we cover your dev environment and your basic route structure.Read
In step 2 of 5, we connect MongoDB to your business application and cover the basic concept of RESTful routing. We update the app.js file to connect models and MongoDB to your app.Read
We added the Express Router, refactored our app.js file, added our routes files and new views to our business app. Significant changes to make your app more modular and what a future client would expect.Read
In this post, we introduce passport.js to authenticate and authorize user access on your website and connect your MongoDB to load your data for your services on your website. Your app is almost ready to go live!Read