Previous Lecture Complete and continue  

  2. Starter code installation


In just a moment we'll get started. Before we do, though, if you're a Twitter user, make sure you tweet at me and let me know you've started the course.

My handle is @anthonygore which I'll link to below the video.

And also, I want to hear from you when you progress, tell me you're liking, what you're finding challenging, or any other thoughts you have.

As I said, this is a hands-on course and we're going to be building a project as we learn the key features of Vue.

To save you having to create this project from scratch, though, I've created a starter code repository on GitHub.

I've put the link to that below the video so go ahead and open that in your browser now.

Troubleshooting

By the way, if you have any problems during the following installation process, make sure check the bottom of the README file where I've put a troubleshooting section.

I keep this up-to-date with any common problems that people have.

So if you get stuck, firstly, make sure you've followed all the steps exactly as I have in these videos and in the README file, and if that doesn't work, consult the troubleshooting section.

Forking

Let's now install the code.

Before we continue, make sure you're logged in to your GitHub account. If you don't have an account, pause this video and make sure you create one.

The reason you need to be logged in is that, rather than installing this code directly from my repo, you first need to make a fork.

It's very easy to do this, just go up to the top right hand corner and click the "fork" button, and choose your account, and the fork will begin.

What forking does is its creates a copy of the repository for your own account. This is going to be handy for storing your code as you create it, but also, if you want to share your code with anyone, you'll have a repo that you can easily link people to.

Now that that's complete, you can see we have the same poster-shop repo, but now it's under my account.

Installation

Now that you've made a fork, you're ready to download the code onto your computer. To do this, you just need to click on this "Clone or download" button.

I recommend you select "Clone with HTTPS". If you don't know what that means, don't worry, just click to copy that link to your clipboard.

The next step is to open a terminal on your computer, and change into the directory where you want to have your starter code installed. For me, I want to put it into my Projects directory so I'll type...

$ cd ~/Projects

Once you're in the right directory, type "git clone" and a space, and then paste that link you just copied to your clipboard from GitHub and press enter.

That's going to download the starter code.

$ git clone https://github.com/vuejsdevelopers/poster-shop.git

Dependencies

Once the starter code is finished downloading, you need to install the NPM dependencies.

So, firstly, change into the directory that the code installed in, which should be poster-shop. Then, do an NPM install and the project dependencies will be downloaded.

$ cd poster-shop
$ npm install

Branching

One last thing for this video. I want to show you a cool feature that'll help you if you ever get stuck in the course.

You'll see here that we have a bunch of different branches on this repository.

Each branch represents the code at a different spot in the course. So for example, the "video/28" branch will show you the state of the code at the end of video 28.

So, if you suspect there's something wrong with your code, come to the repo and select the branch corrosponding to the video you're currently watching.

You can then click "Compare". Make the base branch the previous video, in this case, "video/27". Now you'll see how the state of the code changed between those videos which will help you debug any problems you're having.