Part 1: Setup

Locally On Mac (and Linux)

For Mac users, you can install Ruby/Rails locally very easily. Because Mac just runs Unix under the hood, these instructions work for most flavors of Linux as well.

1. Get Xcode: You will need Apple's Xcode installed first and get its command-line tools working. It is a free download from the App Store, but it is large and will take some time.

2. Install Homebrew: Homebrew is a package manager for the Mac that makes installing new software very easy. You can install this tool with this terminal command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once it is installed, run brew doctor to see if there are any issues that need to be fixed.

3. Install Git. You may already have Git on your machine; you can easily check with the command git --version and see if this gives you a response. If not, there is an official page for installing git at https://git-scm.com/book/en/v2/Getting-Started-Installing-Git. Go to the page and follow the instructions for Mac. Verify this was installed by running git from the terminal.

4. Install Ruby Version Manager: RVM is a nice tool to switch between multiple versions of Ruby. Install it with the following command:

\curl -sSL https://get.rvm.io | bash -s stable

Once it is installed, either restart your terminal or use the command source ... that RVM gives you at the end of the installation to get RVM active. Then install Ruby 2.6.6 with the command rvm install 2.6.6

5. Install nodejs: Use homebrew to install nodejs with the command brew install nodejs

6. Install rails: gem install rails -v=5.2.4.4 --no-document

7. Test your installation: We will build a simple test app using the command line. Open up terminal and switch to the Documents directory by typing cd Documents or whatever directory you keep 67-272 files. After that, create the rails app with the following commands.

rails new testapp
# (you'll see a bunch of output)
cd testapp
rails server

You can test that this works by going to localhost:3000 in your internet browser and seeing a basic rails splash page.

8. Get an editor and browser extensions: There is an "official" editor for this class, in most of the class demos Prof. H will be using Visual Studio Code as it is available for Windows, Mac and Linux. Be sure to install this now, as well as installing the following extensions right now:

• Live Share: This extension is absolutely essential for labs and office hours and will allow us to interact with you and your code.
• Ruby: Ruby language support and debugging for Visual Studio Code.
• VSCode Ruby: A great extension written by a former 67-272 TA, Stafford Brunk, that adds additional support to the Ruby extension.

There are additional extensions that you might find helpful, but not essential for this class.

Finally, if you are using MacOS Mojave (10.14) or earlier or using Linux having bash on the command line, Prof. H has also made his dotfiles available online if you want to customize your command line so that it matches what you see in lectures. The README file has instructions on how to install these files. This is not required.

If on the other hand, you have a newer version of MacOS or using Linux having zsh on the command line, Prof. H has a fork of ohmyzsh at https://github.com/profh/ohmyzsh and can be installed with the command below. This is not required, but it will give you the shortcuts Prof. H uses in class, if interested. (There is also a "profh" theme in this fork that he uses in class, if interested.)

sh -c "$(curl -fsSL https://raw.githubusercontent.com/profh/ohmyzsh/master/tools/install.sh)"

Locally On Windows

Setup Windows Subsystem for Linux (WSL)

If you already have WSL 2 setup you can skip until at least step 6 section.
If you already have WSL 1 setup you can skip to step 2.

Installation instructions are based on these Windows docs

1. Enable WSL

   Open windows powershell as an administrator and enter:

   dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
   

2. Enable extra option for WSL 2

   In the same powershell window:

   dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
   

   Note:
   We recommend WSL 2 for this class for performance and support reasons,
   but there are a few reasons you might not want it:

   1. You are running a very old version
      of windows and it is not supported (probably only a problem if you have
      avoided updates for over a year)
   2. You need to run virtual machines on out-of-date vm software (older
      than VMware 15.5.5 or VirtualBox 6)
   3. You computer is managed by a mischevious power-hunger admin who has
      locked virtualization off in the BIOS

   Chances are that none of these are an issue but talk to Matt (mjkern) if
   you have questions or concerns.

3. Restart your computer

4. Download and run the WSL2 Linux kernel update package for x64 machines

   Note: if you are running an ARM64 machine then you should instead use
   the ARM64 package. This probably is not you, but you can double
   check with systeminfo | find "System Type" in powershell.

