JavaScript Everywhere

Chapter 1. Our Development Environment

John Wooden, the late coach of the UCLA men’s basketball team, is one of the most successful coaches of all time, winning 10 national championships in a 12-year period. His teams consisted of top recruits, including hall-of-fame players such as Lew Alcindor (Kareem Abdul-Jabbar) and Bill Walton. On the first day of practice, Wooden would sit down each of his new recruits, players who had been the best in the United States in high school, and teach them to put on their socks properly. When asked about this, Wooden stated that “it’s the little details that make the big things come about.”

Chefs use the term mise en place, meaning “everything in its place,” to describe the practice of preparing the tools and ingredients required for the menu prior to cooking. This preparation enables the kitchen’s cooks to successfully prepare meals during busy rushes, as the small details have already been considered. Much like Coach Wooden’s players and chefs preparing for a dinner rush, it is worth dedicating time to setting up our development environment.

A useful development environment does not require expensive software or top-of-the-line hardware. In fact, I’d encourage you to start simple, use open source software, and grow your tools with you. Though a runner prefers a specific brand of sneakers and a carpenter may always reach for her favorite hammer, it took time and experience to establish these preferences. Experiment with tools, observe others, and over time you will create the environment that works best for you.

In this chapter we’ll install a text editor, Node.js, Git, MongoDB, and several helpful JavaScript packages as well as locate our terminal application. It’s possible that you already have a development environment that works well for you; however, we will also be installing several required tools that will be used throughout the book. If you’re like me and typically skip over the instruction manual, I’d still encourage you to read through this guide.

If you find yourself stuck at any point, please reach out to the JavaScript Everywhere community, via our Spectrum channel at spectrum.chat/jseverywhere.

Your Text Editor

Text editors are a lot like clothes. We all need them, but our preferences may vary wildly. Some like simple and well constructed. Some prefer the flashy paisley pattern. There’s no wrong decision, and you should use whatever makes you most comfortable.

If you don’t already have a favorite, I highly recommend Visual Studio Code (VSCode). It’s an open source editor that is available for Mac, Windows, and Linux. Additionally, it offers built-in features to simplify development and is easily modified with community extensions. It’s even built using JavaScript!

The Terminal

If you’re using VSCode, it comes with an integrated terminal. For most development tasks, this may be all you need. Personally, I find using a dedicated terminal client preferable as I find it easier to manage multiple tabs and use more dedicated window space on my machine. I’d suggest trying both and finding what works best for you.

Using a Dedicated Terminal Application

All operating systems come with a built-in terminal application and this is a great place to get started. On macOS it is called, fittingly enough, Terminal. On the Windows operating system, starting with Windows 7, the program is PowerShell. The name of the terminal for Linux distributions may vary, but often includes “Terminal.”

Using VSCode

To access the terminal in VSCode, click Terminal → New Terminal. This will present you with a terminal window. The prompt will be present in the same directory as the current project.

Navigating the Filesystem

Once you’ve found your terminal, you’ll need the critical ability to navigate the filesystem. You can do this using the cd command, which stands for “change directory.”

Command-Line Prompts

Terminal instructions often include a $ or > at the start of the line. These are used to designate the prompt and should not be copied. In this book, I’ll indicate the terminal prompt with a dollar sign ($). When entering instructions into your terminal application, do not type the $.

When you open your terminal application, you’ll be presented with a cursor prompt, where you may enter commands. By default, you’re in your computer’s home directory. If you haven’t already, I’d recommend making a Projects folder that is a sub-directory within your home directory. This folder can house all of your development projects. You create a Projects directory and navigate into that folder like so:

# first type cd, this will ensure you are in your root directory
$ cd
# next, if you don't already have a Projects directory, you can create one
# this will create Projects as a subfolder in your system's root directory
$ mkdir Projects
# finally you can cd into the Projects directory
$ cd Projects

In the future, you can navigate to your Projects directory as follows:

$ cd # ensure you are in the root directory
$ cd Projects

Now let’s say you have a folder called jseverywhere in your Projects directory. You can type cd jseverywhere from the Projects directory to navigate into that folder. To navigate backward into a directory (in this case, to Projects), you would type cd .. (the cd command followed by two periods).

