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.
- 1 Overview
- 2 Installing a Terminal Emulator
- 3 Bitbucket
- 4 SourceTree
- 5 Pageant and PuTTYgen: SSH Keys for Windows
- 6 FileZilla
- 7 Komodo Edit
- 8 Starting a Project
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.
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.
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.
You may use Komodo Edit as your text editing tool, but don't have to. Other excellent programs include Sublime Text, Notepad++ (for Windows), and TextWrangler (for Mac). You can also use an IDE, like PHPStorm, if you prefer.
You may use FileZilla as your tool for uploading files from your local working directory to your remote server. Another excellent option is Cyberduck.
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
SourceTree is a tool that enables you to perform version control using a graphical user interface. It is free and available for Windows 7+ and Mac OS X 10.6+.
SourceTree is available on the Mac App Store. Windows users (and OS X users who don't like the App Store) may install it from http://sourcetreeapp.com/
Git is a distributed version control system that enables you to track changes to your code and work with collaborators on the same code base. In CSE 132, you used Subversion (SVN), which is also version control system.
Git, like SVN, is a command-line tool. However, SourceTree enables you to use Git without having to pull up a Terminal window every time you need to perform an action.
In Module 5, you will learn more advanced techniques for using Git. However, for Modules 2-4, you will be using Git primarily as a method to push your changes to your remote repository.
Cloning a Repository
We will start by cloning a remote Git repository.
"Cloning" in Git is much like "checking out" in SVN: a remote copy of the repository is copied down to a local working directory. Word of Caution: Git uses the term "checkout" to mean something different (which you will learn in Module 5), so do not use the words "clone" and "checkout" interchangeably.
If you wanted to clone a repository on the command line, the command would be:
$ git clone git://www.example.com/url-of-repo destination-path
In SourceTree, go to File->New, enter the remote repository URL and the destination path, and press "Clone". The destination path is where you want the repository's files to be copied on your personal computer; the path should point to either an empty or a nonexistent directory on your personal computer. In the screenshot, I am cloning the repository for the Fedora Linux kernel.
The remote repository will now be cloned onto your personal computer and all ready to use.
When you make changes to files or add new files, you need to commit them to your working repository. Note: When you "commit" something in SVN, it means that you are sending your changes to the remote repository. This is not the case in Git, as we will see shortly.
To prepare your commit, press the "Commit" button in the SourceTree toolbar. See the screenshot for an example.
Select the files you want to commit, and enter a commit message summarizing the changes you've made since your last commit. When you're ready, press "Commit".
The command line equivalent of this would be:
$ git add --all # adds untracked files to the repository and stages them for the commit $ git commit -am "This is an example commit"
What happens now is that your changes are recorded in your own local working copy of the Git repository. The changes have not been saved in the remote repository. You need to do this by pushing them.
Git is different from SVN in that you can use it completely independently from a remote repository. Thus, in Git, you need to perform the "commit" and "push" steps separately.
After you perform a commit, you need to push your commit to your remote repository. To do this, press the "Push" button in SourceTree, and then press "OK". The command line equivalent is:
$ git push master # assuming your branch is still named the default "master"
Note: You do not need to push after every commit. You could have 4 or 5 commits before you actually perform the push. When you push, all commits will be pushed.
In SVN, if you want to download changes from your remote repository, you performed an update. In Git, you perform a pull.
Pulling is (usually) as simple as pressing the "Pull" button in SourceTree. The command line equivalent is:
$ git pull master
Note: If you want to download the changes from the remote repository but not overwrite your current working copy, you can perform a fetch instead.
Pageant and PuTTYgen: SSH Keys for Windows
Adding Pageant as a Startup Item
If you are using your own computer, it may be convenient to add Pageant as a startup item so that you don't need to go into SourceTree and turn it on every time you reboot your computer.
- Download pageant.exe if you were using SourceTree
- Open your Startup Items folder, located at Start Menu -> All Programs -> Startup (right-click and say "Open")
- Right-click inside the folder and say "New -> Shortcut". For the location, enter:
- This will cause Pageant to open and automatically load your key.
- Press "Next". Enter a name and press "Finish".
Thanks to the University of Alberta for this tip.
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.
- Create a repo on Bitbucket and clone it to your local machine.
- In Komodo, choose Project -> New Project (or press shift-ctrl-N).
- Navigate to the cloned directory, enter a name for the project (e.g., Module2Group.komodoproject), and press "Save".
- You should now see a window like this:
- 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.