5. Set the default WSL version to 2 for new installations with this powershell
   command:

   wsl --set-default-version 2
   

   Note: you can always change this to version 1 later (with
   wsl --set-default-version 1) if for some reason you want to install a
   distribution on WSL 1 instead of WSL 2.

6. Install Ubuntu 20.04 on WSL

   Find Ubuntu 20.04 LTS in the Windows store
   and select "Get" on the distro page. Then select "Install".

7. Initialize your Ubuntu installation

   1. Launch an Ubuntu 20.04 terminal (it will take a few minutes)

      Note: you can do this by searching for Ubuntu 20.04. You may want
      to pin this to your start menu for easy access in the future

   2. When prompted, enter a username of your choice

   3. When prompted, enter a password of your choice

   4. Record the credentials for the account you just created somewhere
      that you will not lose them

   5. Make sure you are running the most recent software (and will use
      it in the future)

      Enter this in terminal:

      sudo apt update -y && sudo apt upgrade -y
      

      When prompted, enter the password you just created. You will not see
      the cursor move as you type - this is expected and is a security
      feature. Press enter after typing your password.

      Remember how this password process works - this will often happen
      when you use the sudo keyword (which is essentially running the
      command as an administrator).

      This will take a few minutes.

8. Nice work! Now a few things you should know:

   • you can paste into the terminal from you windows clip board by
     right-clicking

   • you can get to your windows files if you really need to, although this
     is slower and we will recommend that you keep files for this class all
     in the linux file system that you are in right now

     cd /mnt/c
     

     or, you can probably get all the way to your Documents folder with

     cd /mnt/c/Documents\ and\ Settings/<your windows username>/Documents
     

     where <your windows username> is the first 4 characters of your
     windows username.

     Note: on wsl 1 this is more likely

     cd /mnt/c/Users/<your windows username>/Documents
     

   • if you are new to linux, here is
     a cheat sheet for common terminal commands

   • if you start typing something terminal, entering a tab will try to
     autocomplete the command

Install Ruby 2.6.6

1. Install gpg2 (a prerequisite for rvm)

   sudo apt install -y gnupg2
   

   Note: unless otherwise specified all of these instructions are meant
   to be run in a terminal for the Ubuntu distribution you just set up.

2. Install rvm (based on these instructions)

   gpg2 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
   \curl -sSL https://get.rvm.io | bash -s stable
   

   If this fails, try changing the keyserver url to one of the other
   options listed on the rvm troubleshooting page

3. Close your terminal and open a new one (or source ~/.bashrc should work)

4. Install Ruby 2.6.6 (this may take a minute)

   rvm install 2.6.6
   

5. Set default Ruby version

   bash --login
   rvm --default use 2.6.6
   

6. Close and re-open the terminal

7. Check installation

   rvm list
   

   You should see =* ruby-2.6.6 in the output.

Install Rails 5.2.4.4

1. Install nodejs (a prerequisite)

   curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - && sudo apt install -y nodejs
   

2. Install Rails 5.2.4.4 (this may take a few minutes)

   gem install rails -v=5.2.4.4
   

3. Test installation

   1. Pick a good directory

      We are going to create a trivial web app. Make sure you are in a
      folder that you want to be in.

      I recommend creating a folder for each lab (and phase) right where
      you are, the home directory. You will be here by default when you
      open a terminal, and can always get back here with cd ~.

      Avoid working in any path that begins with /mnt/c/ as this will
      almost certainly cause issues with rails new, git init, chmod,
      and other important commands because of the way that wsl translates (or
      fails to translate) file permissions. If you're intersted, there is
      more info and a potential work-around.

      So use mkdir and cd to get where you want to be. For example:

      mkdir lab01
      cd lab01
      

   2. Create an application with the name "testapp"

      rails new testapp
      

      (this may take a minute)

      Debugging Tip - If you executed this command in you windows file system
      (any path that begins with /mnt/c/) then you probably get this error:

      error: chmod on /mnt/c/Users/mjker/Documents/TAing/testapp2/.git/config.lock failed: Operation not permitted

      fatal: could not set 'core.filemode' to 'false'

      Solution - work in a directory that does not begin with /mnt/c/,
      probably ~.

   3. Change diretories into the new application

      cd testapp
      

   4. Install the new app's dependencies

      bundle install
      

      Note: this command can be slow and buggy, especially if you are
      using wsl 1. If the terminal hangs (nothing changes for a few
      minutes) then try pressing enter. You may have to try this command
      multiple times. If it fails in a consistent way seek help from a TA.

   5. Run the application

      rails server
      

   6. Open your browser and put localhost:3000 in
      the address bar (or open the link)

      You should see the basic rails splash page:
      

      Congrats, you did it! (When you're done the key combination CTRL c
      will stop the server)

