Appendix A. Setting up your environment

To follow along with this book, you need to have some programs installed on your machine.

A.1 Choosing a text editor

You can choose from many great editors. Most of the popular ones have add-on Vue plugins that add syntax highlighting to .vue files.

I use WebStorm because it makes debugging a breeze. Some other good editors include Visual Studio Code, Sublime Text, and Atom. You can even use Notepad if you’re feeling old school.

For .vue file highlighting in VSCode, Sublime, or Atom, you need to install a plugin (table A.1).

Table A.1. Editors and plugins

Editor	Plugin	URL
Sublime	vue-syntax-highlighting	https://github.com/vuejs/vue-syntax-highlight
Atom	language-vue	https://github.com/hedefalk/atom-vue
vim	vim-vue	https://github.com/posva/vim-vue
Visual Studio Code	vetur	https://github.com/vuejs/vetur

This book is text-editor agnostic. For example, when I teach you how to debug tests, I’ll use a method that works for all text editors and IDEs using Node Debugger and Chrome DevTools.

A.2 Using the command line

You’re going to use the command line a lot in this book. You won’t write any complex scripts, but you’ll regularly enter commands to run tests with npm scripts, start servers, and clone repositories with Git. You need to be able to navigate the filesystem with cd and create directories with the mkdir command.

TIP

If you need to improve your command-line skills, you should read Getting to Know the Command Line by David Baumgold: www.davidbaumgold.com/tutorials/command-line.

Throughout this book, I’m going to instruct you to enter the following command. When I tell you to enter the following command, I mean that you should add the code that follows to a command-line interface in the project root directory, and press Enter.

You should use a UNIX command-line interface. Linux and macOS users can use your favorite terminal program. For Windows users, I recommend using Git Bash. Git Bash is a UNIX terminal emulator that is installed by default by the Windows Git installer.

Make sure you’re in the Hacker News project root directory. If you’re using a UNIX terminal, you can check the current working directory with the pwd command.

A.3 Installing Chrome

You should use Chrome as your browser for this project. It makes it easier for me to teach you what commands to enter if we’re both using the same browser. Plus, Chrome has an awesome Debugger that I’ll show you how to use in chapter 2.

If you don’t have Chrome installed, you can install it following the instructions on the Chrome install page—https://support.google.com/chrome/answer/95346.

A.3.1 Using Chrome DevTools

In this book, I’ll sometimes ask you to open the Chrome DevTools. Chrome DevTools are a collection of tools built into Chrome that make debugging easier. There are a huge number of tools, but the only ones you’ll use in this book are the Console and the Debugger. There’s a detailed guide on using the Debugger in chapter 1.

To use the Console, you need to open the DevTools. Use Ctrl-Shift-J (or Cmd-Opt-J on Mac) to open the DevTools and bring focus to the Console. Try typing a sum into the Console as follows:

1 + 1

You’ll see the output in the Console (figure A.1). This is a great way to get quick feedback on your JavaScript—I write little functions in there all the time.

Figure A.1. Using the Chrome Console

In the book, when I tell you to write something in the Console, this is the Console I’m talking about.

A.4 Installing the Vue.js devtools Chrome extension

The Vue.js devtools extension for Chrome is a tool that makes debugging Vue components, events, and Vuex easier. To install the Vue.js devtools in Chrome, go to the Chrome webstore page—http://mng.bz/1Qxn.

The Vue devtools add a new tab to the Chrome DevTools window. You can use it to inspect the Vue component tree and see the state of each component (figure A.2).

Figure A.2. Using Vue developer tools to inspect the Hacker News app

