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.
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’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.”
Navigating the Filesystem
Terminal instructions often include a
> 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
# 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
# finally you can cd into the Projects directory
In the future, you can navigate to your Projects directory as follows:
# ensure you are in the root directory
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:
# ensure you are in your root directory>
# navigate from root dir to Projects dir/Projects >
# navigate from Projects dir to jsevewehre dir/Projects/jseverwhere >
# 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:
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:
$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install
Node.js and NPM
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
$brew install node
With Node installed, open your terminal application to verify it is working.
## Expected output v12.14.1, your version number may differ
## 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.
## Expected output v12.14.1, your version number may differ
## 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!
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
$brew tap mongodb/brew
$brew install firstname.lastname@example.org
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:
To verify that MongoDB has installed and start the Mongo service:
Locate the Windows Services console.
Find the MongoDB service.
Right-click the MongoDB service.
Note that anytime you restart your machine and plan to develop with Mongo, you may need to restart the MongoDB service.
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:
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 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
-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.
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:
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.
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.