Install Visual Studio Code

Note: Visual Studio Code is the required editor for this class. You also
must have the extensions mentioned in these instructions. If you already
have VS Code installed then skip to step 3.

1. Go to https://code.visualstudio.com/
   and select "Download for Windows"

2. After the download completes run the installer and click through the
   prompts

3. Open Visual Studio Code from the start menu

4. Install the Remote - WSL extention
   for Visual Studion Code (click this link and then click "Install")

   If requested, reload Visual Studio Code.

5. Open the command palette

   View > Command palette...

   Or use the shortcut Crtl+Shift+P

6. Enter Remote-WSL: New window to open a Visual Studio Code window that
   is running from Ubuntu 20.04 on WSL instead of the current window which is
   running from Windows 10.

   Note: if you have more than one distribution installed you should use
   the Remote-WSL: New Window using Distro... command and then specify
   Ubuntu 20.04.

7. When the new Visual Studio Code window opens, close the one that you were
   working from

8. Find and open the extensions sidebar via the menu on the left side of the
   screen. It should be the 5th option from the top.

9. Search for and install these extensions, as follows:

   1. Live Share by Microsoft

      A few seconds after you install you will see a toast in the
      bottom-right corner of your screen with the message:

      We were unable to install support for joining sessions using a browser link. You may be missing key Linux libraries. Install them now?

      Click Install on the toast message.

      When promped, enter your password (the one you created today).

      Reload VS Code when prompted.

      There will be another toast:

      To support joining a session using a browser link, we need permission to run an installer on your system. Your OS may ask you for your admin (sudo) password in a terminal. Install now?

      Once again, click Install and enter you password.

   2. Live Server by Ritwick Dey

   3. VSCode Ruby by Stafford Brunk (a great extension by a former 67-272
      TA)

   4. Ruby by Peng Lv
      Reload Visual Studio Code if an error message prompts you to do so.

10. Configure the terminal

    1. Open settings

       File > Preferences > Settings

       Or Ctrl+,

    2. Search for Shell Args and find the setting entitled
       Terminal > Integrated > Sell Args: Linux

    3. Click the Add Option button under this setting

    4. Enter -l and click OK. FYI, that is a lowercase l, as in lion.

       FYI, this configures you terminal to open as a login shell by
       default. This is important for rails and a number of other tools.

11. Select File>Open Folder and then give the directory to the testapp
    folder in the prompt. Click OK.

    Note: if you followed the recommendation above then this will be
    /home/<your Ubuntu username>/lab01/testapp/

12. You should now be able to see all of the files in the testapp
    application that you created earlier. Open a few of them to get used to
    Visual Studio Code.

