If you run into any problems or have any questions about these instructions, Ping Stolley on Basecamp or email him at karl.stolley@gmail.com -- if you're getting error messages, take a screenshot or write down the exact wording of the error.
Available for all platforms (Mac, Windows, Linux) at https://www.mozilla.org/en-US/firefox/developer/ Download & install like any other software.
Available for all platforms at https://atom.io Download & install like any other software.
Be sure to install Git version 2.30.0 or higher.
A lot of developer technologies require XCode’s command-line tools, but they are useful in their own right. To install them, you’ll need to pull up the Terminal app on your Mac. The easiest way to do this is through Spotlight Search: click the magnifying glass in the upper right-hand corner of your Mac, and start typing Terminal; click the result that appears labeled as an Application.
You’ll have a small white window that pops up, with a line that most likely has the name of your computer followed by a colon, tilde, and dollar-sign, e.g., janes-mac:~ $. There’ll also be a cursor, which may or may not blink.
Type xcode-select --install (note the space before the two hyphens) and hit the Return/Enter key. (You might be prompted for your admintrator password.) You should see a some output fly by, unless you've installed XCode previously. In that case, you'll get an error informing you that your command-line tools are already installed. Once the script has finished running and you see the dollar-sign prompt again, type git version and press return. You should see git version 2.30.1 (Apple Git-130), or a similar number, output in the Terminal window.
To easily install the very latest version of Git, follow the instructions below for installing Homebrew and then run:
$ brew install git
Don't forget to configure Git once you've got the latest version installed.
Don't use Windows for serious web development. Just don't. These instructions are preserved for completeness.
Download the Windows installer for Git and double-click the downloaded file’s icon to install it; it’ll probably be in your Downloads folder.
Walk through the Git Setup Wizard, making the following changes from the defaults:
- On the Select Components screen:
- Select "On the Desktop" under Additional Icons
- De-select "Windows Explorer Integration"
- On the Adjusting your PATH environment screen:
- Choose "Use Git from Git Bash only*"
- On the Configuring the line ending conversions screen:
- Choose "Checkout as-is, commit as-is"
Git Setup will then complete the installation; it takes a few minutes. Click Finish when it's done.
Look for the Git or git-bash icon on your desktop. Double-click it, and type git version into the terminal window that opens. You should see output like git version 2.32.0 or some similar number.
If you're running Linux, Git may already be on your system. Run git version in your terminal shell to see if there's any output. If you get a "Command not found" error, Google around for the preferred method to install or compile Git on your Linux distribution, preferably with its package manager so you automatically receive updates along with the rest of your system.
You'll need to open a terminal window (MacOS/Linux) or a Windows shell (Windows), and type the following commands. Replace YOUR NAME and YOUR@EMAIL with the actual name and email you use.
$ git config --global user.name "YOUR NAME"
$ git config --global user.email "YOUR@EMAIL"
When you've run those commands, run git config --global --list and you should see your name and email. If you do not, re-run the commands above to fix any mistakes you've made.
As of Git 2.28.0, it is essential to configure Git to use a custom default branch name. The default branch had been master, which Git, GitHub, and the wider industry are moving away from because of its historically racist connotations. main is now the preferred name for the default branch, and we will use that in this course. To set main as your default branch for all new repositories that you create, simply run:
$ git config --global init.defaultBranch "main"
If for whatever reason you cannot install at least Git 2.28.0, your best bet is to create an alias for yourself, such as git new, which you will need to use in place of git init:
$ git config --global alias.new '!git init && git symbolic-ref HEAD refs/heads/main'
If you have old repositories that you'd like to convert from master to main, check out this excellent post's instructions.
Finally, you need to tell Git which merge strategy to use in case you end up interacting with a remote branch that has changes you don't yet have locally--and local changes that are not yet on the remote.
To start with, you'll tell Git to use the default merge strategy:
$ git config --global pull.rebase false
Eventually, you'll remove that value and set pull.ff to only instead, but we'll cover that in class soon. Go with false on pull.rebase for now.
Once you've done all of that configuration, check that you've set everything correctly by running:
$ git config --global --list
You'll see output for each of your configuration values. If you've made any mistakes, just rerun the git config --global commands above with the correct value.
Node.js is a server-side JavaScript platform. In this case, "server" refers to your own personal computer—as opposed to JavaScript's usual hideout in the web browser.
There are two options for installing Node.js on MacOS. Read about both before making a decision.
The first, which is not preferable, is to download and install the Mac Node.js installer from the Node.js download page. Walk through the LTS installer, and accept the defaults. Test that the install was successful by pulling up the Terminal app on your Mac. The easiest way to do this is through Spotlight Search: click the magnifying glass in the upper right-hand corner of your Mac, and start typing Terminal; click the result that appears labeled as an Application. At the prompt in the Terminal window (the prompt will look something like janes-mac:~ $), type node -v and hit the Return/Enter key. You’ll see another line of output similar to v14.17.5.
HOWEVER. If you’re serious about preparing your Mac for more advanced forms of web and software development, here is the second option, which I recommend. It is a more sophisticated, less hassle-prone way to get Node.js and a bunch of additional developer-grade tools:
Assuming you've alread installed the Xcode command-line tools above, in the Git installation step, this should be pretty straightforward. You’ll be able to install Homebrew, which gives you access to a whole galaxy of developer tools for easy installation and updating on the command line. To install Homebrew, just copy and paste the line below into your Terminal window, and press return:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
You may be prompted for your administrative password, and to answer a few questions. A bunch of output will fly by. Once you’re returned to the command-line prompt, go onto the next step.
To install Node.js, once Homebrew has finished installing itself, just type brew install node and press return. A bunch of output will fly by.
At the prompt in the Terminal window (again, the prompt will look something like janes-mac:~ $), type node -v and hit the Return/Enter key. You’ll see another line of output similar to v11.6.0.
Don't use Windows for serious web development. Just don't. These instructions are preserved for completeness.
Download Node.js by choosing the LTS Windows Installer (.msi) on that page. You’ll choose either 32- or 64-bit. If you’re not sure whether your computer is 32- or 64-bit, you can right-click the Computer icon on your Windows Desktop and look for the System type entry under System. If you’re still not sure, download the 32-bit version.
Once you’ve downloaded the installer file (it will be called something like node-v14.17.5-x64.msi, double-click it and walk through the installer, accepting all of its defaults.
After the Node.js installer has run, open the Windows start menu, and type cmd into the search box, which should return a result for Command Prompt. Open the prompt. That will pull up a Windows shell. It will have a prompt that looks like C:\Users\jsmith> (with your username instead of jsmith).
At that prompt, type node --version and press return. It should output a line of text that reads something like v14.17.5. If that doesn’t work and you get something like a command not found error, try restarting your computer and repeating the steps above.
Again, if you're running Linux, I assume you know what you're doing. Google around for the preferred method to install or compile Node.js on your Linux distribution of choice.
At your command line, echo out the value of the $HOME environment variable to make sure your shell has it set:
$ echo $HOME
/home/hank
In that case, a user called hank learns that his home directory is at /home/hank. With that information in hand, you'll tell Node's package manager, npm, to store global packages at a directory that you create, .npm-packages:
$ mkdir ~/.npm-packages
$ npm config set prefix $HOME/.npm-packages
Check to make sure you set the value correctly with the npm config get command. You'll have output to your correct path; /home/hank is just a placeholder example here:
$ npm config get prefix
/home/hank/.npm-packages
You'll then need to a path to the binaries inside the .npm-packages directory to your shell's startup scripts (Google your operating system and shell to learn which file this likely is). This will vary depending on your login shell and operating system. If you're using bash, for example, you will likely have a .bash_profile file in your home directory. Zsh users will have a .zshrc. Open the correct file in your text editor of choice, and at the bottom of the file, add the lines below for your operating system:
# Add global npm packages to PATH
NPM_PACKAGES="$HOME/.npm-packages/bin"
export PATH="$NPM_PACKAGES:$PATH"
Save and close the file, and then reload your startup profile at the command line. Again, assuming your startup file is called .bash_profile, you'd run:
$ source ~/.bash_profile
From there, you can run the command echo $PATH to check that your npm packages location has been added to the front of your PATH.
Don't use Windows for serious web development. Just don't. These instructions are preserved for completeness.
# Add global npm packages to PATH
NPM_PACKAGES="$HOME/.npm-packages"
export PATH="$NPM_PACKAGES:$PATH"
Note: some Windows installations have issues with the $HOME variable. You might need to run cd ~/.npm-packages and then pwd -- put the path returned by pwd between the quotation marks for NPM_PACKAGES above.
Node.js ships with a package manager, npm (short for Node Package Manager), which we configured in the previous step. To check that your installation of Node.js and npm is fully operational, in your terminal window (MacOS/Linux) or your Windows shell (Windows), type the following command—mind the space before the -g part—and hit the Enter/Return key:
npm install http-server -g
You should see a few lines of output, the last two lines of which will look something like:
+ http-server@13.0.0
added 7 packages and updated 22 packages in 22s
Check that you've installed http-server so that it can be run anywhere on your command line with the which command. If you're successful, you'll see a path, similar to the one here:
$ which http-server
/usr/local/bin/http-server
If you get no output, your paths are incorrect. Work through the npm configuration and PATH setup steps above.
With a path output from the which command, you can now run http-server from any directory (folder) in your file system, and it will be served up locally for you to access in your web browser at http://localhost:8080/. That means you can easily do web development without having to post your work to the web, and without the pitfalls or ugly file:/// paths if you choose File > Open in your browser. To stop the server, hold down the Ctrl key and press C. That actually stops it; closing your terminal/shell window before stopping the server will leave it running and cause you headaches.