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 Cygwin
- 3 SourceTree
- 4 Pageant and PuTTYgen: SSH Keys for Windows
- 5 Komodo Edit
- 6 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 also in Terminal.
Windows: You will be running commands on your local machine using Cygwin, which you will install in the next section. You will be connecting to your server via SSH also in Cygwin.
You will be using SourceTree as a frontend to the Git version control system. Git enables you to keep track of changes to your source code, and also push your changes up to the CEC.
You will be using Komodo Edit as your text editing tool. Komodo Edit will also enable you to upload files to your Amazon cloud instance.
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 1 in CSE 330 this semester.
In the flowchart, your Git Client is SourceTree and your Text Editor is Komodo. The optional SFTP Client could be FileZilla.
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.
Connecting Komodo to your Remote Instance
With a little time spent on configurations and installing a plugin, Komodo Edit enables you to edit files on your desktop and then upload those files directly to your remote instance.
Since the Komodo Edit server configuration can rightfully be a royal headache that will cause you problems both today and through the rest of the course if you are not careful, you do not need to follow these steps unless you are a brave soul.
Configure your Server Settings in Komodo
Once you have your public key in your SSH agent (if applicable), follow these steps to tell Komodo how to connect to your remote instance.
- Open the Komodo Edit Preferences. In Windows, this is Edit -> Preferences; in Mac OS X, this is Komodo -> Preferences.
- In the menu on the left, choose Servers.
- For Server Type, select SFTP. (Since you have an SSH server running, you will be able to connect to your instance via SFTP.)
- Name it something like CSE 330 Cloud Instance.
- Enter the details of your instance, including your hostname and username.
- If you are using Public Key Authentication, leave your password empty.
- Unless you explicitly changed your SSH port, your port will be 22.
- Your default path will be where you want to save the files you upload. Generally, this should be the root of your web server.
- Press Add to save the server information, and then press OK.
- Mac OS X Users Only: You need to perform these additional steps in order to make Komodo use your private key when connecting to your server.
- In the Komodo Edit Preferences, choose Environment.
- Find the information about your SSH environment by entering the command ssh-agent in Terminal. You should see output similar to:
SSH_AUTH_SOCK=/tmp/ssh-xxxxx/agent.xxxxx; export SSH_AUTH_SOCK;
- SSH_AGENT_PID=xxxxx; export SSH_AGENT_PID;
- echo Agent pid xxxxx;
- Add the following environment variables in Komodo:
- Name: SSH_AUTH_SOCK
- Name: SSH_AGENT_PID
- The values for these environment variables should be what you learned earlier in step 2.
- Press OK to save your changes.
- To test whether Komodo is able to successfully connect to your server, choose File -> Open -> Remote File. Select CSE 330 Cloud Instance from the drop-down menu. You should be able to see a list of files in your public_html directory.
Installing Upload Extension
Strangely, Komodo Edit does not come built-in with a mechanism to upload files from your computer to the server. Fortunately, the community has released an add-on that gives us this feature.
- In Komodo, go to Tools -> Addons.
- Search for the add-on named Uploader.
- Download and install it, and restart Komodo.
- In your Server preferences, create a new server (or rename an existing one) to be identical to your project name, but starting with a star. For example, in my project named FileShare, I would name the server *FileShare. The default path will be the location to which Komodo will upload your files. Note: The path should be absolute.
- You can now select a file and go to File -> Upload to upload it to your server.
Tip: To make things quicker, you can bind a keyboard shortcut like ctrl/cmd+D to the Upload feature by following these steps:
- In Komodo preferences, choose Editor -> Key Bindings.
- Find the "Upload" command under "General". Press in the "New Key Sequence" box, and press ctrl/cmd+D. Proceed through the on-screen instructions; you can name your new scheme Custom.
- Save the preferences and restart Komodo. You will now be able to upload files by simply pressing ctrl/cmd+D.
Starting a Project
When you start a new project, you should create a new directory and a new Komodo Project file.
It is acceptable to have one project per Git repository; this way, you do not need to duplicate your server settings to each project individually.
- Create a new directory in your repository named after the project you will be starting (e.g., fileshare).
- In Komodo, choose Project -> New Project (or press shift-ctrl-N).
- Navigate to the directory you just created, enter a name for the project (e.g., FileShare.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:
- Continue creating and editing the files from your site.
- 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 to upload, go into Komodo Edit preferences and add a new SFTP server. Name the server *ProjectName — that is, name it the same as your project, but prepend an asterisk (*). For example, for our FileShare.komodoproject project, we would name the server *FileShare.
- You can now use the Upload extension you installed earlier to upload files from your working directory to your EC2 instance.