Instantly share code, notes, and snippets.

@karlstolley /setup.md Secret
Last active Sep 5, 2018

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

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.15.2 (Apple Git-101.1), or a similar number, output in the Terminal window.

Windows Installation

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.18.0 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.

5. 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.

6. 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 v8.11.3.

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.8.0.

Node.js Windows Installation

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-v8.11.3-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 v8.11.3. 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.

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

@jlopez44

This comment has been minimized.

jlopez44 commented Sep 5, 2018

need help !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment