Setting Up Version Control for the Birthday Countdown Project
Welcome back to the react course where we are building out the Birthday Countdown application and this guide we are going to set up our application and that's about it.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So go ahead and hit command-space type in terminal and if you're on a Windows computer get to your command prompt ASAP and now I'm going to navigate to the desktop and I'm going to store my project on the desktop. And the way we generate our project. If you remember it is js generate and this app we're going to select react redux and we won't be doing any redux in this application but the future we might get around to it and we might add that into this application.

large

So let's select react redux so we are prepared for anything. I'm going to name this Birthday Countdown App and now that's on my desktop. Now I'm just going to type in open with a period after that and

large

I'm going to drag this to my favorite code editor which is Visual Studio code and I highly recommend that you use Visual Studio code as well. Okay so now that we are in Visual Studio code let's go ahead and open up our source folder. Not that our source folder and components and app. Okay so let's rename this to .gitignore and handle that now. Okay so let's go ahead and install our dependencies so npm install or npm i.

Now that those are installed let's go ahead and set this up with git so git init and that will initialize or repository git status and you'll notice that our node modules aren't in there because we named this to .gitignore if you haven't done that do that now get rid of the example. Now we're going to git add then git status it's going to be green. Now we can push it up to our repository location but we haven't set that up either so let's go to Chrome then Github and let's set up our repo. So just sign into your account and create a repo starter project and let's name it birthdaycountdown and you can name it whatever you'd like obviously but I'd name it something that goes along the lines of what it is. All right so once I've done that I'm going to make it a public repository. This way you can link to my commits if you ever want to. I'm going to change this to Bottega Code School you're just going to leave that as you and then I'm going to create the repository. Now I'm going to copy this

large

and basically, we're going to go along the lines of this. You can even copy this but I personally like to type things out in the terminal. Well actually let's close this terminal instance and let's do it in Visual Studio code. If you're not using visual studio code just simply open the terminal navigate to birthday countdown and you should be good to go. So and make sure you install your node modules in here because we want to install the birthday countdown app dependencies nothing else. Okay so git remote add origin paste in that link.

large

Then we can push up now so git push -u origin master that will push up our application to GitHub and it didn't work. Why? We didn't commit our code so type in git commit -m "initial commit". Now we can type and git push -u origin master and that will push it up to our repo. If you go I and reload the page to Github you'll see your project here and yeah it will show that we committed this ten seconds ago and we are all set up. Let's go into a visual studio code real quick and make it and started up and make a change and see if it's working so npm start you'll notice it's running in the browser and nowhere because I have a different app running. So then let me go ahead and close that all right. So the reason mine's not working is. Like I said I have this app running. I was wondering how it was running since all my terminal instances are closed but I realized it's running in a different visual studio window so I'm going to stop that now I can type in npm start. You might have run into the same error and it's good that I show you this because of that very reason you might have run into it. So yeah now it's running at low cost 3000. If I reload that it's going to say DevCamp React Starter and now let's just make a change real quick in our app.js. I'm going to put Birthday. Okay, so I'm gonna reload. It's going to be there. Sweet it works. Let's go ahead and get started with the first component we will be building in the next guide.