In the last guide, I mentioned how you needed to have a few prerequisites done before getting started with your deployment. You needed to have a GitHub account and you also needed to go through the GitHub course, that I have on DevCamp. So make sure that you've done that, and all of the code that you've written should be in a repository like I have right here.

This is actually the exact code that I've been writing throughout this entire course. If you click on the commits, each one of the videos is paired with a specific commit.

So each one of these represents a video that we walked through. And so that means all of the code that is on the local machine is now also on production here, or it's on GitHub here. So you have the ability to access it, share it, do that kind of thing. That's the first step, so make sure that you have all of your code deployed there. You also need to have a Heroku account, and in addition to a Heroku account, you need to have the Heroku Toolbelt installed.

And so you can Google Heroku Toolbelt and then whatever operating system you're on. So, I'm on a Mac so this is the Heroku CLI and it gives you the instructions for installing it, getting it up and running on your system. So make sure that you have all of this installed because this is going to be what you need in order to take your code and to push it up to the server. So make sure you have the Heroku account and then you have this installed on your system, and as you can see right here, we have Mac, we have Windows, and also Ubuntu.

So, assuming you have all of that installed and you have the code up in the GitHub repo. And if you have any issues with any of this please reach out to your mentor or to your instructor, and they'll be more than willing to help you work through it. One caveat I will say is that if you have any issues going through this, you're not alone. This is one of the trickier parts, not really in terms of technical knowledge more in regards to system configuration and that kind of thing.

So, usually, we will have a number of individuals who run into issues. Don't worry, they will all get resolved and you'll be able to get this live. So, with all that being said, let's make it happen. I'm gonna open up Visual Studio Code here and I'm gonna open up the console. So make sure you have the very latest code all up to date, you have all of your commits done.

So if you type git status then you should have nothing left to commit or check-in.

As you saw, I have everything pushed up, including even what we just completed with our authentication form. So, now we can deploy, or first, we need to create our instance on Heroku. So we're going to create an application on Heroku, and then we can push our code up to it.

So the way you can do that is here in the terminal type Heroku create and then you can pass in an app name. So for this one, I'm gonna say Bottega-react-portfolio. Usually, the typical approach, because these names have to be unique, not just for you and your account but for the entire world that uses Heroku.

So if you were to type in something like Heroku create Google or something like that, that's a name that's already reserved, it's not gonna work, it has to be unique. The most common approach that I'll usually do for most apps is I'll just use my initials right in front of it. And then I can be pretty confident that it's going to be unique.

So I'm gonna use jdh-bottega-react-portfolio and heroku create before that, type return.

heroku create jdh-bottega-react-portfolio

And what this is going to do is it's going to contact Heroku, as you can see right there, and it will then create the application.

Right now it hasn't taken our code, it doesn't know about our code yet. But it is going to create a connection between our application here and the remote Heroku server, and it also creates a subdomain on Heroku that has that. So we have this subdomain, this is where the application is gonna be hosted.

And you can always use a custom one, and you can go through the Heroku documentation if you wanna do that, that's perfectly fine to just use the Heroku app.

Then notice the second link, this is an interesting one.

So right here with git.heroku.com what this is, is Heroku not just creates an application it creates a place for you to store your code. Now we still use GitHub for that, because you don't want to treat Heroku here as your code repository. That's why I told you, you need to make sure you have all your code on GitHub as well.

But Heroku does store a copy of your application's code, and right here, we didn't give any code to it yet but we made room for it. And so, if you now log into Heroku, you should see the application that you just created. So, I'm going to open that up, I've quite a few applications, so let me actually search for jdh-, there we go. jdh-bottega-react-portfolio and you should see an application here.

So, so far, so good. Now, my application, just in case you use Heroku a lot, they only give you so much free time per month and I have so many applications that I run out of my free time very quickly. And so I'm gonna have to transfer this application to one of my paid accounts, to the Bottega corporate one, you will not have to do that. But if I happen to push this up and it doesn't work or I get an error it probably is because I already ran out of time. So just a forewarning on that.

So, our Heroku application has been created. Now that we have that, what we need to do is we need to let DevCamp Space know about our Heroku application, and I'll talk about why that is here in a moment. So, make sure you're logged into DevCamp Space, and then I want you to come and grab the URL. So grab this entire URL here and then go up to this right-hand side where you have these little node icons here.

And what we need to do is we need to tell DevCamp Space about our URL, and the reason for that is it has to do with security. So, we can't just let anybody use DevCamp Space because then you could have all kinds of hackers and bots that are leveraging it and building blogs and doing all kinds of stuff. And we wouldn't have any control, we wouldn't have the ability to block them or anything like that, or any ways of really tracking them.

