- Read Tutorial
- Watch Guide Video
So I hit command + space on mac, and typed in terminal. I'm going to hit return, and that just opens up my terminal. Now what I want to do here is basically place my project where I want to place it. OK. So I'm going to say cd documents/react because that's where I want to put it. You can put it wherever and I'm just going to say js-generate and type in the name of my project or select the project there.
OK we are going to want to react redux router. We can be using a lot and I'm going to call it prop-management, with a dash. Then CD into your project and run npm install. Well first thing, let's open it up in a code editor and let's change our gitignore file. Let's close on all this welcome and let's change gitignore.example to just .gitignore.
We've done this before, so I'm not going to explain that. OK, now what we're going to want to do is either from the terminal or from your code editor terminal Let's type in npm install. That is going to install all of our dependencies.
Obviously, you know what we're doing at this point again. Now while that's going down let's just go into our index.html in our static folder, and let's change this title to property management.
I'm going to close out of that. I'm going to close out on my static folder. I'm going to head into my components going to go to app.js, and I'm going to change this H1. Let me increase my font size real quick. And zoom in a bit. So that's a bit larger now. You can see that better. Let's changes this H1 to say property management.
So what I want to do is basically create a console and type in git init. That will initialise our git repository. Let's say git status and let's open this window up a bit better. You can see we have our files or new files. Now it's never going to look like this after this point after our first commit. It's just going to show the files that we modify and create.
So let's go ahead and say git add ., git commit -m "initialised project".Now if you say if you say git status it says branch master nothing to commit working clean tree. Let's go ahead and put it on Github.com. I'm going to open up chrome here, go to github.com, I'm going to go to start project and I'm going to give this a repository name of prop-management.
I'm going to first put it on to a different owner. You are going to leave that the same. Most likely I'm going to put it on Bottega-code-school and hit create repository. Cool, you'll see this. Now I've done this before, just go out and copy these two links. Paste them in your terminal and then now if you say git remote.
You'll see we have origin, and I'll show you how to put it on heroku again after we push it up to github. So we have github origin there. Let's go ahead and push it up now. So this dash -u is going to say upstream if you just say git push -u origin master then in the future you won't just be able to say git push master or git push where you say origin master so that's why we're putting -u were setting upstream we're saying master is our main branch. When we push to origin we want to push to master OK.
Go ahead and select or put that command in. It says: branch master set to track remote branch master from origin. So now when you make a change you can just say git push origin instead of saying git push origin master It saves us a couple of lines, because we know that that's our default branch.
I'm going to go back to Chrome and let's reload our github page here and you'll see that we have some potential security vulnerabilities hit dismiss and select risk is tolerable to this project. Right. You'll see that we have our application here and that's pretty dope.
So let's go ahead and put it on Heroku now so we can get it up and running in the browser without having to go to localhost, mainly so we can show it to our friends, family, and employers. So hit create new app. If you don't want to do it from here. You can do it from the command line, except for that's going to give it a name we probably don't want.
So let's just go to Heroku on the dashboard here and hit create a new app for the app name. I'm going to call it Bottegapropertymanagement just so we know it's from Bottega. Create app and then we have some options here.
Now if you've never done this before you're going to want to follow all these instructions. All of these ones at least. If you went through the last videos, the last three applications we built, where we push heroku and you followed along with that. All you have to do is the bottom part.
You're already most likely logged into your terminal with heroku if you're not go ahead and do that. If I've walked you through this before all you need is this command. Go ahead and copy and paste it. Now go ahead and say git remote. You'll see you've got two remotes we have origin at Heroku. So now we want to push it up to Heroku. All we have to do is they git push heroku.
So basically we're hosting it in two different places. Not really, we are only hosting it in one place on heroku. We're pushing our our code to two different repositories. OK. We're pushing it up well two different locations is a repository.
We're pushing it up to Heroku and Bottega. Now the reason we're pushing it up to Bottega is so other people can contribute to it if they want. I mean theoretically, we are not going to do that on this application.
Most likely no one else is going to modify the application. Basically we want to put it up on version control, and we want to host it on Heroku because heroku is really easy to put it up on. So that's going to take a second.
Once it's done it will be live and it will show you the link here. You can also click in here, open app at the top of our browser here and it will take you. It says "Heroku | Welcome to your new app". Refer to the documentation if you need help deploying.
Now it's going to say that until this is done, this always takes a bit, and you can see it's done now. It pushed to master, new branch master. All right so now that we have that you can see it says: bottegapropertymanagement.herokuapp.com. You'll see something different for you, your name then Herokuapp.com. You can click that again or you can just click on it in here.
Now that is live. So if we reload this page it will show our application. You'll see we have property management. OK. Now we're not going to want to push to Heroku every single time we make a change that would be awful. So we just did this to know that we have it deployed and when we pushed a heroku it's live on the Internet.
So to close out of that. I want to close out of heroku, and I'm going to close out of github and I'm going to go back to the to the terminal here in the VS Code. Let's just start our servers so that we can get our app up and running.
Let's say npm start and it says project is running at localhost3000. If you got an error it's most likely because you already have something running out of localhost3000. Go ahead and close all your terminal instances except for this one and rerun that app that command and it should work.
If you don't want to close it, and you want that application that you have running on localhost3000 to remain running. then you can just go to env.js and you can change the port that you want to run it on. So if yours is running you don't have anything else up and running you don't want to run any other applications right now. Don't even worry about all of what I just said about localhost3000.
I'm going to close that and I'm going to minimize this a bit and I'm going to head over to Chrome and I'm going to open up localhost3000.
Now I'm also going to close off my terminal instance. I don't want this running if you're using a text editor like sublime, you're going to want to have this open because you're going to be running your server in here and installing NPM packages.
If you're running everything in the terminal in your built-in text editor, you don't need a an external terminal open until we get it into the Mongo stuff to get our server up and running. So just close that.
All right. So your application should be running here and we're good to go. So let's go ahead and commit our code one more time. I don't think we changed anything since we initially committed it, but let's say git status and it says your branch is up to date.
So we're all good there. Let's go ahead and go back here and in the next video we are going to get started with the sign in and sign up feature. Okay. I'll see you then.