Local Dev Environment and First Steps

An overview of how to setup an effective development environment for Linux, Mac and/or Windows.

To start training to become professional developers, we should start witht he right tools for our development environment. These include the following:

1. A bash-friendly command-line interface

2. A version-control system

3. A text editor

4. A dependency-management utility

5. A native client for Slack

You'll also need a few online accounts to get started. These should all be tied to the same email address! These external accounts include:

1. Slack

2. GitHub

3. Netlify

Please reference the Savvy Coders notebook and go through our video series before reading through the rest of this.

Building a Dev Environment

Whenever we work on a project, we want to make sure that we are using a consistent set of tools. But installing those tools in a way that is consistent across operating systems is a tough problem! Most web developers use tools that are modeled after the UNIX family of operating systems. These tools are usually packaged as a form of terminal emulator.

Because each operating system is so different, we'll need to install a different set of tools to emulate the UNIX terminal through our command-line (more on "command-lines" and "terminals" in a minute):

Linux

• Most Linux distributions ship with their own, fully-featured UNIX-based

  terminal emulators. Popular examples include GNOME Terminal, xterm, or

  Konsole (depending on your desktop environment).

• We also can take advantage of a cool framework that sits 'on top of' zsh that can greatly enhance our terminal experience: "Oh My ZSH"

• If you're using a minimalist distribution like Arch,

  please use kitty, installed through your

  distribution's package manager (e.g. pacman -S kitty for Arch users).

macOS

• For Mac users, the Terminal application works well as a UNIX-compliant

  command-line.

• If you would like a command-line application with more features, iTerm2 is the de facto choice of many devs.

• We also can take advantage of a cool framework that sits 'on top of' zsh that can greatly enhance our terminal experience: "Oh My ZSH"

• For some versions of macOS, you will also need to consent to using XCode

  features. To trigger this installation/consent process, type in git --version and hit ENTER. If a version number is output to the screen,

  you're good to go. Otherwise, follow the prompts to make sure that you're

  set up with Terminal dev tools.

Windows

• Windows is the tough one...the windows command line is notoriously wrong

  for web development. Luckily, the folks behind git have come up with a

  solution: git-bash, a UNIX-esque terminal emulator for Windows packaged

  with git!

• Do download both git and git-bash, head to git-scm.com, hit the "Downloads for Windows" button, and go through the prompts to complete the installation process.

• Once the installation process above is complete, use the Windows key to

  search for "Git Bash". Use this command-line for the duration of this

  course.

For All Platforms...

...you could use Hyper, although some folks feel that it's a bit resource heavy. 🤷🏾‍♂️

Interfacing with Computers

The operating system is the program (series of instructions) that runs when you turn on your computer. It handles inputs (keyboard, mouse, camera, network connections) and outputs (monitor, speakers, network connections), manages shared access to computing resources and memory, and reads and writes data to the file system on behalf of any number of simultaneously running applications (web browser, code editor, terminal emulator, music player, etc). We interact with the computer through the operating system, usually by TYPING, TOUCHING, or CLICKING.

Computers can receive user input through either a command line interface (CLI) or a graphical user interface (GUI). In a command line interface (A.K.A. "Console", "Command Line", "Terminal", or "Shell"), the user types commands using the keyboard to tell the computer to take an action. The computer will display the results of the operation by writing text to the screen.

Command-Line GIF

GOAL FOR THE COURSE: All navigation should be done using words instead of pictures, usually through our terminal emulators.

"When I was a child, I used a computer by looking at the pictures. When I grew up, I learned to read and write." -William Shotts, Jr. Linux Command.org

NOTE: From here on out, we'll use the terms terminal, command-line, and CLI interchangeably

To be exact, the terminal or terminal emulator is just the interface for us to enter words in. The shell (e.g. 'bash' or 'zsh') is a program within the terminal that executes some useful commands that we might type. Essentially, without the shell, our terminal would be un-usuable for all intents and purposes.

EXERCISE 1

We will start out by using the CLI to navigate through the file system on our personal computers. The key is to think of the directory structure as a 'tree' with 'branches', rather than a bunch of 1s and 0s stored in memory. The OS abstracts all of that memory management away, so you and I can work directly with the human-facing interface we call a file structure.

1. Open up your terminal of choice and type in pwd. What do you see?

2. Make a note of that folder's location, then repeat the process with your CLI

3. print your starting location: pwd

4. list the file structure: ls

5. change directories: cd

6. move up a directory: cd ..

7. move to your $HOME directory: cd ~

8. In your $HOME directory (~), create a folder called Code for all of your future coding projects. You can do that with the mkdir command (e.g. mkdir ~/Code)

9. Inside of Code, create a SavvyCoders directory for all of your Savvy-related work! You can do that with the mkdir command (e.g. mkdir ~/Code/SavvyCoders).

Developer Accounts

There are a number of different online services that help us be productive. Here are three that we'll use for this class. When setting these up it behooves you to associate these all with same email.

Slack

All of our communication will go through the class-specific Slack channel! Please sign up for an account (if you haven't already) and download the slack client for your OS through your package manager.

GitHub

GitHub profiles are like a combination of LinkedIn and Facebook for developers, as well as a place to back up and store code. We'll learn more about how git and GitHub work later, but for now, it's important to create an account. When you've created an account, post a link to Slack, and follow the profiles of your classmates and instructors!

Netlify

Once you have a GitHub account, you can sign up for Netlify. We'll use Netlify for Continuous Delivery

More Environment Tools

Beyond a package manager and CLI, we need a few more tools to help us work more efficiently.

git

Most Linux distributions come with git pre-installed, as does macOS. For Windows users, we already installed git as a part of downloading git-bash as your terminal emulator.

Verify that you have git installed by typing git --version into your terminal. You should see some numbers (e.g. 2.17.1).

In some versions of macOS, you will need to install XCode tools before using git. This can be done in response to a series of prompts that will appear when you type git --version for the first time.

git is a version control system that tracks changes to the files in our project over time. The concept is that we take 'snapshots' of our project whenever we want to (usually after completing a 'logical unit of work') and attach a clear commit message that describes what was just completed. This is typically done in the imperative tense by convention (e.g. 'Add navigation menu' or 'Fix bug in login form.', etc.). Additional Info

Visual Studio Code

The text editor that we'll be using for this course is called Visual Studio Code (not Visual Studio, which is only available for Windows). It's a modular editor built for web development, maintained by Microsoft, and contributed to by a large Open Source community.

If you're on macOS, install shell commands from the command pallette (CMD + SHIFT + P) by selecting the Install 'code' command in PATH option.

command-palette

Repl.it for Class HW Assignments.

You should have received an invite for repl.it classroom. This is where we will manage most of our HW submissions so you can get credit for them towards graduation. If you haven't please contact your nearest TA or your instructor (preferably via Slack).