All together, this would look something like:

> $ cd # ensure you are in your root directory
> $ cd Projects # navigate from root dir to Projects dir
/Projects > $ cd jseverywhere # navigate from Projects dir to jsevewehre dir
/Projects/jseverwhere > $ cd .. # navigate back from jseverwhere to Projects
/Projects > $ # Prompt is currently in the Projects dir

If this is new to you, spend some time navigating through your files until you’re comfortable. I’ve found that filesystem issues are a common tripping point for budding developers. Having a grasp of this will provide you with a solid foundation for establishing your workflows.

Command-Line Tools and Homebrew (Mac Only)

Certain command-line utilities are only available to macOS users once Xcode is installed. You can jump through this hoop, without installing Xcode, by installing xcode-select via your terminal. To do so, run the following command and click through the install prompts:

$ xcode-select --install

Homebrew is a package manager for macOS. It makes installing development dependencies, like programming languages and databases, as simple as running a command-line prompt. If you use a Mac, it will dramatically simplify your development environment. To install Homebrew, either head over to brew.sh to copy and paste the install command, or type the following in a single line:

$ /usr/bin/ruby -e "$(curl -fsSL
https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.js and NPM

Node.js is “a JavaScript runtime, built on Chrome’s V8 JavaScript Engine.” In practical terms this means that Node is a platform that allows developers to write JavaScript outside of a browser environment. Node.js comes with NPM, the default package manager. NPM enables you to install thousands of libraries and JavaScript tools within your projects.

Managing Node.js Versions

If you plan on managing a large number of Node projects, you may find that you also need to manage multiple versions of Node on your machine. If that’s the case, I recommend using Node Version Manager (NVM) to install Node. NVM is a script that enables you to manage multiple active Node versions. For Windows users, I recommend nvm-windows. I won’t be covering Node versioning, but it is a helpful tool. If this is your first time working with Node, I recommend proceeding with the following instructions for your system.

Installing Node.js and NPM for macOS

macOS users can install Node.js and NPM using Homebrew. To install Node.js, type the following command into your terminal:

$ brew update
$ brew install node

With Node installed, open your terminal application to verify it is working.

$ node --version
## Expected output v12.14.1, your version number may differ
$ npm --version
## Expected output 6.13.7, your version number may differ

If you see a version number after typing those commands, congratulations—you’ve successfully installed Node and NPM for macOS!

Installing Node.js and NPM for Windows

For Windows, the most straightforward way to install Node.js is to visit nodejs.org and download the installer for your operating system.

First, visit nodejs.org and install the LTS version (12.14.1 at the time of writing), following the installation steps for your operating system. With Node installed, open your terminal application to verify it is working.

$ node --version
## Expected output v12.14.1, your version number may differ
$ npm --version
## Expected output 6.13.7, your version number may differ

What is LTS?

LTS stands for “long-term support,” meaning that the Node.js Foundation has committed to providing support and security updates for that major version number (in this case 12.x). The standard support window lasts for three years after the version’s initial release. In Node.js, even-numbered releases are LTS versions. I recommend using an even-numbered release for application development.

If you see a version number after typing those commands, congratulations—you’ve successfully installed Node and NPM for Windows!

MongoDB

MongoDB is the database that we will be using while developing our API. Mongo is a popular choice for working with Node.js, because it treats our data as JSON (JavaScript Object Notation) documents. This means that it’s comfortable for JavaScript developers to work with from the get-go.

Official MongoDB Installation Documentation

The MongoDB documentation offers a regularly updated guide for installing MongoDB Community Edition across operating systems. If you run into issues with the installation, I recommend consulting the documentation at docs.mongodb.com/manual/administration/install-community.

Installing and Running MongoDB for macOS

To install MongoDB for macOS, first install with Homebrew:

$ brew update
$ brew tap mongodb/brew
$ brew install mongodb-community@4.2

To start MongoDB, we can run it as a macOS service:

$ brew services start mongodb-community

This will start the MongoDB service and keep it running as a background process. Note that anytime you restart your machine and plan to develop with Mongo, you may need to run this command again to restart the MongoDB service. To verify that MongoDB has installed and is running, type ps -ef | grep mongod into your terminal. This will list the currently running Mongo processes.