13. Open a terminal through VS Code

    Terminal > New Terminal

    Or Ctrl+Shift+`

    Note: This terminal is almost exactly like the one you used outside of
    Visual Studio Code earlier, but notice a few things:

    • You can paste into this terminal with Ctrl+Shift+V or Shift+Insert
      or right-click
    • You can copy from this terminal with Ctrl+Shift+C
    • It defaults to the project directory that you have open instead of
      your home directory
    • There is nice syntax highlighting and hyperlinks are clickable

14. In this new terminal, run the web application

    rails server
    

15. Once again, open your browser and put
    localhost:3000 in the address bar (or open the
    link)

    You should see the same welcome page that you saw before.
    Congratulations, you are all setup!

    Use Ctrl+c in the terminal to stop the server when you are finished.

[Optional] More tools & configuration

These are not required, encouraged, or tested.

Terminal Configuration

Prof H like to have some terminal shortcuts and customizations. You too can try
these out by using his dotfiles
(instructions are in the repo).

These dotfiles are for customizing bash (the shell you use on Ubuntu by
default), but Apple has begun using zsh instead of bash. Therefore, Proh H has a
customized variation of oh-my-zsh that you
could use instead. Joao Grassi has an explanation of how he set this up on
Windows
in this blog post.
You are welcome to try this out if you so desire. Notice that you will have to
change the install script url to match that of Prof H's repo.

That said, I personally would not worry about any of these customizations. It is
good to be familiar with the default tools before you customize them, and I use
almost no modifications to this day.

Windows Terminal

Windows Terminal
provides a cleaner terminal than what comes with WSL by default. It allows for
multiple tabs and makes it easy to work between powershell, command prompt, and
(potentially multiple) WSL distributions.

---

Part 2: Using Git

Installing Git

1. If you completed the Windows setup then you already have Git installed. If you installed Git locally on your Mac, please be sure Git is installed properly before continuing. If you don't already have it, you can get a download at https://git-scm.com/download/mac.

2. There are a number of graphical user interfaces available for Git, but using the command line to manage Git is easy and will be what we use for all lab instructions. For the remainder of the lab today, we recommend you use the command line.

Configuring Git

1. There are a number of online resources for Git. There is a nice cheat sheet at GitHub. Open this now in a browser for reference purposes. Also note some nice Git resources at www.gitready.com that might also be helpful later in the course.

2. Setup your git installation with your author information. That way, when you make a commit, you are "signing" it so other developers know who made the commit.

    git config --global user.name "Your Name"
    git config --global user.email "your@email.address"
   

   Note: The quotations are important.

   The above commands are to be run in the command line, also know as terminal or shell. On a Mac this should be clear enough, but Windows users should know that these all refer to the Ubuntu terminal that you set up earlier in this lab. Command prompt and powershell will be used very little if at all in this class, and we will be very clear when we want you to use anything other than the Ubuntu terminal that you just set up.

3. (optional) If you installed locally, you can also configure your .gitconfig file to make output certain colors and handle other basic chores. My .gitconfig file can be seen in my dotfiles repo on github if you are looking for an example.

Getting Started with Git

1. To get a feel for how Git works without getting bogged down by code, we are going to set up some simple text files with material from various Monty Python movies and skits. Start by creating a folder or directory somewhere called 'monty_python' and then switch into that directory. Now in that directory, we will create a new git repository by typing:

    git init
   

Here's a screenshot to help:

2. To save files to a Git repo (shorthand for repository), we need to understand that Git works in a two-step process. First we send files from our working directory to a staging level. Once we have a collection of related files in staging we want to save to the repo, we 'commit' those files along with a useful message explaining what was committed. Later if we ever want a file or set of files back from the repository, we can do so using the 'checkout' process. The diagram below summarizes this:

3. Within your working directory, create an empty file called holy_grail.txt:

    touch holy_grail.txt
   

4. Now check that the file is untracked and needs to be sent to staging:

    git status
   

5. Add the file to the staging area:

    git add holy_grail.txt
   

Tip - You can hit (the tab key) to autocomplete filenames and directories.

6. Type git status again and verify that the file is ready to commit.

Here's a screenshot that may be helpful:

7. Following the same previous steps, add another file called life_of_brian.txt to the working directory.

8. Commit the files in staging to the repository:

    git commit –m "Holy Grail, Life of Brian files added to project"
   

Tip - good messages are useful; always include a description message using the –m flag!

9. Confirm the change by running git status. Double-check the change by running git log to see the list of commits:

10. To make sure you have this git stuff down, do the following:
    a. Add one quote from each movie to its respective file:
    • HG: http://www.imdb.com/title/tt0071853/quotes
    • LOB: http://www.imdb.com/title/tt0079470/quotes

b. Add a new file called completely_different.txt to the repository. Refer back to the previous instructions if necessary.

---

Stop

Show a TA that you have completed the first part. Make sure the TA initials your sheet.

---

Diffing and Removing Files

Now that we have a basic Git repository set up and know how to add files, we need to also learn how to remove files and how to compare versions of the same file in different levels. Let's start with removal. In the git status help, we saw the note that if we want to remove a file from the staging level.

1. Remove the holy_grail.txt by typing the following:

    git rm holy_grail.txt
   

and verify that it's gone from your working directory.

2. Oh snap! We didn't want to delete the file! I meant to use git rm --cached. Don't worry, it hasn't been removed from the repository yet - we've just marked the file for deletion.

3. Get the file back by using checkout:

    git checkout HEAD holy_grail.txt
   

Note - HEAD is a pointer to your most recent commit. This could also be the SHA value of any previous commit.

4. Add another famous quote to holy_grail.txt.

5. Use git diff to see what has changed:

    git diff
   

6. Stage and commit these changes:

    git add holy_grail.txt
    git commit -m "Added another quote to holy_grail.txt"
   

7. Add another quote to life_of_brian.txt and stage the file (git add life_of_brian.txt), but do not commit.

8. Run git diff:

    git diff
   

You should not see any output. This is because the changes are staged and ready to be committed. If you want to see the difference between the staged version and the repository version, specify the --cached flag:

  git diff --cached life_of_brian.txt

9. Reverse your changes to life_of_brian.txt:

    git rm --cached life_of_brian.txt
   

10. We have decided that the completely_different.txt file was unnecessary. Using git, remove the file. (On your own - see a TA if you need assistance)

11. (optional) Add another file called pointless.txt and stage and commit it. Since that was pointless, I want to move back to the previous commit; I can do this by typing git checkout master. (This is a relative commit name: master is the second most recent commit in master the branch. master~3 is the great grandparent (three before) of the most recent commit in the master branch.)

Notice now that the file pointless.txt is gone from your directory. You can get it back with git checkout master if you wish. I can also use absolute commit names and go all the way back to the beginning (in my case) with git checkout 24ac377, where this string is the commit name git assigned to my first commit (found it by using git log).

Branching and Merging

We need to add the new material from the Flying Circus to our project and to do this we will branch the project (if we don't like the changes, it will be very easy to just kill the branch and go back to master and try again – a great way to safely experiment within the project).

1. List all our current branches with:

    git branch
   

The current (and only) branch is marked with a *.

2. Create a new branch called "television":

    git branch television
   

3. Run git branch again to verify the branch exists.

4. Switch to the television branch:

    git checkout television
   

5. Add a new file called flying_circus.txt with the quote:

   "No one expects the Spanish Inquisition!"

Add this file to the repository with an appropriate message.

6. Return to the master branch:

    git checkout master
   

You'll notice that the flying_circus.txt file disappeared! Not to worry - it will be back soon enough.

7. Create and switch to a new branch called "movies":

    git checkout -b movies
   

Tip - in command, we created the branch and switched to it in one command by specifying the -b flag to git checkout.

8. On this new branch, add two new files:

    touch meaning_of_life.txt mp_live.txt
   

Tip - touch is a Unix command for creating files

9. Commit these two files using what you learned earlier in the lab.

10. Checkout the master branch again (see previous commands for help).

11. Merge the movies branch back into the master branch:

    git merge movies
    

Note - the branch movies still exists. If it's no longer needed, delete the branch with:

    git branch -d movies

12. Checkout the television branch.

Notice that the new movie files are gone, but the flying_circus.txt is back in the working directory.

13. Add a new quote to flying_circus.txt (anything will do) and commit the change to the repository.

14. Merge the television branch back into the master branch (see #10..#11 for help).

There is obviously much more to Git, but this lab should get you familiar with the basics and started using Git and your proficiency should increase as you use it more in this course. Once the TA verifies the repo is set up, you are finished.

---

Stop

Be sure that the check-off sheet has your name clearly printed and is signed by a TA and take it with you as proof of lab completion.

---

On your Own

This week for the "on your own" section, your job is to review HTML, CSS, and basic Javascript as needed. If you don't remember much from HTML & CSS, I have posted some older review labs on github. I designed each lab a long time ago to be done in an hour or less for 67-101, so this should not be too hard to squeeze in the first week.