So what I did was I created the ability to have whitelist links and also API keys, but as you can see I have mine hidden, you shouldn't share yours with anyone else either. But these whitelist links, what they do is they give us the ability to contact the DevCamp Space server and say, "Hey, this URL that I'm contacting you from, "I know I've usually been contacting you from localhost, "and that's worked because localhost "is automatically working in the system "and it's whitelisted, "but I have a new domain I need to tell you about." You can see right here I have a couple of other ones that I already have in place, like my personal one for Jordan Hudgens and then also another application where the demo app is.

So we need to paste in that URL, make sure that you remove any whitespace at the end and also that trailing slash, so it should look exactly like this.

And you can hit this plus sign, add that to the whitelist, and you should be good to go.

So, I know that's a lot of set up but at the end of the day, if you were to try to deploy your own server using other tools. Like if you were to create a server from scratch and then build it up you would see that the kind of set up we're doing right now is about 100th of the time of performing that kind of action. So this is actually relatively straightforward compared to some of the other options out there.

So with all of this in place, let's test this out. The way that you run this is by typing git push heroku master. So, what this is going to do is this is gonna start up a whole slew of processes. This is gonna contact Heroku, this is gonna wrap up all of our code that we have, and it's going to start running a production process.

Now, this is something the app has never done before, so hopefully, it works, if not, we're gonna spend some time debugging it. But you can't take the code you've been running locally and run it the same way that we have been. So the code that we have right now is all built for development purposes. So if you were to try to just copy and paste that JavaScript code and have the browser run it, it wouldn't know what to do. It wouldn't know how to compile Babble, it wouldn't know how to take JSX code and turn it into HTML, it wouldn't know how to do any of that.

So what's going on right now is it's going through what's called a production build process. And if you're curious about how it works, you can open up your packaged JSON file because this build process takes a little while. And if you look at these scripts right here,

and you're not gonna have to touch any of these because this all should just work. But if you look at these, so if you look at these scripts such as postinstall and we've been using start. But then, very importantly, is build and heroku postbuild, and production. What these are doing is these are creating entire processes. And they're running scripts such as calling webpack and it's performing tasks such as minifying all of the code and converting it into something the browser can understand.

And it's actually even, it's taking our code, and it's translating it and completing what is the build process. And it's creating a new directory on the server. And it's called a dist director, and so it's creating that on the server. It has all of the code, it's not using react at all. It's taking the code we wrote and converting it into pure JavaScript, and it's something the browser can actually understand.

So you don't need to actually do anything with that. The system does that automatically. That's why I spent a lot of time building the template so that all of this would simply work. But it is very important for you to understand that those processes are occurring because the more advanced you get the more you are going to start getting into building out your own tooling in your own environments and understanding that process is very helpful.

So it looks like it works, so fingers crossed on this one. We should now be able to go to this application and we'll see if it works or not. So you can just copy this link and let's open up the browser, go to the URL and let's see. Oh, it worked, everything here is working very nicely.

It looks like if you click on any of these they are all working perfectly. You have our filters, you have the portfolio manager. One little, interesting tidbit of information here that I'm not sure if you noticed, I'm automatically logged in. How did that work? Well, the reason it worked is that I was logged into DevCamp Space.

DevCamp Space shares a cookie with your portfolio, that's the reason why you're able to have that kind of cookie-based authentication. So if you're logged into DevCamp Space you're automatically gonna be logged into this application. If you're curious about how that is possible, that is why, if I were to close out of all of these incognito windows and go back to the URL, then you'll notice I'm not logged in. So that's why that is the case.

Let's just triple check, we're gonna go to off, login here, it's not gonna know my password automatically, and yes, everything's working perfectly. Great job if you went through that. Once again, if you do have any issues, do not hesitate to reach out to a mentor or to your instructor and they can help work through them with you.

But an amazing job, this is one of the longest courses I've ever created in my entire life. But I really wanted to give you everything that you needed in order to become a react developer and to build production-ready applications just like you're seeing right here. You now have the ability to perform all of the key API actions, to create records with an API, to update records, to delete, to use all kinds of tools for authorization and authentication, and to implement styles, and everything else that you need.

You have the building blocks now, with the skills that you've learned in this course, you have the building blocks to build any type of React application. Now you may think that you still have a long way to go and you do and so do I, everybody does. We're all on our own development journey and we're all on different stages of it.

But you now have all of the base items and skillsets you need in order to go out and build anything. So, amazing job of going through this, I had a lot of fun, I hope you did too. And good luck with the next step on your own development journey.

Resources

• Final application code
• Heroku CLI