Guide: Development Environment Setup

git

Navigate to: https://git-scm.com/ (opens in a new tab).

Click on "Downloads" -> "Windows" -> "Click here to download".

Run the installer executable using the defaults for all installation steps.

GitHub Account

Navigate to https://github.com/ (opens in a new tab).

Create an account if you do not have one. Choose a username that will work well for your professional portfolio. Avoid using a username that contains the word "SAIT". My GitHub username is warsylewicz and you can view my public repositories here: https://github.com/warsylewicz/ (opens in a new tab).

Login to your GitHub account.

GitHub Desktop

Navigate to https://github.com/apps/desktop (opens in a new tab).

Click "Download now" and then click "Download for Windows (64 bit)" and then run the installer executable.

During installation, click "Sign into GitHub Desktop" and it will use the same account as the previous step.

Close GitHub Desktop app for now.

GitHub Student Developer Pack

Navigate to https://education.github.com/pack (opens in a new tab).

Click "Sign up for Student Developer Pack" and follow the instructions. This will give you a free GitHub Pro account and access to a number of free software tools, e.g. GitHub Copilot.

Node.js

Navigate to https://nodejs.org/en/ (opens in a new tab).

Click "Download Node.js (LTS)". Note: LTS (Long term service) will work best for you. Do not try to obtain a higher numbered version because there may be dependency issues that are not compatible with Next.js.

Run the installer executable using the defaults for all installation steps.

Visual Studio Code

Note: If you already have VS Code installed, you can skip this step.

Navigate to https://code.visualstudio.com/ (opens in a new tab).

Click "Download for Windows" and run the installer executable. During installation accept the agreement and using the defaults for all installation steps.

Visual Studio Code Extensions

Open VS Code, click the extensions button on the left or press Ctrl + Shift + x.

Search for and then install each of the following extensions:

• GitHub Copilot

  • After installation, click "Sign In" in the pop-up near the bottom right corner of the window and follow the instructions.

• Prettier - Code formatter

  • I recommend enabling "format on save" enabled by following these steps:

    1. Press Ctrl + , to open the settings.
    2. Search for "format on save" and check the box.

  • Perform the following steps once you have a Next.js project, e.g. after you have cloned one in the next part of the Week 1 Assignment.

    • Using the Explorer in Visual Studio Code, open the file /app/week-1/page.js

      1. Press Ctrl + Shift + p to open the command palette.
      2. Type "format document with" and select "Format Document With..."
      3. Configure default formatter
      4. Choose prettier

• Tailwind CSS Intellisense

• Code Spell Checker