Setting Up Your Development Environment

There’s a lot to install and setup. In total it may take close to an hour.

OS-Specific Setup

1. If you’re on Windows, please install the Windows Subsystem for Linux (“WSL”) as indicated on our corresponding docs page.
   • Our intention is to have a development environment that is as similar as possible across all OSes. It seems like WSL can help us achieve this.
2. After you’ve done that, you should be able to proceed with the rest of the instructions here.

Files

1. Create a directory (i.e. a “folder”) somewhere on your computer for this course, perhaps you’d call it cs343.
2. Inside your cs343 directory, create a directory called notes.
   • this would be a great place to put:
     • the class’s slides if you download them
     • your own notes from the in-class mini-lectures
     • your own notes from your out-of-class time working on the preps, labs, and projects
3. If you didn’t already as part of the aforementioned WSL setup (then we hope you’re not on Windows or you missed a step! 😆), inside your cs343 directory, create a directory called dev
   • all the code you write for this course should go in your dev directory, ideally in a subdirectory of dev named for the thing you’re working on

Browsers

1. Install Firefox if you don’t have it already (ensure you have at least 2 browsers installed).
2. For whatever browsers, install extensions:
   1. a userscripts extension like ViolentMonkey
   2. an accessibility checker extension like WebAIM’s WAVE
   3. add a bookmark(let) for the validator
   4. this HTML validator

API Exploration

1. Install Postman
   • PostMan has been adding various paid tiers, please don’t pay money for it at this time, just use the free tier.

Editors

1. Install VSCode:
   • Windows folks (should have already done this when they competed the prerequisite WSL install steps… 😉) do it this way (because we want you to be in this WSL context).
     • Ensure if you’re asked by the install wizard, that you enable/select the following:
       • Explorer context menu
       • Add to PATH
   • Everyone else: Visual Studio Code
2. Install these vscode extensions:
   1. HTML Validate Extension
   2. Live Server
   3. Live Share ExtensionPack(weirdly can’t seem to reach that link any more even though it’s still listed on the Live Share Extension page 🤷‍♂️)
   4. Remote Development extension pack
3. Make sure code is available from command line (“CLI”):

   • Restarting Shell

     Note any time you’re trying to make new apps or commands available to your command line interface, you may need to re-launch your CLI after installing or configuring the new app/command.
   1. Windows: the installer should have done it, try opening Windows Terminal or PowerShell or whatever and just type code and hit enter.
   2. MacOS
   3. Linux: the installer should have added it to your path already, try it in your shell

Git

If you don’t already have git installed (it’s installed by default on macOS and some linux distros), install it (and make sure it’s added to path where you can use the git command from the CLI).

Windows

The git install wizard defaults are probably fine, but if you happen to notice this, consider answering a few of the steps as follows:

Default editor:

vscode

Git Pull something:

rebase

Extra Options:

✅ enable symlinks

(On Windows) Ensure that once you install git, you have git bash, and that in git bash you have curl. This post may help if you don’t have curl on Windows.

Not Windows

Probably you already have git installed, try it in your shell by opening a terminal and running git

Configuring Git (all OSes)

1. Open a terminal
   • Windows: open git bash
   • mac or linux open a terminal
2. run the 2 commands found at the following link, but:
   1. don’t type the $ that’s at the beginning and
   2. change the placeholder values for real ones
      • note: the username and email you set do not have to match things github already knows about
   3. ok, here’s the link - Git::First-Time Setup:YourIdentity

GUI for Accessing Files Remotely

1. Install Filezilla

GUI for Git

One of the best GUIs for Git isn’t available on linux 🤦‍♂️. So in the interest, everyone should Install the GitHub Desktop app.