1.2 Setup

Hi, folks. In this lesson, we're going to get a basic development area set up, ready to work through the various coding examples that I'll be showing you throughout the course. During the course we'll be using a variety of JavaScript versions. It will be a mixture of mostly ES5 and ES2015, but we'll also include some newer features such as ES Modules. ES2015 is now largely supported in most modern mainstream browsers, but ES modules did not have as much support yet. For this reason, it's still best to use a transfiler to convert the latest JavaScript into a previous version of JavaScript that would be understood by a wider number of browsers. For this course, I've chosen to use SystemJS with the Babel plugin because it's extremely simple to set up and requires very little configuration. The repository for this course is set up to use SystemJS out of the box. And while we won't need it til later in the course, we can go ahead and claim the repository at this point. You'll need to have the latest stable version of Node.js installed, as well as the Git version control system. So if you don't have these already, head on over to nodejs.org and get git-scm.com and follow the installation instructions for your platform. So to start with then, we can clone the repository, which we can do on the command line. You can get the URL at the repository from GitHub. Once the clone is complete, which basically just means that the repository has been copied from GitHub down to your local computer. We will then need to run npm install to install the project's dependencies. npm is the package manager for Node.js and allows us to install many, many useful packages for JavaScript development. Once this command is finished, everything should be ready to use. Let's just take a quick look at what you'll get in the project directory once you've cloned the repository. There are a couple of files there for Git, the gitignore License and readme.md files. And there are some npm files as well, the package.json and the package-lock.json files. We can ignore these, they aren't related to the course material at all and just contain meta information for git and npm. There is a config.js file which contains a small amount of configuration for SystemJS. We won't need make any changes to this throughout the course and again this can largely be ignored. There's also a very basic HTML file called index.html. This file loads SystemJS and the configuration file, and tells SystemJS to load a file called index.js. This index.js file is our playground, and is where I'll be adding most of the different examples that we'll work on. There is another branch in the repository which contains individual files for each of the different lessons throughout the course. Just to separate out the various coding examples that we're going to be looking at. These are in a branch called completed-course, and you can look at these at your own leisure. Let's just open up the index.js file, it should contain just the use strict directive and a console.log statement. We'll be looking at strict mode in more detail later in the course. The console.log statement just writes a message to the browser's console, but it can be very useful for debugging purposes and we'll be seeing it a lot throughout the course. As well as SystemJS the project also uses a tool called browser sync, which allows us to use a local web server. And again, this is very useful for development purposes and is a very common practice in JavaScript development. We can run browser sync by running the command npm run serve in the command line. We'll first need to move into the directory that we've just cloned. We can then use browser sync by running the npm run serve command. So this command should open up your default browser and load the index.html file from the repository in the browser. And I'm just gonna open up the console now. And in the console there you can see the working message that came from the console.log statement back in the index.js file. One feature of browser sync is that it automatically watches our files and refreshes the browser whenever we save a file. So if we go back to the index.js file now, and let's just change the console.log statements. When we go back to the browser, we should find that it has refreshed itself automatically and updated the log message. Great, so this is all the setup that we need to do right now. Let's move on and start learning JavaScript in section two. Thanks for watching.