Bitbucket, WebStorm and Learning JavaScript Properly

Step by step tutorial

Posted by paul on 2013.11.07

Bitbucket, WebStorm and Learning JavaScript Properly

As I was learning javascript by following the excellent roadmap at How to Learn JavaScript Properly, I decided to use a source code management system to keep track of my work. Unfortunately for me, the Git client in WebStorm was not quite easy for me to use compared to SmartGit, which I used before. And to show appreciation for the writer of the excellent blog and also to help others, I decided to put this tutorial together. It shows you how to use WebStorm, SmartGit (Git client) and bitbucket.org to manage your codes while studying JavaScript. I use bitbucket.org as my Git hosting provider, but you can also use github.com. This tutorial is for Mac but should be useable on Windows PCs. Here are some benefits of using a source code management system.

  1. You gain experience with using Repo tools and concepts, which are used by most professional shops anyways.
  2. If you have 2 or more computers (ex.: mac at home and laptop on the go), using source code management system allows you to work on the same set of codes no matter what Mac you are on. No need to manually copy/move files around. This helps a lot with continuity.
  3. It acts as a sort of backup of your work.

Git Repo: sign up and create a new repo

  1. Sign up for a free account at bitbucket.org. I prefer bitbucket.org because it offers unlimited private repositories.
  2. Create a new repo by going to Repositories > Create repository.
  3. Give it a name. I use javascript-proper for this tutorial.
  4. I checked This is a private repository. Guess it is up to you.
  5. Set Repository type to Git.
  6. Check Issue tracking and Wiki if you like. I recommend using the built in issue tracking and wiki feature of Bitbucket.
  7. For Language, pick JavaScript.
  8. Now you are at the homepage of javascript-proper repo.

Git Repo: SSH keys

  1. You need to add a SSH public key into your account on bitbucket.org.
  2. Bitbucket.org provides this tutorial on how to do it (just read it, do not follow it yet).
  3. In case above link is broken, the title of the article is Set up SSH for Git and Mercurial on Mac OSX/Linux.
  4. Get familiar with the concepts.
  5. Open Terminal app on your Mac.
  6. Change directory to .ssh and check what files are in there:
  7. ls -la ~/.ssh
                    
  8. If you do NOT see 2 files (id_rsa & id_rsa.pub), move onto SSH keys Option 1, to create ssh keys first.
  9. If you do see 2 files (id_rsa & id_rsa.pub), move onto SSH key Option 2. You already have the needed ssh keys.

SSH keys Option 1

  1. Since you do not have SSH keys, you will need to generate them first.
  2. Open Terminal app and go to ~/.ssh/ folder
  3. cd ~/.ssh
            
  4. Type ssh-keygen and hit enter. Hit enter key to simply accept all default values. You will see something like this.
  5. mac1:.ssh user$ ssh-keygen
    Generating public/private rsa key pair.
    Enter file in which to save the key (/Users/user/.ssh/id_rsa):
    Enter passphrase (empty for no passphrase):
    Enter same passphrase again:
    Your identification has been saved in /Users/user/.ssh/id_rsa.
    Your public key has been saved in /Users/user/.ssh/id_rsa.pub.
    The key fingerprint is:
    00:6d:e1:ba:43:00:66:45:12:1f:dc:c9:79:95:f9:d6 [email protected]
    The key s randomart image is:
    + - [ RSA 2048] - +
    |    ….         |
    |     oo          |
    |     .o          |
    |             o   |
    |    o   S   +    |
    |   * + o o . . . |
    |  o O o E        |
    |   + o           |
    |    . .          |
    +- - - -+
            
  6. Copy content of id_rsa.pub into clipboard. It is important to use the pbcopy command. Opening id_rsa.pup with a text editor to copy/paste will not work.
  7. pbcopy < ~/.ssh/id_rsa.pub
            
  8. Go to web browser and log into bitbutket.org.
  9. Go to avatar > Manage Accounts
  10. Click SSH keys
  11. Click Add key
  12. Enter Mac or something like it for label.
  13. Right click in the textbox of Key and paste in the value.
  14. Skip to Folder for storing codes.

