Demo 1: Development Environment Setup

In this demonstration, I will show you how to setup the development environment used in the rest of the demos. The following setup should generally work for Windows, Mac, and Linux.

Before I jump into the demo, I’d like to clear up a little terminology. In these demos, I will be using a virtual machine (VM). A VM is where one OS is run inside of another OS (rather than directly on a physical machine). The parent OS is called the host OS. For example, imagine you have a Windows computer—that’ll be the host OS. You can use the VirtualBox software to install a Linux OS within the host Windows OS and to run a Linux VM as if it were a Windows program.

1. Installing Software on the Host OS

Register an account at https://github.com/ (if you don’t already have one). Git and GitHub will be used for version control and collaboration in these demos. Be sure not to lose your GitHub username and password.
Install the Visual Studio Code (VS Code) editor (https://code.visualstudio.com/). VS Code will be the code editor of choice for these demos. Use the latest stable version.
Additionally, within VS Code, install the following five extensions: (1) Code Spell Checker, (2) Markdown PDF, (3) Markdown Preview Github Styling, (4) markdownlint, and (5) Simple Ruby ERB.
Install a Bash shell with SSH client (if you don’t already have it).
- Windows users: download and install Git for Windows (http://git-scm.com/download/win), which comes with a Bash shell and SSH client. Important! During installation, you must check the “Enable symbolic links” checkbox. If you accidentally failed to do so, you must uninstall and then reinstall Git for Windows, this time checking the box.
- MacOS users: you have this software by default (see the Terminal app).
- Debian/Ubuntu Linux users: you have the shell, but may need to install the “openssh-client” package (if it’s not already installed by default).
Download and install VirtualBox version 6.0.4 (https://www.virtualbox.org/wiki/Download_Old_Builds_6_0). I will be using this software to run an Ubuntu Linux virtual machine that will house most of the Rails development tools (with only a few graphical tools running in the host OS). As of the time of writing, there is a VirtualBox bug in releases newer than 6.0.4 that breaks Git, among other things, in the VM’s shared folder. Note: Your computer must support virtualization in order for VirtualBox to work. More details…▼

Even if your computer does provide virtualization support you may need to enable in your system BIOS. For Windows users, VirtualBox will not work if you have Hyper-V enabled, so you will need to disable Hyper-V to complete the next steps or see the instructor for potential workarounds.
Download and install Vagrant (https://www.vagrantup.com/). Vagrant is used to package, distribute, and run custom-configured VMs. I have prepared a Vagrant “box” as you will see below.
Install two Vagrant plugins by launching a terminal and entering the following commands:
```
 vagrant plugin install vagrant-vbguest
 vagrant plugin install vagrant-fsnotify
```
vagrant-vbguest will ensure that your VirtualBox Guest Additions versions are kept in sync between the host and the VM.

vagrant-fsnotify enhances VirtualBox shared folders by forwarding filesystem change notifications to your Vagrant VM. Later, when you’re adding new code to your Rails web apps, this plugin will save you from having to restart the Rails development web server every time you make a change.

Confirm that the plugins were successfully installed by entering the following command:
```
 vagrant plugin list
```
Download and install pgAdmin 4 (https://www.pgadmin.org/download/), a database viewer and administration tool for PostgreSQL databases. This application will allow you to view the database running on your VM from a web browser on your host.

Confirm that the install was successful by launching the pgAdmin 4 app on your host OS. A pgAdmin page should open in your web browser.

The first time you launch pgAdmin, you will be prompted to create a password. Don’t forget it, because you will need it to run pgAdmin in the future!

2. Setting Up Workspace and Initializing VM

Create a folder workspace. This folder is where all the Rails projects in these demos will go.
Download the file Vagrantfile and the file provisioner.sh, and save them in your workspace folder. Make sure that no file suffix (e.g., “.txt”) gets added to the Vagrantfile when saving it. For example, one way to download it would be to right-click on the hyperlink and select “Save Link As…” (or similar) from the context menu.
Launch a terminal. In Windows, it involves launching Git Bash. In MacOS and Linux, this involves launching a terminal application.
In the terminal, change directory (using the cd command) to your workspace folder. Note: I will be using the command-line a lot in the demos. I will generally assume that readers are familiar with the basic file management and navigation commands (cd, rm, cp, mv, etc.). If you’re new to the command-line…▼

If you're new to the command-line, I highly suggest you spend some time on your own learning about it—for example, Codecademy has a course.
Download and initialize the Vagrant box specified in the Vagrantfile you downloaded by running the following command:
```
 vagrant up
```
BEWARE! This command (1) may take a long time to complete, (2) downloads a big file (~700MB), and (3) performs at least one processor-intensive compilation (of Ruby). Once this command completes, you will have a running Ubuntu Linux VM (headless). The last line of output from this command should look something like the following:

default: ==> default: fsnotify: Watching (some system-specific file path)

The fsnotify plugin will tie up the current terminal window from here on out.

The VirtualBox application should show that a new VM was created and is running.

3. Testing a Rails App

To log into the Linux VM, open a second terminal window (or tab) and change directory (using the cd command) to the workspace folder. Then, SSH into the VM by entering the following command:
```
 vagrant ssh
```
A command prompt should appear that looks like this: [vagrant@ubuntu1804:~] followed by a $ prompt. If you use the ls -l command, you will see a list of files in the current directory. Among them should be a workspace folder (actually a symbolic link to the folder /vagrant).
Change directory (using the cd command) to the workspace folder. Note that this folder is synced with the workspace folder on the host OS. That is, changes made in the folder on one side (VM or host OS) are instantly visible on the other side.
Use Git to download an example project by entering the following command:
```
 git clone https://github.com/memphis-cs/rails-6-test-app.git
```
A rails-6-test-app folder should be visible inside the workspace folder. Note that the workspace folder is synced with the host OS, so the rails-6-test-app folder should also be visible in the host OS’s file explorer. The main reason for syncing this folder is that it will enable the use a GUI code editor (VS Code) to work on the code files.
Change directory (using the cd command) to the rails-6-test-app folder. When you run this command, RVM should print a message like the following, which lets you know it’s working. Note that this message appears only after the first time you cd into the project.
```
 ruby-2.6.3 - #gemset created /home/vagrant/.rvm/gems/ruby-2.6.3@quiz-maker
 ruby-2.6.3 - #generating quiz-maker wrappers.........
```
Troubleshoot: no messages appear…▼

If no messages from RVM appears, then something is wrong. A common problem is that the terminal application is not configured to run as a "login" shell. This issue seems to come up the most for Linux users, or users of more exotic terminal applications. Typically, the solution can be found in the terminal application's settings. Restarting the terminal application after fixing the setting will likely be necessary.
Download and install the gems (Ruby libraries) for this Rails project by entering the following command:
```
 bundle install
```
Download and install all the JavaScript dependencies for this Rails project by entering the following command:
```
 yarn install
```
Windows users: if attempting to run yarn install throws symlink errors, you will need to complete some additional steps here. More details…▼
1. Log out of the VM by entering the command exit.
2. Switch to the first terminal window and stop fsnotify by pressing Ctrl-C.
3. Shutdown the VM by entering the command vagrant halt. You will now be able to type commands on the host OS.
4. Open a command prompt with administrative privileges inside the workspace folder and enter the following command: fsutil behavior set SymlinkEvaluation L2L:1 R2R:1 L2R:1 R2L:1 Verify that has completed correctly with:
  fsutil behavior query symlinkevaluation (all should be valid).
5. Restart your VM and attempt to run yarn install again. It should complete with no errors.
Wipe and reset the database to be used by this Rails app by entering the following command:
```
 rails db:reset
```
The project comes with some automated tests. Run them by entering the following command:
```
 rails test
```
You should see that all the tests passed.
Start up the Rails web app server by entering the following command (those are zeros):
```
 rails s -b 0.0.0.0
```
You should see that the server has started without error. Note that this command will not “return” like other commands—that is, the command prompt will not reappear until you halt the server process (covered below).
Now open the URL http://localhost:3000 in a web browser on your host OS. You should see a “Welcome to Quiz Maker” web page with a list of quizzes.
Verify that the Postgres DBMS running on the server is accessible and that the app’s database is configured as expected.
1. Add a Server with the following configuration:
  - Name: Vagrant
  - Hostname/address: localhost
  - Port: 5432
  - User: vagrant
  - Password: password1
2. In the left sidebar, go navigate as follows:
  
  Servers > Vagrant > Databases > default_development > Schemas > public > Tables
  
  Right click on quizzes and go to View/Edit Data > All Rows.
  
  You should see the Data Output panel in the bottom right corner of the screen showing information about all the quizzes in the application.
Further test out the web app by logging in and creating a quiz:
1. Follow the Sign In link at the top right and log in with the email alice@email.com and the password password.
2. Click the Create New Quiz link and enter a title and description for a quiz.
3. In your pgAdmin browser window, you can see the new quiz in the database by hitting the refresh button (F5 or the lightning bolt button).
4. Add questions to the quiz by clicking to Edit Quiz link.

4. Shutting Everything Down

To shut down everything:

In the terminal, type Ctrl-C to halt the Rails server (that is, press and hold the Ctrl key and then click the ‘C’ key).
Log out of the VM by entering the following command:
```
 exit
```
In the other terminal, halt fsnotify by typing Ctrl-C.
Shut down the VM by entering the following command:
```
 vagrant halt
```

To restart the VM, run vagrant up in the workspace folder on the host OS (should be much faster than last time), and run vagrant ssh in a new terminal window/tab to log in again.