Configuring the development tools

There are three tools that we will use in most of the examples: a text editor for the coding, a browser (preferably Chrome) to run and debug your app, and the command line to run the web server and execute commands. Let's walk through each of these tools.

A text editor

If you have an existing editor that you like, use that. In this book, I will use Sublime Text 3. You can download a free evaluation of Sublime for OS X, Windows, and Linux. If you prefer to use a free editor, good choices include Notepad++ (Windows), Bluefish Editor (OS X and Linux), and GVIM (Linux). To install Sublime, follow these instructions:

1. Open www.sublimetext.com in your browser.
2. Click on Download.
3. Click on Sublime Text 3.
4. Choose the appropriate version for your operating system.
5. Wait for the download to complete and run the installer.

You should be able to run Sublime now. It's a GUI-based editor that is very intuitive and simple to use. If you're interested in getting more out of Sublime, check out the documentation at www.sublimetext.com/docs/3/.

A browser

I recommend Chrome because it is cross-platform and has an excellent suite of developer tools, including tools for mobile development. You can Download Chrome from www.google.com/chrome.

Once Chrome is installed, start it. To open the developer tools, click on View | Developer | Developer Tools. Then, to enable the mobile app view, toggle the device mode:

Mobile development toggle

This gives you a grid and viewport sized to the dimensions of a mobile device. You may need to resize the browser and refresh the page for the changes to take effect:

Mobile development mode

A command line

Use the default command-line tool that comes with your operating system. For OS X, that's a terminal. For Windows, that's cmd.exe. For Linux, that's (usually) bash. As we build the app, I'll provide most of the commands that you need to run, but here are a few additional commands that you may find helpful when navigating and manipulating the filesystem:

Homebrew

There are a couple of non-native package managers that you will need later in development. As OS X does not include a native package manager, Homebrew was created to service this need. Let's install it now:

1. Open www.brew.sh.
2. Copy the Ruby command:
   

   Copy the Homebrew install command

3. Paste the command in your terminal:
   

   Install Homebrew

4. Follow the installation instructions.

   Now, when you need to install a package with Homebrew, use the following syntax on the command line:

   $ brew install <package>

npm

What Homebrew is for OS X, npm is for JavaScript. It comes preinstalled as a part of Node.js and as we'll need this library as well, let's install both now:

$ brew install node

Java

You will need a Java Runtime Environment to run some of the commands in this book. First, check to see if Java is already installed:

$ java -version

If Java is installed with version 1.7 or greater, you're ready to go. If not, install a recent version of Java:

1. Open www.java.com/en/download.
2. Click on Free Java Download.
3. Click on Agree and Start Free Download.
4. Once the download is complete, open the file that you downloaded.
5. Click on Continue.
6. Click on Install.
7. Enter your credentials, if requested.
8. After the installation is complete, click on Close.

Finally, verify that Java and its proper version has been installed:

$ java -version

Arranging your workspace

Almost as important as the tools themselves is the way you arrange them on your screen. The exact layout may vary depending on the size and number of your screens, but on a 15-inch laptop, the following setup works well for me:

Workspace arrangement

On the bottom right-hand side is my command-line tool. I have two tabs that are open. The first tab is where I run my web server. The second tab is where I input other commands and is used more frequently of the two.

On the top right-hand side is my text editor, where I can browse the project files and edit code. When I make a change, I use ? + Tab (Win + Tab on Windows) to switch to my browser and preview the change.

On the left-hand side is my browser. I use this to preview changes to the code, monitor the developer console for error and debug messages, and inspect the DOM if I'm trying to troubleshoot a bug.

Additionally, not pictured, I have a separate fullscreen browser in order to browse documentation and search Google for help when I run into problems. If you have a second screen, it would be a great place to put this.

Now that you have your development tools and workspace configured, let's get the toolchain up and running.