Setting Up Your Development Environment
Categories:
4 minute read
There’s a lot to install and setup. In total it may take close to an hour.
⏱️ Track your time?
Yo, help a prof out 🙏 and see if you can track 📝 about how long all this takes you.OS-Specific Setup
- 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.
- After you’ve done that, you should be able to proceed with the rest of the instructions here.
Browsers
- Install Firefox if you don’t have it already (ensure you have at least 2 browsers installed).
- For whatever browsers, install extensions:
- a userscripts extension like ViolentMonkey
- an accessibility checker extension like WebAIM’s WAVE
- add a bookmark(let) for the validator
- this HTML validator
⚠️ Safari
tl;dr - don't use Safari in this course
Listen, in general Safari is an excellent browser in many ways. Unfortunately, their excellent privacy-protecting defaults defeat many popular websites' code, esp. when linking to things like protected files. Very likely you will not be able to download provided code from Canvas with Safari (unless you disable their privacy-protecting features, which are themselves excellent and most of the reason to use Safari...).Editors
🫵 VSCode is Required
tl;dr - You must us VSCode in this course
If you have strong feelings about your editor, please know you’re almost certainly right. Tell anyone you wish we said so. That being said, in-class and out-of-class until at least the end of Milestone 2, please use vscode.
- 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
- Ensure if you’re asked by the install wizard, that you enable/select the following:
- Everyone else: Visual Studio Code
- 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).
- Install these vscode extensions:
- HTML Validate Extension
- Live Server
- 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 🤷♂️)
- Remote Development extension pack
- Python
- Pylance
- Flake8
- Black Formatter
- isort
- Django
- Code Spell Checker
- JSON Pretty Printer
- Todo Tree
- 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.
- Windows: the installer should have done it, try opening Windows Terminal or PowerShell or whatever and just type
code
and hit enter. - MacOS
- 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)
- Open a terminal
- Windows: open
git bash
- mac or linux open a terminal
- Windows: open
- run the 2 commands found at the following link, but:
- don’t type the
$
that’s at the beginning and - change the placeholder values for real ones
- note: the username and email you set do not have to match things github already knows about
- ok, here’s the link - Git::First-Time Setup:YourIdentity
- don’t type the
GUI for Accessing Files Remotely
- 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.
Prof’s SSH Key
In case you’re trying to troubleshoot something tricky, you may wish to add my public key to your digital ocean droplet.
This will permit me to act as whatever user you added it to, but it doesn’t give me your password (and so I can’t sudo
or anything like that).
- Download my public key from github
- Add it to your droplet’s
~/.ssh/authorized_keys
file- if you have
ssh-copy-id
on your computer, you can use that as follows:ssh-copy-id -i ~/Downloads/prof-stewart.pub user@droplet-ip
- if you don’t have
ssh-copy-id
, you can do it manually:- ssh to your droplet and then
mkdir ~/.ssh
chmod 700 ~/.ssh
nano ~/.ssh/authorized_keys
- paste the contents of the
prof-stewart.pub
file into this file
- paste the contents of the
- ssh to your droplet and then
- if you have
- let me know your droplet’s IP address or hostname (once we’ve registered domain names and setup DNS)
- or at least let me know when you need me to connect to it.