Workflow

The few minutes it takes to optimize your workflow will be the best few minutes you will spend in CSE 330 and your career. It is remarkable how many hours you can save just by using the best interface for text editing and deployment.

Overview

There are going to be several aspects to our workflow in CSE 330, and we will be switching between multiple different programs. Here is how they all fit together.

Running Commands

Mac OS X: You will be running commands on your local machine using Terminal, which you can find in your Applications -> Utilities folder. You will be connecting to your server via SSH.

Windows: You will be running commands on your local machine using WSL or Cygwin, which you will install in the next section. You will be connecting to your server via SSH.

Version Control

You will be using Git as your version control system. Git enables you to keep track of changes to your source code. If you're using VS Code, the Git integration makes is very user friendly.

Text Editing

Although we highly recommend VS Code, you may use Sublime Text, Komodo Edit, Notepad++ (for Windows), and TextWrangler (for Mac). You can also use an IDE, like PHPStorm, if you prefer.

File Transfer

See VS Code and the Module 2 section to see our recommended file transfer method. If you're not using VS Code, you may use FileZilla to transport files from your local computer to your server.

Flowchart

If you are more visual, this flowchart might help:

The flowchart illustrates 3 methods to copy files to your cloud instance: via your text editor, via an external SFTP client, and by cloning your remote Git repository. We will be primarily using Option 2 in CSE 330 this semester.

In the flowchart, your Git Client is SourceTree and your Text Editor is Komodo. The SFTP Client could be FileZilla.

Installing a Terminal Emulator

Windows is based on a fundamentally different architecture than Linux, meaning that, if you want to run Linux programs on Windows, you'll have to enable or install a special terminal emulator for it. Mac users do not need to install a terminal emulator since MacOs itself is a derivative of Unix, which is an ancestor of Linux. The Terminal utility is all you need.

Windows Subsystem for Linux

Starting in Windows 10, Windows has the ability to emulate Linux, meaning that you can run Linux commands on Windows, without having to install Cygwin. To enable WSL, follow these instructions. Once those instructions are complete, you can open a shell by clicking on the Start menu, typing "Bash", then clicking on the entry labeled "Bash on Ubuntu on Windows".

Cygwin

Cygwin is a Linux Terminal emulator for Windows.

Installation

The CEC lab machines already have Cygwin installed. Follow these instructions to get Cygwin up and running on your personal PC.

1. Run setup.exe from http://www.cygwin.com/
2. Keep the Cygwin directory as the default, C:\cygwin. Choose a place like C:\cygwin\downloads to download the installation files. Choose any download site, although probably one with a .com suffix is best when you're in the US.
3. In the "Select Packages" screen, select the following packages:
   • Net -> openssh
   • Net -> openssl
   • Python -> python (you will need this for Module 4)
   • Devel -> git (version control system)
   • One or more of the following:
     • Editors -> vim
     • Editors -> emacs
     • Editors -> nano
4. Allow the installation to complete.

Throughout the rest of this course, when we say to "open a terminal", if you are on Windows, we mean to "open WSL/Cygwin".

Bitbucket

Bitbucket is a service that enables you to store your code for free in the cloud. It is similar in spirit to Github, but with a different mission statement.

Creating a Bitbucket Account

Go to Bitbucket.org to create an account.

Important: Use your @wustl.edu e-mail address to create your account. This will put your account on the "educational plan", which removes some limitations of the free account.

Note: If you know someone who uses Bitbucket, you can ask them to invite you as a friend. This will increase the member limit on the inviter's private repos.

Adding Your Key to Bitbucket

Not uploading your key is perfectly fine, and in many cases easier. Here are the instructions though, if you'd like

1. First make sure that you've finished the SSH guide configuration instructions.

   We will use the same key for connecting to your remote server as for connecting to Bitbucket. (This is completely valid practice.)

2. Go to the "SSH keys" section of the settings panel (Manage Account -> SSH Keys)
3. Add a new key.
   • I recommend naming it after the computer you're using; if you're in the CEC, for example, you could name it "Warehouse Cygwin".
   • The contents of your key is the contents of your id_rsa.pub. It looks like ssh-rsa AAAAB3blahblahblahblah yourname@somedomain. It is exactly the same thing that you had to paste into the authorized_keys file on your EC2 instance.

You will now be able to push code to your Bitbucket repository using your personal SSH key.

FileZilla

You can use SFTP from the command line, or you can use any GUI file transfer client. All FTP clients I have seen also support SFTP. One popular FTP client is Filezilla.

1. Download and install FileZilla from http://filezilla-project.org/download.php?type=client

   If you are using a lab computer, you can save it to your H drive.

2. When you launch FileZilla, go to Edit→Settings or FileZilla→Preferences, and go to the SFTP options (under Connection). Click "Add keyfile…".
   • Windows users: Choose the *.ppk file that you made earlier using Puttygen.
   • Unix users:
     1. Choose your id_rsa file. OS X Tip: Press Shift+Command+Period to reveal hidden files in the file chooser window.
     2. FileZilla will want to make a *.ppk file. A good place to save it would be the .ssh directory as id_rsa.ppk.

   When finished, press OK (not the red ×) to save your changes.

3. Back on the main FileZilla screen, there are four fields: Host, Username, Password, and Port. Fill them in as follows:
   • Hostname: sftp://ec2-xxx-xx-xx-xxx.compute-1.amazonaws.com/
   • Username: The username you created on your server.
   • Password: Since you are using a key, you may leave this blank.

     If you changed your SSH settings to allow password-based authentication, then you could put your password in here.

   • Port: 22
4. Then click Quickconnect. If everything is configured correctly, FileZilla should log into your server.

On the left and right of the FileZilla window, you can drag files between your computer and your server. Thus, you can edit a file in a text editor like Notepad++ on your decktop, and then upload it to your server by simply dragging it from the left pane to the right pane in FileZilla.

Komodo Edit

This semester in CSE 330, we will be using Komodo Edit as our editor of choice. We chose this editor because:

1. It is free for everyone.
2. It runs on Windows, Mac OS X, and Linux.
3. It supports all of the languages we will be using in this class.
4. It has a decent amount tools like auto-completion that will speed up your workflow.

Installation

Komodo Edit is already installed on the CEC lab machines. If you prefer to use your personal computer, download it from the web site: http://www.activestate.com/komodo-edit

SSH Access

You can configure Komodo Edit to connect to your EC2 instance (to implement option 1 in the flowchart above) . However, because of a buggy and incomplete implementation in Komodo, this is not recommended or required for the purposes of CSE 330. For the brave-hearted, instructions can be found here: Komodo Edit with SSH Access

Starting a Project

Start a new Komodo Project whenever you start a new assignment.

1. Create a repo on Bitbucket and clone it to your local machine.
2. In Komodo, choose Project -> New Project (or press shift-ctrl-N).
3. Navigate to the cloned directory, enter a name for the project (e.g., Module2Group.komodoproject), and press "Save".
4. You should now see a window like this:

   

5. Press ctrl-N (or cmd-N) to create a new file. Save it in your project. For example, you could create a page named index.html with the Quick and Easy Page Layout:

   

Tip: To change between files without using a mouse, press ctrl-PageUp and ctrl-PageDown (cmd instead of ctrl on OS X). Many computers without explicit PageUp and PageDown buttons bind them to fn-Up and fn-Down. For example, on a MacBook Pro, to change to the next tab, you would press three keys: fn+cmd+down.

When you are ready, use FileZilla to upload your files to your server via SFTP.