Skip to content

Instantly share code, notes, and snippets.

@karlstolley

karlstolley/setup.md Secret

Last active Aug 24, 2020
Embed
What would you like to do?
Setup Links & Instructions for a Basic Web Development Environment

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.

1. Browser: Firefox Quantum: Developer Edition

Available for all platforms (Mac, Windows, Linux) at https://www.mozilla.org/en-US/firefox/developer/ Download & install like any other software.

2. Editor: Atom.io

Available for all platforms at https://atom.io Download & install like any other software.

3. Version Control: Git Installation

Be sure to install Git version 2.28.0 or higher.

MacOS/OS X Installation

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.17.2 (Apple Git-113), 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.

Windows Installation (Windows Subsystem for Linux, WSL)

Note: These instructions haven't been tested. If you're a Windows 10/WSL geek, please contact Stolley with fixes or suggestions.

Try following these instructions, which include NodeJS (set up below). You should also be able to install Git by running

  $ sudo apt-get install git-all

Windows Installation (Legacy)

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:

  1. On the Select Components screen:
  • Select "On the Desktop" under Additional Icons
  • De-select "Windows Explorer Integration"
  1. On the Adjusting your PATH environment screen:
  • Choose "Use Git from Git Bash only*"
  1. 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.20.1 or some similar number.

Linux Installation

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.

4. Version Control: Basic Git Configuration

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 becoming the preferred new 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 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 other repositories that you'd like to convert from master to main, check out this excellent post's instructions.

5. JavaScript Runtime: Node.js

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.

MacOS/OS X Installation

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 v10.15.0.

HOWEVER. If you’re serious about preparing your Mac for more advanced forms of digital 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:

i. Install Homebrew

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.

ii. Install Node.js with Homebrew

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.

iii. Test Node.js

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.

Node.js Windows Subsystem for Linux (WSL)

Follow these instructions for installing NodeJS

Node.js Windows Installation (Legacy)

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-v10.5.0-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 v10.15.0. If that doesn’t work and you get something like a command not found error, try restarting your computer and repeating the steps above.

Linux Installation

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.

5.1 Configure Node/npm

At your command line, change directories so that you're in your home directory, and then run the print working directory command so you know the full path to your home directory:

$ cd
$ pwd
/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/hank/.npm-packages

You'll then need to add that .npm-packages directory to your PATH variable in 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. Open that file in your text editor of choice, and at the bottom of the file, add the lines below:

# Add global npm packages to PATH
NPM_PACKAGES="${HOME}/.npm-packages"
export PATH="$NPM_PACKAGES/bin:$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.

6. A Basic Web Server with Node.js/npm

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@0.11.1
added 4 packages and updated 12 packages in 1.495s

You now can run the command 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 in your browser 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 will leave it running and cause you headaches.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.