I won’t instruct you to use it in the book, but if you’re confused with the application or want to debug the component tree, Vue devtools are useful. For a full guide on using the Vue developer, read the article, “Using the Vue.js Devtools” by Joshua Bemenderfer (https://alligator.io/vuejs/vue-devtools/).

A.5 Installing Node and npm

In this book, you’ll run tests in node and use npm to manage packages, so you need to have both installed on your machine. npm is bundled with Node. If you already have both installed, fantastic, you can skip to the next section.

You can install Node in a few different ways:

• One-click installer
• Homebrew or MacPorts (OSX only)
• Using the Linux package management system (Linux only)
• Using NVM

A.5.1 Installing Node with the one-click installer

This is the easiest way to install Node. If you’re on Windows or macOS, a one-click install method is available online. Visit the Node website, and follow the instructions to download Node using the installer—https://nodejs.org/en/download.

A.5.2 Installing Node with Homebrew (macOS only)

Homebrew is a package manager for macOS. If you already have Homebrew installed, you can use it to install Node. If you don’t have Homebrew, you can install it from the website—https://brew.sh. I recommend installing using the Mac one-click installer if you are not familiar with Homebrew.

To install Node with Homebrew, enter the following command in your terminal:

brew install node

A.5.3 Installing Node with Linux package managers (Linux only)

Most Linux distributions have Node in their package repositories. You need to enter the correct command for your Linux distribution into the command line.

In Ubuntu, you can use apt-get:

sudo apt-get install -y nodejs

In Arch Linux, you can use pacman:

pacman -S nodejs npm

In CentOS, you can use yum:

sudo yum -y install nodejs

The Node website has a list of all known package managers that include Node in their repositories and instructions on how to install using them—https://nodejs.org/en/download/package-manager.

A.5.4 Installing with NVM

NVM is a script that helps install and manage node versions. It provides a way to manage multiple node versions on the same machine.

I won’t give detailed instructions on using NVM; you can read about installation and usage on the GitHub repository—https://github.com/creationix/nvm. But I recommend using it if you use Node regularly.

A.5.5 Verifying that Node and npm are installed

To check whether Node is installed on your machine, enter the following command in the command line:

node -v

This should output the version number, something like v8.1.1. If the command displays an error, node isn’t installed. To install node, you can try a different method. Next check whether npm is installed as follows:

npm –v

Again, this should output a version number, like 5.0.3. Node comes with npm by default, so if you have Node installed, you should also have npm. If not, you can follow the guide on the npm site—https://www.npmjs.com/get-npm.

A.6 Installing Git

To work along with this book, you need to clone Git repositories from GitHub, so you need Git installed. To check that Git is installed on your machine, enter the following command:

git --version

You should see a version number, like git version 2.11.1. The command line will display an error if you don’t have Git installed.

If Git is not installed, you can install it by following the official instructions on the Git website: http://mng.bz/Waad.

A.7 Starting a new chapter

In this book, you’ll work on a Hacker News application. This is available on GitHub at https://github.com/eddyerburgh/vue-hackernews.

Most chapters in this book have a corresponding branch in the Git repository for you to use. To make it possible for you to jump into a chapter and work along with the code examples, you can change to the relevant branch for the chapter using Git.

Note

Branches are different versions of a code base in a Git project. You can read more about Git branching on the Git website: http://mng.bz/jOOV.

To get started, download the project using git clone, as follows:

git clone [email protected]:eddyerburgh/vue-hackernews.git

If you do not have SSH set up with GitHub, use the HTTPS version, shown next:

git clone https://github.com/eddyerburgh/vue-hackernews.git

To get the correct code for the chapter, you need to change to the chapter branch. To do this, change into the Git repository, like so:

cd vue-hackernews

Then change branches with git checkout:

git checkout chapter-2

If you’re dropping into a chapter, you should change to that chapter branch. For example, if you’ve jumped into chapter 4, git checkout the chapter-4 repository when you’re inside the Git project, as follows:

git checkout chapter-4

Note

There is no chapter-5 or chapter-6 branch.

A.8 Starting chapter 5

Chapter 5 uses a different project to learn how to test events in Vue apps. To get started, download the project using Git clone as follows:

git clone [email protected]:eddyerburgh/vue-email-signup-form-app.git

Or use HTTPS, as shown next:

git clone https://github.com/eddyerburgh/vue-email-signup-form-app.git

Change into the Git repository like so:

cd vue-email-signup-form-app

Then change to the starter branch with git checkout:

git co starter

A.9 Installing the Java Development Kit

In chapter 13, you run Selenium Server, which requires the Java Development Kit (JDK). The minimum Java version is 7 (the full version string is 1.7.0). You can check your Java version from the command line as follows:

java –version

If you don’t have the minimum version installed, follow the instructions for your operating system on the Java website: http://mng.bz/8JJW.