7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 What You Need

Let's set up an environment we can use for developing with JavaScript. You'll need Node and a code editor. Then we'll create a simple Gatsby project.

Related Links

1.2 What You Need

Naturally, before we start building our websites with Gatsby, we need to set up our environments to use Gatsby. And these are things that you would typically want for any type of web development. Because they are tools that will become a part of your daily life as a web developer, if they haven't already. So the first thing we need is a tool called Git, G-I-T. Now you might already have Git, and if so, then great. If not, this is what we use to track changes to our source code. And it is very useful if you are working with multiple people. But it's also very useful if you're just working on projects on your own because it allows you to track the changes to your code. Now, we aren't going to be using Git for that express purpose in this course. But we will be using it to download our initial project. So it is important to go ahead and install Git because you will use it in the future anyway. So go ahead and download the latest version for your operating system. The installation is very straightforward, just take the defaults. There might be some options that are recommended. And if those aren't selected by default, then definitely take the recommended options. But once you have that installed, then you can move on to the next thing, which is Node.js. Now, if you're not familiar with Node, it is really a really cool environment. This is a platform for developing JavaScript applications. They can be web applications, desktop applications, or even console applications. And while that's really cool that we can build apps with just JavaScript, we aren't going to be using it for that purpose. Instead, what we want Node for is NPM, it stands for Node Package Manager. And it's how we manage not just our dependencies, but also the tools that we use to develop our applications. Gatsby is one of those tools. So you'll notice that there are two versions. And there's really two things to note here. There's the numeric version, 12 and 13, but the numbers really don't matter. The LTS and the current is what matters. LTS stands for long term support. And typically if you are going to install Node, you want to go with the LTS version. And the reason why I promote that is because if you're like me, eventually you will want to play around and develop some Node based applications. And if you do so, then you want the LTS version. It is a more stable environment than the current version, and it's also much more tested. So download and install the latest LTS version. Once again, take the defaults and you will be good to go. Then once you have all of that installed, then it's time to open up the command line. Because that's how we are going to be doing basically everything else, at least as far as getting our application all set up. So if you want to, you can go to gatsbyjs.org and let's go to the Get Started, and there's a quick start here. Because there's a command that we need to run that's going to install Gatsby and it's right here. We're going to use NPM to globally install the Gatsby CLI. So let's go to the command line, npm install -g, that means to install it globally, and gatsby-cli. Now this is going to download and install the Gatsby CLI. So that we will have a gatsby command that we can use from the command line. And that's how we will create our first project. Now, this can take a few seconds, it can take a few minutes. It just really depends upon your system speed as well as your internet's speed. And once that's done, we will run the gatsby command and we will use new then gatsby-new and press Enter. And this is going to create a new Gatsby website. And then once this is done, all we need to do is step into that directory and fire up our code editor. Now, you'll notice that it's going to ask which package manager do we want to use, and we can use Yarn or NPM. Now if you're brand new to this, you can just stick with NPM and that's what I'm going to do. But if you have Yarn installed, go ahead and use Yarn. It is a better option than NPM, at least in most cases. But if you, once again, are new to all of this, then just stick with NPM. And this will create our new project. Now, if you'll notice, there is this little message that says it's creating a new site from Git. And then there's this GitHub repository that it is pulling all of these files from. This is why we needed Git to begin with, so that it can use this repository as a basis for our starter project. And it needs to use Git to download those files. And then once our project is created, it tells us what to do. We want to cd into gatsby-new, and right here we want to fire up our code editor. Now I'm using Visual Studio Code, which is really the best code editor for anything JavaScript related. And that's not just an opinion, that's just fact. There's nothing that is as good as Visual Studio Code when it comes to JavaScript. Not even the full blown-version of Visual Studio. But of course, you can use whatever code editor that you want and there's many free options available. There's also many paid options available. Visual Studio Code is free, it's also cross platform. So no matter what operating system you're using, you can feel free to use that if you want. If you don't, find, there's many others to choose from. The most important thing is that you use the code editor that you like. Because after all, the code editor is where you're going to be spending most of your time, so [LAUGH] you might as well like what you're using. So now let's go back to the command line and we are going to run gatsby develop. This is going to start up the application so that we can actually develop it. And I missspelt that, so develop. And then this is going to start up a web server so that we can point our browser to that location. And we will be able to edit the files and see the changes inside of the browser. So once this is done, this is going to tell us where we need to point our browser. And we will do so just to make sure that everything is working okay. So you can see we need to go to localhost, port 8000. And we will see our website, just to make sure everything is working. And there we go, we have our default application up and running. So that in the next lesson we can get started with our project.

Back to the top