WDD 430: Web Full-Stack Development

W01 Setup: Tools

Overview

This setup activity walks you through installing and configuring the development tools you'll need for WDD 430. By the end, you'll have a complete development environment ready for course activities, assignments, and the team project.

Instructions

Follow these steps to configure your development environment.

Code Editor: VS Code

Visual Studio Code is the code editor for this course.

  1. If you already have VS Code installed, verify it's up to date: Help → Check for Updates...
  2. Otherwise, download and install VS Code.

AI-Assisted Coding

VS Code's inline code suggestions are a legitimate part of a modern developer's workflow and so they will be used in this course. Line-by-line autocomplete speeds up the tedious parts of writing code you already understand, and that's exactly the use case it's built for. It is not a substitute for thinking.

At this stage of the program, you are responsible for every function, module, and architectural decision in your project. You must be able to explain what each piece of code does, why it is structured that way, and how it fits your system.

To enable inline suggestions complete the following:

  1. In VS Code, open File → Preferences → Settings (or Ctrl + , on Windows, Cmd + , on Mac).
  2. Search for "inline suggestions".
  3. Enable "Editor: Inline Suggestions".
  4. Optionally enable "Editor: Inline Suggestion Show Icons".

Version Control: Git

Git is the version control system you'll use to track code changes and collaborate with teammates.

  1. Verify Git is installed by opening a terminal or command prompt and typing: git --version
  2. If you get an error or have an outdated version, download and install the latest Git.

Repository Hosting: GitHub

GitHub is the platform where you'll store your Git repositories and collaborate with your team.

  1. Sign in to your existing GitHub account at GitHub.com.

    Use your existing GitHub account from prerequisite courses. Do not create a new account.

In this course, you will create separate repositories for your individual work. Do not use a single course repository for everything. Use clear repository names that reflect their purpose.

Note that this course uses GitHub Projects for project management in your team project. You will receive specific directions on setting up GitHub Projects with your team.

Runtime & Package Manager: Node.js and npm

Node.js is the JavaScript runtime that allows you to run JavaScript on the server-side. npm is the default package manager that ships with Node.js and is required for this course. Use npm commands consistently in your projects and examples.

Minimum required versions: Node.js 20.9+ and npm 10+

  1. Install or update to the current LTS (Long Term Support) version of Node.js from nodejs.org. Follow the Node.js setup guide for your operating system.
  2. Verify the installation by opening a terminal or command prompt and checking:
    • node --version
    • npm --version
  3. If either version is below the required minimum, update npm or reinstall the current Node.js LTS release.

Deployment Platform: Vercel

Vercel is a cloud platform for deploying Next.js applications and serverless functions.

  1. Sign up for a Vercel account using your GitHub account (select "Continue with GitHub").
  2. Verify your email address.
  3. Install the Vercel CLI by opening a terminal or command prompt and typing: npm i -g vercel.