Git Repository: SSH key Option 2

  1. Since you have SSH keys, you can just use what you already have.
  2. Open Terminal app and go to ~/.ssh/ folder
  3. cd ~/.ssh
            
  4. Copy content of id_rsa.pub into clipboard.
  5. pbcopy < ~/.ssh/id_rsa.pub
            
  6. Go to web browser and log into bitbucket.org.
  7. Go to avatar > Manage Accounts
  8. Click SSH keys.
  9. Click Add key.
  10. Enter Mac or something like it for label.
  11. Right click in the textbox of Key and paste in the value.
  12. Move onto Folder for storing codes

Folder for storing codes

In Finder, create a directory called codes (or something like it) in your Home directory. Note it is NOT under in Documents directory. This means codes folder is at the same level as Documents. SmartGit, to be installed shortly, will keep codes in this codes directory.

Git

  1. Before using any Git repo on Mac, you need to download and install Git. Installer is at http://git-scm.com/downloads.
  2. After installing Git, you need to run following commands in Terminal. Git uses the information for your commits. Use double quotes as shown in this example. I would advise against using a disposable email address. If you do not want to use your main personal email, maybe use a secondary one for work.
  3. git config –global user.name "Your Name"
    git config –global user.email [email protected]
            
  4. Now Git commits from your Mac will contain your name and email address

Install SmartGit

  1. Download and install SmartGit. You can download SmartGit from syntevo.com.
  2. Open SmartGit for first time.
  3. Agree to License agreement.
  4. Pick ‘Non-commercial use only…’
  5. For Git Executable, you shoold already have ‘/usr/local/git/bit/git’. Continue.
  6. Pick ‘Use system SSH client’. If you are not familiar with SSH client, you may be tempted to pick ‘Use SmartGit/Hg as SSH client’. But if you follow all the direction in this post, you will be using your System SSH client, so pick ‘Use system SSH client’.
  7. For Hosting Providers, it’s ok to choose ‘I don’t use a hosting provider’. You will use a hosting provider, but no need to pick it here yet.
  8. Done installing SmartGit.
  9. SmartGit will close and reopen.

Pull from Git Repo with SmartGit

  1. Open SmartGit. You will be prompted with What do you want to do?. Click on Close to close this window.
  2. Go to Project > Clone
  3. Instead of typing in Repository URL, click on the icon with downward arrow. There are 2 such icons. Click on the one on the right side. Upon clicking on it, you should see Bitbucket as one of the choices.
  4. Pick Bitbucket, or some other repo of your choice.
  5. Enter your login ID/password for Bitbucket.
  6. The first time you do this in SmartGit, you will be asked to add a master password. This is for encrypting the password file on your Mac used by SmartGit. You do not have to use a master password but it is recommended. You will be prompted only once when starting SmartGit and then not prompted again.
  7. Continue
  8. You should see a list of repos hosted at bitbucket.org. In this example, you should see javascript-proper.
  9. Click on javascript-proper to highlight it and click on Select.
  10. Now Repository URL has the right URL
  11. Continue
  12. Under Selection, leave both (Include submodules & Fetch all Heads and Tags) checked and click on Continue.
  13. Under Local Directory, set path to ~/codes/javascript-proper. You will need to manually type in the path as shown, as javascript-proper folder does not exist yet.
  14. Click Continue.
  15. You may be asked about authenticity of host bucbucket.org if you are polling from bitbucket.org for first time. Type in yes and click on OK.
  16. Follow rest of prompts.
  17. Give a name to the project.
  18. Provided you imported your public SSH key successfully as described earlier, SmartGit should successfully pull from your repo, javascript-proper. Only thing is there is nothing in the repo, so you will see a message in output pane about cloning an empty repository.
  19. Next, add a file for test.

