Deploying the Daily Smarty UI App to Heroku
Hi and welcome back to the react app. In this guide, we're going to push our app up to Heroku.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So as you can see on my screen I hit command + shift + f and I searched in Heroku here. So I'll just do that so you can see it, and I'll get rid of that and if I hit command shift f and type in Heroku, and hit return, you'll see in our package.json we have this Heroku post build command.

large

Now we could just run NPM build or we could run heroku post build. So I'm just going to type in npm run heroku post build, so run that command and basically this is just going to set up our app to deploy to Heroku. So while it's doing that let's go ahead and let's go to Heroku.com and what we want to do on heroku.com is log in or create an account.

You're probably doing this for the first time, so just sign up and created an account, I'm just going to login. Now once that's installed or once that script is done running you want to first leave it there and then go to the dashboard on your heroku account.

Now I have a few apps in here, but what we're going to do is create a new one. So up at the top right here we want to hit new and then create new app.

large

So now we just need to give this a unique app name. If I type in app it's going to be taken, app is not available, so let's just call this something like, since this is the dailysmarty UI let's call it bottega, and it has to start with a lowercase so bottega-dailysmarty-ui. This isn't going to work for you because I'm taking this name so just pick something else and hit create app.

large

Then in here at the bottom, you just need to worry about the bottom here. What we need to do is have the deployment method set to Heroku git using the Heroku CLI so command line interface, so we need to do is first install the Heroku CLI. So go here and we need to type it in as brew install heroku/brew/heroku if you are on a mac, or just click the download installer.

So basically just get it on your system at this point in the course you should be able to install things, I already have it install. So get heroku installed on your machine and I'm going to hit back here, and once that's install. Feel free to pause the video and get that install, what you're going to want to do is go here to create. Or, first we want to install it so deploy using heroku git, this after you have it install. So pause the video get it install and now we'll continue.

So first thing we need to do is login into Heroku so we need to go to our terminal. Now make this, oops, let me get rid of this, and get my app back. Okay so I'm just going to make this so you can see the whole thing. Basically what we want to do here in the terminal is say Heroku login.

large

So once you do that just type in your login credentials, the same credentials you used to create your account here on heroku.com. So I'm now installed, and what we want to do now is create a git repository, we already have that. We don't need to type in git init but we do need to do is add in this remote heroku. So go ahead and type in this, this is going to be different, a different app name.

heroku git:remote -a your-app-name

So I want to do is say heroku git:remote -a bottega-daily-smarty-ui.

large

Okay so I'm going to do that, you're going to do whatever your app name is. Now, the next thing we need to do is git status and there's nothing to commit but what we can do is just follow along in this just to make sure it's working correctly, so git add, nothing happens.

Git commit, let's just say heroku and then obviously there's nothing to commit, the working tree is clean, so what we need to do now is push to Heroku master. So in our terminal we're going to type in git remote and you'll see we have 2 remotes we have origin and heroku.

large

So origin is the remote url that we have set up for our github. So if you type in git remote get-url origin you'll see we have our git url to heroku.

large

So basically we were pushing up to this repository, which is going to allow us to have an open website on the Internet.

So next thing we need to do is just say git push heroku master and this will deploy our app to the Internet. So this might take a bit, so just wait for that to deploy and push up there, I'll speed through it and we will go from there. Okay so you'll see that it is now deployed to Heroku it says bottega-daily-smarty-ui.herokuapp.com, or what ever your app name is, deployed to Heroku.

large

And it says verifying deploy done and a new branch master -> master. So basically this is up on heroku now, so if you go to Heroku.com here on the dashboard. Go to the top here where it says open app if you click on that.

large

It's going to open this link bottega-daily-smarty-ui.heroku.com and you'll see our application is here and it's working, it's fetching our data. Now we type in something in the search bar we can see it works and yeah everything's looking pretty clean it's getting all of our data and our app is up on heroku. You'll see our no post links are working which is fantastic.

Now we have our icon, everything's pretty clean, type in results. Now let's see if it's mobile responsive because that's the next thing we have to add in. So you'll see our app is also mobile responsive, but the homepage isn't, so if I make some more guides on this, the next guides will be how to make the home page responsive.

But yeah, our app is on heroku, and we are basically done with the app 100 percent. Well, I mean there's things you can add, you're never really done with an application, there's always more to make it better. But as of now this application is complete, we have it deployed to Heroku it's on the internet.

What you can do now, is you have all the tools really necessary to go out and create your own app and deploy it and have a website going. So that's what I recommend you do in your free time if you want, is just make an app and deploy it on heroku and you'll be able to have it on your own website like this.

Its pretty awesome, neat stuff. Yeah everything's responsive because of the way we set it up using flex box and css grid with the exception of the one screen because of something we declare, probably the search bar, but yeah everything is good to go, I'm going to stop talking and let's get into the next application. I will see you in the next guides.