Installing and Running MongoDB for Windows

To install MongoDB for Windows, first download the installer from the MongoDB Download Center. Once the file has downloaded, run the installer following the installation wizard. I recommend choosing the Complete setup type, configuring it as a Service. All other values can remain as the defaults.

Once installation is complete, we may need to create the directory in which Mongo will write our data. Within your terminal, run the following commands:

$ cd C:\
$ md "\data\db"

To verify that MongoDB has installed and start the Mongo service:

1. Locate the Windows Services console.

2. Find the MongoDB service.

3. Right-click the MongoDB service.

4. Click Start.

Note that anytime you restart your machine and plan to develop with Mongo, you may need to restart the MongoDB service.

Git

Git is the most popular version control software, allowing you to do things like copy code repositories, merge code with others, and create branches of your own code that do not impact one another. Git will be helpful for “cloning” this book’s sample code repositories, meaning it will allow you to directly copy a folder of sample code. Depending on your operating system, Git may already be installed. Type the following into your terminal window:

$ git --version

If a number is returned, congrats—you’re all set! If not, visit git-scm.com to install Git, or use Homebrew for macOS. Once you’ve completed the installation steps, once again type git --version into your terminal to verify that it has worked.

Expo

Expo is a toolchain that simplifies the bootstrapping and development of iOS and Android projects with React Native. We will need to install the Expo command-line tool and, optionally (though recommended), the Expo app for iOS or Android. We’ll cover this in more detail in the mobile application portion of the book, but if you’re interested in getting a head start, visit expo.io to learn more. To install the command-line tools, type the following into your terminal:

npm install -g expo-cli

Using the -g global flag will make the expo-cli tool globally available to your machine’s Node.js installation.

To install the Expo mobile application, visit the Apple App Store or Google Play Store on your device.

Prettier

Prettier is a code formatting tool with support for a number of languages, including JavaScript, HTML, CSS, GraphQL, and Markdown. It makes it easy to follow basic formatting rules, meaning that when you run the Prettier command, your code is automatically formatted to follow a standard set of best practices. Even better, you can configure your editor to do this automatically every time you save a file. This means that you’ll never again have a project with issues like inconsistent spaces and mixed quotes.

I recommend installing Prettier globally on your machine and configuring a plug-in for your editor. To install Prettier globally, go to your command-line and type:

npm install -g prettier

Once you’ve installed Prettier, visit Prettier.io to find the plug-in for your text editor. With the editor plug-in installed, I recommend adding the following settings within your editor’s settings file:

"editor.formatOnSave": true,
"prettier.requireConfig": true

These settings will automatically format files on save whenever a .prettierrc configuration file is within the project. The .prettierrc file specifies options for Prettier to follow. Now whenever that file is present, your editor will automatically reformat your code to meet the conventions of the project. Each project within this book will include a .prettierrc file.

ESLint

ESLint is a code linter for JavaScript. A linter differs from a formatter, such as Prettier, in that a linter also checks for code quality rules, such as unused variables, infinite loops, and unreachable code that falls after a return. As with Prettier, I recommend installing the ESLint plug-in for your favorite text editor. This will alert you to errors in real time as you write your code. You can find a list of editor plug-ins on the ESLint website.

Similar to Prettier, projects can specify the ESLint rules they would like to follow within an .eslintrc file. This provides project maintainers with fine-grained control over their code preferences and a means to automatically enforce coding standards. Each of the projects within this book will include a helpful but permissive set of ESLint rules, aimed at helping you to avoid common pitfalls.

Making Things Look Nice

This is optional, but I’ve found that I enjoy programming just a bit more when I find my setup aesthetically pleasing. I can’t help it; I have a degree in the arts. Take some time and test out different color themes and typefaces. Personally, I’ve grown to love the Dracula Theme, which is a color theme available for nearly every text editor and terminal, along with Adobe’s Source Code Pro typeface.

Conclusion

In this chapter we’ve set up a working and flexible JavaScript development environment on our computer. One of the great joys of programming is personalizing your environment. I encourage you to experiment with the themes, colors, and tools that you use to make this environment your own. In the next section of the book, we will put this environment to work by developing our API application.