Challenge 1: Solution

[00:00:01]
>> So I'm actually gonna remove my existing Heroku app so that I can be in sync with all of you. Clear, Heroku apps destroy, I forgot the name of that app. There it is, good old history. All right, so I don't have an app anymore. And if I look at git remote, so creating a git remote is the way that Heroku receives your app.

[00:00:51]
You push to Heroku, the same way you push to GitHub and making that git commit, and like pushing it up to Heroku, that is the whole deploy process is connected to that action. So if we look at git remote, and we see all we have here is origin, we would expect to see that there would be one there called Heroku if we had an app wired up.

[00:01:15]
So we're here at a starting point where we don't have anything set up, yet. Now I've already installed the tool belt, and I've already gone through the Heroku login step. Some people were a little bit surprised that you don't see your password as you type it in. This is for your safety, because you might notice that as soon as you hit Enter, your email is left there in the terminal and there's a file that has the history of all of your terminal commands.

[00:01:40]
You wouldn't want your password to be in plain text in that log file for someone to find. That would be a super easy way to mess with someone's machine. So I'm already logged in, I'm gonna begin by creating an app. So run Heroku. Let me do something to get rid of some prompt here.

[00:02:01]
Ln -s training/seo/project, we'll just call it seo. Much better. So now I can type and you can see. So Heroku apps create, we can optionally give it a name. If you don't, it'll take two dictionary words and smash them together with dash and put a random number next to it.

[00:02:28]
I'm just going to call mine, mike-seo. So this is creating the app. And if you were to visit this URL there's no app deployed yet. It's sort of in its an empty initialized state. It's not being nice to me here. All right, so it's gonna say, welcome. So this is not an error page.

[00:02:56]
This indicates that like the app has been created but there's no code there. This is sort of just a placeholder. So what we need to do is now set the app up. And we're gonna do that with Heroku config set. So what we're doing here is we're setting environment variables on our Heroku app.

[00:03:16]
This is a very common way of being able to sort of toggle things at runtime. So when our app is running and we can even change an environment variable using the same command config set and our app will be stopped. The environment variable will be set and it will quickly restart again.

[00:03:35]
What this is gonna let us do is change from exercise to exercise. So what we see on Heroku, it's gonna start with the stuff in the deploy folder. Later we'll have it using this opengraph folder and this mobile folder and we can kind of alternate through them in just a couple seconds.

[00:03:52]
And then give Facebook a URL and see what metadata it can find off of. So that's this first one, the second one is use HTTPS. This basically means that when we're on Heroku, if non secure requests come in, we redirect them to the secure version of our URL.

[00:04:13]
And Google is starting to more and more have a bias towards secure URLs and then the latest like performance testing tools like lighthouse, which we'll look at later. Which is used to evaluate the fitness of your web application for mobile devices. Redirecting from insecure to secure HTTP is one of the checks that you'll get a pass or fail on.

[00:04:39]
So we're gonna set this equal to true, it's worth noting, we wouldn't want to set this equal to true, locally, because we're not serving with the SSL certificate, right? And what's more we're using a permanent redirect, so I actually screwed up my own dev environment a couple days ago, where I had this local host, with the permanent redirect.

[00:05:01]
And I had to go through and delete history items cuz forever, Chrome was remembering that, when the user types in this URL, we could use the secure one instead. And there is no way for me to get back to the insecure one. So this is why it's an environment variable.

[00:05:16]
Our environment variables are set if we wanted to see the current state of things. We could just run Heroku config and it'll show us the current environment variables at play here. They have some great documentation too, Heroku help config will tell you we can just use this to display the config variables for an app.

[00:05:43]
You can get a value, you can set a value, pretty, easy. The one that you can't see there is config unset, which is sort of like, null it out remove the environment variable entirely. All right, so now we're ready to deploy. The way we deploy to Heroku is it's set up a new git remote for us as part of the apps create command.

[00:06:08]
No, git remote. So you see now we have a new one here. Origin is gonna send me to GitHub, right? That's where we checked our code out from. Heroku is gonna deploy whatever this current version of our code is up to them. We're basically saying, send the master branch to Heroku, his master branch and what it's doing here in addition to the Git stuff itself, you can see that if I widen this a little bit I can.

[00:06:41]
It's going through the process of installing all of our dependencies, you see that it's using yarn, which is like a new package manager that you can use instead of NPM. It is discovering different process types and now just finished creating this version of the app and it's available on that particular URL.

[00:07:04]
Now we could just visit this URL if we wanted to and our app should be there and running. So we can go ahead and add some metadata to this app. So if we were to view source here, and see what this HTML actually looks like. So there's really nothing in the head tag except for links to CSS style sheets.

[00:07:32]
>> [INAUDIBLE]
>> Thank you. There's not much I can do for this projector unfortunately. But take my word for it, those links, that's actually all we see. You're just missing the open head tag up there. So, what we need to do is update this so that we have like at least the bare minimum for making it so that this result shows up the way we want.

[00:08:00]
So first let's add a title tag and we could say, I'm just gonna move this down and get rid of this temporarily and that so we can say title is, deployment instructions and then we can add a meta tag. And I'm just gonna copy it from my slides here.

[00:08:31]
So the name, we've got name and content. Those are the two things you need to remember, name is a description and this is gonna be how to deploy our first step. And then we could add keywords here for like, comma separated, deployment Heroku, git, shell commands, seo. So we can save that and then do another,

[00:09:05]
>> You have two description tags.
>> I've have to description tags, thanks. We can first do git commit. This is how we save this version of our file. So git add, so we're basically saying I want to take all of the files that are changed, stage them to be saved in this next version of our app.

[00:09:26]
This is like the action of making a save git commit. Add basic seo data, right? And so now we've like, updated our app and we're ready to push it up to Heroku. And you see it's gonna go through basically the same steps. Once it's done, it will refresh this view source thing over here and we should see the title and stuff up here.

[00:09:57]
So this is pretty fast, deploying to Heroku, it could be even faster except I've had to disable some caching that was getting in my way that had to do with SaaS. So it can be like one second and your new app is ready. So if we refresh this, sometimes it takes a second for things to show up.

[00:10:14]
Here we go. We've got deployment instructions, and here are two meta tags showing up. So there we go, that's the solution to this exercise. I will note that the one one thing that people found, for some Heroku commands, you have to add something like this Like dash dash app and then the name of your app here.

[00:10:38]
This is useful because sometimes you have multiple apps. Sometimes for my apps, I'll have like a staging environment and a production environment, both of which are hosted on Heroku. And it kind of needs to know which thing are you talking about? Which machine do you want to see the config variables on.

[00:10:56]
So that was the only thing that seemed to be missing an explicit way from the instructions.