Skip to content

Instantly share code, notes, and snippets.

@karlstolley karlstolley/setup.md
Created May 15, 2018

Embed
What would you like to do?
Summer API Technology Setup

If you run into any problems or have any questions about these instructions, ping Prof. Stolley on Basecamp or post to the chat room -- if you're getting error messages, take a screenshot or write down the exact wording of the error.

1. Browser: Firefox 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

If you don't yet have a favorite text editor that is highly capable of syntax highlighting HTML, CSS, and Javascript, give Atom a try. Available for all platforms at https://atom.io Download & install like any other software.

3. Version Control: Git

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 which case you'll get an error informing you that your command-line tools hare already installed). Once it's done, type git version and press return. You should see git version 2.15.1 (Apple Git-101), or a similar number, output in the Terminal window.

Linux Installation

If you're running Linux, Git may already be on your system, depending on the distribution of Linux you're running. 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.

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 Current installer (v. 10.1.0 as of May 15, 2018), 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.1.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 v10.1.0.

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.

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

Node.js ships with a package manager, npm (short for Node Package Manager). 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.

Note that for the ITMD 469/569 class, we'll be using much more sophisticated means of handling local development. But http-server can still be a handy utility.

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.