Getting Started

In CS312 you will use a variety of software tools and online services. Please get ready for the semester by making sure you have installed the following tools and created the following free accounts.

As quick guide to reading these (and other notes in class):

Commands preceded by 💻 should be executed in the terminal (i.e., the Terminal application built into OSX, Windows Powershell, etc.). Copy the rest of the line after the 💻 and paste it into the terminal. The remainder of the block shows relevant example output (not always included).

Online Services

Github

We will be making extensive use of Git and GitHub this semester, including using it for distributing assignment templates and assignment submission. If you have not already, please create a free GitHub account. Note that you can have multiple e-mail addresses associated with your account, e.g., you can (and should) add your Middlebury e-mail address to an existing GitHub account.

Once your account is set up, if you haven’t done so already, request an education discount for your individual GitHub account (not as an organization). Doing so will unlock features on GitHub and free accounts at other services that integrate with GitHub.

Installed software

Read the following instructions completely before starting, paying close attention to the version numbers when specified. You may have some of these tools already installed. Don’t just copy-and-paste, some commands require modifications (e.g. with your e-mail address).

A note to Windows users, most of the core tools we are using should be available for Windows. Some of the ancillary tools, e.g. NVM, may not (although often there are equivalent alternatives). Many of these tools can be installed via the Chocolatey package manager. If you are a current Chocolatey user, keep an eye out for that install option. If that is not a tool you use, I would encourage you to check it out. I regularly use an equivalent tool on OSX (Homebrew) and recommend that approach for managing command-line software tools. Our various workflows and exercises will have been developed and tested on OSX and Linux. If you would like to work in a more tested environment, you could make use of Docker (which we will need anyway) or the Windows Subsystem for Linux.

A note to OSX users, many of these tools can be installed via Homebrew. If you are a current Homebrew user, keep an eye out for that install option. If you are not yet a Homebrew user, I recommend it. Homebrew is “package manager” for OSX that makes it easy to install (and remove) software (especially open-source command-line software).

Browser

All of the modern browsers should work fine, however to ensure a common, multi-platform, environment we will standardize on Chrome. Chrome has the added advantage of the React Developer Tools extension which makes it easy to inspect your React component hierarchies (including props). I suggest installing and using that extension when debugging your React applications.

Editor

As with the web browser, there are a variety of options out there for good programmer’s editors. However, I would like you to install VSCode, which has a good combination of features, a lot of useful plugins, and runs on practically everything. There are two reasons for standardizing on VSCode. First, it is helpful for me if everyone is using the same interface (though you can certainly customize VSCode to be unrecognizable). Second, it has a Live Share plugin that will allow you real-time collaboration. This will make office hours and pair programming a lot easier.

To install extensions click on the blocks icon on the left and browse the available extensions. Please install the ‘Live Share Extension Pack’. That should install everything you need to do live sharing.

Some other extensions that I use are:

Code Spell Checker (spell checking in your code)
ESLint (highlights linting problems as you work)

I also find it useful to be able to launch VSCode from the command line. Mac users, follow these instructions to install the command line tool.

I also encourage you to turn on the NPM scripts view in the Explorer (the left-hand pane). Click the three little dots at the top of the Pane and select “NPM scripts”. This adds a panel at the bottom of the pane which automatically detects all of the scripts in your package.json file. If you hover over the scripts you will see a run button that will run the script in a new terminal.

Git

Make sure you have git installed. You likely already have Git installed (e.g. as part of OSX developer tools).

As an aside, OSX users should install XCode Command Line tools (which includes compilers and other relevant tools like Git) if you don’t already have XCode installed. You will likely need those tools in another class. This guide includes step-by-step instructions.

If you haven’t already, configure git with your name and e-mail (replacing the quoted strings with your information)

💻 git config --global user.name "your name"
💻 git config --global user.email "your email address"
💻 git config --global init.defaultBranch main
💻 git config --global color.ui auto

For example:

💻 git config --global user.name "Laura Biester"
💻 git config --global user.email "lbiester@middlebury.edu"

GitHub offers both SSH and HTTPS-based interfaces to your repository. The SSH interface is our recommended approach in class and setting up a public key with GitHub will be required for other class tools. Follow GitHub’s instructions for creating (if needed) and adding a public key to your GitHub account. If you already have a SSH key setup with your GitHub account, you don’t need to do anything for this step.

If you used git at some point in the past, but not recently, you may have used password authentication for command line interaction, which has now been deprecated. Read through the description for Cloning with HTTPS urls for more information. For that reason and many others our preferred approach is the SSH interface described above.

Node.js

Node.js is a stand-alone JavaScript engine that can be used to execute JavaScript outside the browser, either locally on your computer or on a “backend” server (i.e. “full-stack” JavaScript). As of the writing of this guide, the current “Long Term Support” (LTS) version is v20.17 (“Iron”). The minor version (after the first dot) is likely to change, but I would like you to stick to the v20.x releases.

There are many ways to install Node, but the best way is to use a tool that will allow you to easily migrate between versions. The recommended approach is to use nvm on OSX/Linux and Chocolatey on Windows. If you are on a Windows machine without administrative privileges (e.g., a loaner machine), see the details below.

With nvm, you would install the specified LTS version with

💻 nvm install lts/iron

With nvm, every time you start a new shell, you will use nvm to select a specific version of Node.js, e.g.,

💻 nvm use lts/iron

to set the version once. You can create a .nvmrc file in the top-level directory where you are working on your class assignments that specifies the Node.js version. Then you only need to run nvm use.

With Chocolately, you would install nodejs-lts, e.g.,

💻 choco install nodejs-lts

Users on all platforms should configure npm, the Node.js package manager, distributed as part of the Node.js installation (replacing email address with your e-mail address, etc.) with their information (again replacing the quoted strings with your information):

💻 npm set init-author-email "email address"
💻 npm set init-author-name "name"
💻 npm set init-license "Apache-2.0"

Installing Node on Windows without administrator privileges. You can directly download the Node binaries for windows, no installation required. Extract the .zip file you download to a convenient location. After doing so, you will need to add the newly extracted directory to you Path as described here. Specifically once you have opened the “EnvironmentVariables” window, select “Path” and then click “Edit…”. Within the Edit window, you can use “New” and “Browse” to create a new entry and select the folder extracted above. Note that you will need to close and restart VSCode (or the shell) to pick up the change to the path. If everything worked you should now be able to run node and npm in the shell!

SQLite

We will use the SQLite database during development of certain assignments. SQLite is a library and command-line tool to implement a fully-featured relational database system as a self-contained file. To access your database file outside of your application (for development or debugging purposes), install the sqlite3 client. Try executing 💻 sqlite3 as you may already have this tool installed. If not you can install it via platform-specific package managers (e.g., Homebrew on OSX or Chocolatey on Windows) or by downloading and installing it directly. The former is recommended as those package managers are generally useful for installing a wide variety of command line tools (your instructor makes extensive use of Homebrew on OSX). Alternately you could install a VSCode extension for viewing SQLite files in the editor.

Docker

In both development and production we will use the Postgres relational database system. Postgres is server-based application that is easiest to install and run via a Docker container. Docker is system for building, distributing and running containerized applications (i.e., running a separate operating system, complete with relevant software automatically installed). Install Docker Desktop, which includes both the docker command line tool and Docker compose (for launching multiple containers at once). You do not need to install any images now, we will automatically download the necessary images in the relevant assignments.

Alternative

Occasionally someone will have trouble getting the tools installed. This could be because you have a Chromebook, or OS version is being fussy, or you just don’t have enough free disk space. If this applies to you, please reach out to me about a loaner machine.