Checking in 1st piece of code with SmartGit

  1. In SmartGit, look for Directories.
  2. You should see javascript-proper, which is the project you just created by pulling javascript-proper from bitbucket.org.
  3. RIGHT click on javascript-proper and pick Reveal in File Manager.
  4. Now you are in Finder. Create a text file or copy it into javascript-proper. Let us assume the file is named testfile.txt.
  5. In SmartGit, you should see testfile.txt. The file is Untracked, meaning it has not been added to the repo on bitbucket.org yet.
  6. Click Stage. This is an icon, next to Commit.
  7. Clikc Stage again to confirm.
  8. Click Commit.
  9. For Commit Message, type initial commit or something like it.
  10. Now in SmartGit, the file disappears.
  11. To make the testfile.txt visibile again, go to View and check Show Unchanged Files.
  12. With a browser, go to bitbucket.org and check javascript-proper repo that you created earlier.
  13. Click on Source.
  14. You should be able to see the file testfile.txt. Click on the file and you can see the text of the file.

WebStorm

  1. Now you are ready to use WebStorm.
  2. Robert, author of How to Learn Javascript Properly, recommends WebStorm for serious js coders so I downloaded a trial copy. After using it for awhile, I agree WebStorm is better for coding html/css then just a regular text editor, even ones like Sublime Editor.
  3. Simply download WebStorm, install, and open it.
  4. Since you are using it for personal use, you can choose the unlimited, unsupported license type. When you start making $ with Webstorm, make sure to buy appropriate license.
  5. You really want to create a project for js training you will be doing.
  6. You can install Git plugin within WebStorm and try to access bitbucket.org directly. However after having used SmartGit for awhile, I found the Git component of WebStorm less than satisfactory. The plug-in is rated 4/5 btw.
  7. So as I said earlier, all of my Git stuff is done by SmartGit. In WebStorm I created a new project from existing files
  8. File > New Project from Existing Files
  9. For this tutorial, I picked Source files are in a local directory, no Web server is yet configured. This has not been a problem for me yet and I do not think it will. And it is the easiest method.
  10. Choose directory where the files are located at. In this tutorial, it is /Users/user/codes/javascript-proper
  11. Make sure javascript-proper is highlighted.
  12. Click on Project Root.
  13. Click on Finish.
  14. After a minute, WebStorm will finish creating the project.
  15. Expand javascript-proper and you will see testfile.txt. Double clicking the file opens it in the right pane.
  16. For test, edit testfile.txt and save it.
  17. Switching to SmartGit, you will see some interesting changes.

WebStorm project files and Git

  1. Switch to SmartGit and turn on some View options
  2. Make sure following View options are checked/enabled.
  3. View > Files from Subdirectories
  4. View > Show Unversioned Files
  5. View > Show Unchanged Files
  6. View > Show Ignored Files
  7. View > Show Staged Files
  8. Look at testfile.txt. It is in red color and its Working Tree State is Modified. This is expected as we edited the file in WebStorm just now.
  9. But what about the other files in directory .idea?
  10. There are about 8 new files with names like: .name, encoding.xml, javascript-proper.xml, etc.
  11. Right click on .idea and choose Ignore.
  12. IMPORTANT: Select Ignore explicitly (e.g.. Makefile).
  13. Click Ignore
  14. Click to select javascript-proper and then click Stage.
  15. You are about to stage the edited file, testfile.txt, and files created by WebStorm project.
  16. Click Stage.
  17. Testfile.txt is ready to be checked in but not actually checked in yet. So bitbucket.org does not know about the new changes in testfile.txt.
  18. Click Commit.
  19. Add some note and click on Commit & Push.
  20. After a minute or so, commit will be done.
  21. Now bitbucket.org knows about new changes in testfile.txt.
  22. Switch to web browser and go to bitbucket.org. Log in and check the source code of javascript-proper.
  23. You should see the testfile.txt that just checked in just a minute ago.