Color Mode

Setting Up Your Development Environment

Introduction

Before we dive into coding, it is essential to set up your development environment properly. This guide will walk you through the steps to install and configure the tools you'll need. We recommend the following software:

Please note that a Chromebook is not an acceptable device for this course. You will need a Windows, macOS, or Linux computer to complete the assignments. With newer Chromebooks, you may be able to install a Linux subsystem, but this is not recommended due to potential compatibility issues and high levels of technical expertise required.

Installing VS Code

VS Code is a lightweight yet powerful code editor that supports JavaScript and many other programming languages. Your instructor will use this editor in class, and it is the only one your instructor can readily support. Follow these steps to install VS Code:

  1. Go to the official website: https://code.visualstudio.com/
  2. Download the installer for your operating system (Windows, macOS, or Linux).
  3. Run the installer and follow the prompts to complete the installation.

Once installed, you can open VS Code and explore its extensions to enhance your coding experience.

Installing or Updating Node.js (v22+)

Node.js is a runtime environment for executing JavaScript code outside the browser. If you are using Node Version Manager (NVM), please use NVM to install Node.js. Detailed OS-specific instructions for NVM can be found here. If you prefer a direct installation or only have one version of Node.js installed, follow these steps:

  1. Visit the official Node.js website: https://nodejs.org/
  2. Download the latest LTS (Long-Term Support) version for your operating system.
  3. Run the installer and follow the instructions.
    • Windows: Use the default options during installation.
    • macOS: Drag the Node.js application to your Applications folder.
    • Linux: Follow the specific installation instructions provided on the website.
  4. Verify your installation by opening a terminal and running the following command. Keep in mind that any previously open terminals will not recognize the new installation until you close and reopen them. Ensure the output shows a version number or 20.11.0 or higher: 
    
node --version

Installing pnpm (v10+)

pnpm (Performant Node Package Manager) is an efficient and fast package manager that we recommend over the more traditional npm. Unlike npm, pnpm uses a content-addressable storage system, which means packages are installed only once, even if multiple projects depend on them. This saves disk space and speeds up your workflow.

It is highly recommended to install pnpm globally on your system using your operating systems specific installation instructions. We have copied most of the instructions from the official pnpm installation page below for your convenience:

macOS

Install pnpm using Homebrew by running: 

brew install pnpm

After installation, restart your terminal to ensure the changes take effect. Then, verify the installation by running: 

pnpm --version

Linux

Run the following command to install pnpm via a script: 

curl -fsSL https://get.pnpm.io/install.sh | sh -

Ensure pnpm is added to your PATH by following the script's instructions. After installation, restart your terminal to ensure the changes take effect. Then, verify the installation by running: 

pnpm --version

All Operating Systems Using NPM

This option is not recommended but sometimes necessary. If you have Node.js installed and prefer to use npm, you can install pnpm globally by running the following command in your terminal:

  1. Ensure Node.js is installed; see the previous section.
  2. Open a terminal and run the following command to install pnpm globally: 
    
                    npm install -g pnpm
  3. Close and reopen your terminal, and then verify the installation by running: 
    
                    pnpm --version
  4. If the above steps fail, you should try installing pnpm using OS-specific instructions instead.

Troubleshooting: PNPM Not Found in PATH

After installing PNPM, always close and reopen your terminal to refresh your system's PATH environment variable. If PNPM is still not recognized, you may need to manually add its location to your PATH.

To find where PNPM was installed, download this script and run: 

node find-pnpm-global-bin.mjs

The script will output the directory where the PNPM binary is located. To use PNPM from any terminal window, add this directory to your system's PATH environment variable. If you are not sure how to do this, you can ask an AI assistant for guidance, look up instructions for your operating system, or contact your instructor or TA for help.

Conclusion

Setting up your development environment with the necessary tools is the first and most important step in this course. Completing this setup early will help you work more efficiently. If you encounter any issues during installation, feel free to reach out to your peers, assist each other, or consult online resources and the official documentation. You can also seek guidance from the course TA, if available, or the instructor. Working together and utilizing these resources will help you overcome any challenges and stay on track this semester.

Once you have completed the setup, you are ready to start completing this units assignments. You will need additional software for future assignments, but this setup will be sufficient for the first few weeks. The instructor will provide instructions for any additional software needed as the course progresses.