Software Setup

The Command Line

If you have not used the command line (also known as the terminal) before, please review our introduction to the command line.

Contents

• Install and configure a text editor (all platforms)
• Instructions for Windows
• Instructions for macOS
• Instructions for Linux
• Verify your setup (all platforms)

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 VSCode 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.
  • 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.
   • Download Git here.
   • 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.
   • For more information on how to use Git, check out CS107's Git guide.
2. Download Node.js. 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.
   • Git is already installed on macOS. For more information on how to use it, check out CS107's Git guide.
2. Open the Terminal app.
3. Install Homebrew 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.
   • 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.
   • For more information on how to use Git, check out CS107's Git guide.
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:
   

   $ 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.
3. Verify that NPM is installed by running the command npm -v. The specific NPM version should not matter. For example:
   

   $ npm -v
   8.19.2

4. 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.