Development

Installing Node.js & npm

Node (Node.js) is a JavaScript runtime that operates anywhere, even beyond the browser. It lets JavaScript become a general use programming language, and also allows JavaScript to handle backend processes as well. Node Package Manager (npm) is a tool used by most developers working in JavaScript to manage dependencies on behalf of applications in Node.js. It allows a lightweight way to manage dependencies, download and update packages, and publish and share code with others.

First, check if node and npm are already installed on your device. Open a terminal and run these two lines:

node -v

npm -v

If already installed, you should get something along the lines of v22.18.0 for node and 10.9.3 for npm. If your node version is less than 18, consider installing a more recent release. If an error or no version shows up, you will need to download a new version of node and npm using the instructions below.

Node Version Manager (nvm) is one of the recommended ways for installing node. It provides users fine control of what node version is installed on the system, and even allows multiple versions to be installed for various purposes. Follow the directions under "Install & Update Script" at the nvm github page. Note that you may have to update some environment variables for nvm to work. If you are on Windows, you can also use the nvm-setup.exe installer from this github page to install nvm. Once nvm is installed, you can install the most recent version of node and npm through this command:

nvm install --lts

The script may prompt you to run further commands to activate node, follow those commands. If everything is set up correctly, you should now be able to run node -v and npm -v to see your node and npm versions.

Code Editor

While many professionals do use full-fledged integrated development environments (IDEs) for JavaScript like WebStorm, they are often unnecessary for the overhead they introduce unless developing complex, enterprise-level applications.

We recommend lightweight editors such as VSCode. Most in-class coding and office hours help in JavaScript will feature VSCode, and will provide ample support in how best to program for web development using the various extensions and features of VSCode.

Installing & Running Projects

Running JavaScript Code

JavaScript code can be run in many ways. Within a browser, you can open development tools / inspect elements in order to view various aspects about a webpage, including HTML/CSS, network calls, persistent storage, and a console where JavaScript code can immediately be executed.

You will be working with Node throughout the semester in a code editor, so you can run JavaScript by running the node command with a file you want to run as an argument:

node <file_name.js>

Installing Dependencies

Often, projects will use various npm dependencies in order to make certain features function properly. Project starter code will come with a package.json file that determines the exact dependencies that will need to be installed. To install these dependencies, you can run the command:

npm install

This will create a node_modules directory that stores all your dependencies and a package-lock.json that tracks exact versions of dependencies for easier installation and collaboration. Generally, you should not include the node_modules directory in any git commits you make. It is very often included in any .gitignore file, as the dependencies take up a lot of memory in repositories. It is best practice to commit the package.json and package-lock.json to allow any collaborators to download the dependencies on their own.

Dependencies beyond what are included in homeworks starter code are not allowed to be used. However, for the final project, you may install whatever npm modules you desire. When the time comes, search through the npmjs website for any cool modules and frameworks you'd like to use!

Scripts

Often, we will provide custom scripts that run parts of the assignment. These scripts are defined in the package.json file, and can be run with:

npm run <script_name>

For instance, both the prettier and ESLint scripts are already defined for you, and will fix formatting errors and run style checks respectively. You would run these commands using npm run format and npm run lint. For more information on style, see the style guide.

Git & GitHub Classroom

Git

We will be using Git to practice proper version control within this class. While we will not teach the basics of Git, there are many online resources for you to learn Git and Git commands. For this class, you will simply need to know how to clone a repository and push commits to a remote repository. If you plan on working in groups in the final project, knowing how to collaborate on Git properly using pull requests and code reviews will also help.

You can refer to this video from the 19xx website from Penn in order to learn the basics of Git if you aren't already familiar. Feel free to ask through Ed Discussion if you have any issues setting up Git for this course!

GitHub Classroom

We will be using GitHub classroom for you to accept and submit assignments this semester. Make sure you have a GitHub account and git installed on your device. Each homework will have a link to the assignment on GitHub classroom, which you can accept and create a fork of the GitHub repository with the starter code for each assignment. You will need to then clone the repository to a local directory to start working on the assignment. You should make commits often, when you've finished important parts of the assignment, so that you have a version history for any unforseen hardware issues. Once you are done with the homework, you just need to make your final changes and commit to your repo before the due date. While the GitHub classroom might not enforce the due date, we will know when you last commited, so we will only grade the most recent commit before the due date!