Software Setup

Below you'll find information on how to set up your development environment

for the course based on your operating system. If you encounter any issues,
please reach out to the course staff on the forum or stop by office hours.

Install and configure a text editor (all platforms)

You will need a text editor that can edit HTML, CSS, and JavaScript files. You are free to use
any editor or IDE of your choice; however, our recommendation (and the editor we will use in
lecture) is VSCode.

You can download and install VSCodelaunch[external] for your operating system. Here are a
few configuration tips once you have it installed:

 Trust a folder: Create a folder where you will keep your work for this class. Open the
folder in VSCode (e.g. by clicking on the top sidebar icon and then clicking Open
Folder), and when prompted, choose to trust its contents.
 Install the ESLint extension: Click on Extensions along the left and search for ESLint.
This will flag linter issues (often stylistic, but also many that may suggest problems with
functionality) in the editor so you don't have to run the linter separately.
 We recommend that you disable JavaScript › Suggest: Auto Imports. VSCode has
some trouble understanding which libraries are usable and will often suggest adding
imports that lead to errors.
o To find this option, go to File -> Preferences -> Settings, and search for it.
 Change Editor: Tab Size to 2. This is the value we will use in our starter code and the
linter. If you want to use a different tab size, you will have to update the linter
configuration file to avoid errors (we will discuss this later when we post assignment 1).
 Adjust autocomplete and suggestion settings to your liking. Some folks find it helpful,
while others find it gets in the way. You can search for "auto close" and "suggest" to see
the options.
 Take note of Files: Hot Exit. By default, when you close VSCode, it will remember the
changes you have made to open files so you will have them again when you reopen it, but
it will not actually save the changes back to the file. This can be confusing because, even
though you don't have any VSCode windows open, the actual files may not have your
most recent edits. If you like this behavior (e.g. because you open and close your editor a
lot and don't want to deal with save prompts all the time), that's fine; just make sure you
hit Save.

Instructions for Windows

 1. (Optional) Install Git: Git is a version control system that helps you manage your
projects. It lets you view, compare, and take snapshots of changes you make. While not
required for the work in this course, it can be very useful, especially for the final project,
and is widely used in other courses and in the real world.
o Download Git herelaunch[external].
o When installing, make sure to check the boxes that enable symbolic links and
install additional unix tools. This will improve your development experience,
especially when working with others' projects.
2. Download Node.jslaunch[external]. Make sure to choose the LTS (long-term support)
version. Run the downloaded installer and follow the steps. This will also install NPM,
node's built-in package manager.
3. Follow the steps to verify your setup.

Instructions for macOS

1. (Optional) Git: Git is a version control system that helps you manage your projects. It
lets you view, compare, and take snapshots of changes you make. While not required for
the work in this course, it can be very useful, especially for the final project, and is
widely used in other courses and in the real world.
o Git is already installed on macOS. For more information on how to use it, check
2. Open the Terminal app.
3. Install Homebrewlaunch[external] by pasting the command at that website into the
terminal. Homebrew is a package manager for macOS that helps you install software.
Many development tools are provided through it.
4. On some newer systems, you may see a message that says Warning:
/opt/homebrew/bin is not in your PATH. If so, run the suggested commands under
"Next Steps."
5. Next, run brew update to update Homebrew's list of packages.
6. Install Node.js version 18 and NPM (node's built-in package manager) by running brew
install node@18.

7. Link the newly installed version of node by running brew link --force --overwrite
node@18.

8. You'll also likely need to grant Terminal "Full DIsk Access", or else programs you run
from the Terminal won't be able to create files. To do this, System Settings (or System
Preferences depending on your macOS version), Privacy and Security, Full Disk Access,
and check the box for Terminal.
9. Follow the steps to verify your setup.

Instructions for Linux

This depends heavily on your Linux distro. You will need the latest Node.js LTS (version 18)
and NPM. Here are the instructions for Ubuntu:

1. Open your terminal (e.g. by pressing Ctrl+Alt+T).

2. (Optional) Git: Git is a version control system that helps you manage your projects. It
lets you view, compare, and take snapshots of changes you make. While not required for
the work in this course, it can be very useful, especially for the final project, and is
widely used in other courses and in the real world.
o Git may already be installed. Try running git in a terminal. If it is not installed,
you may see a message about how to install it, e.g. sudo apt install git.
o For more information on how to use Git, check out CS107's Git
guidelaunch[external].
3. Add the PPA to your system by running: curl -sL
https://deb.nodesource.com/setup_18.x | sudo -E bash -. This is needed
because the version of Node in Ubuntu's repo varies by OS version, but is often
somewhat old.
4. Install Node.js and NPM by running: sudo apt install nodejs
5. Follow the steps to verify your setup.

Verify Your Setup

1. Open your command line.
2. Verify that Node.js is installed by running the command node -v. You should see a
version beginning with 18. For example:

3. $ node -v
v18.15.0

Note: If you have a newer version of Node (e.g. 19), you should be okay. We recommend
Node 18 based on its longer support window.
4. Verify that NPM is installed by running the command npm -v. The specific NPM version
should not matter. For example:

5. $ npm -v
8.19.2

6. If both of the above commands print out a number and no error messages, you should be
all set! It's okay if the numbers you get don't match these exactly.