Probably you already have heard about Cloud9 and have done some development of it. Maybe it is your favorite IDE. Before I actually go on I have to admit that Cloud9 is not my personal favorite. For Node.js and plane HTML projects I use WebMatrix and Visual Studio with the Python Tools installed comes handy for Python projects. But that is the point! I use two different IDEs, which in this case works nicely together, but that must not be the situation in every development environment.
Some days ago I watched the Introduction to Node.js from Paul O’Fallon and he is using Cloud9 throughout the whole course and I was impressed about what you can actually do with it. Literally years after I have used Cloud9 for the first time it was time to give it another try. In this post I am going to talk about the capabilities Cloud9 has and my experiences with it.

Cloud9 – A quick overview

What is this thing called Cloud9? In short, it is an online development environment for a lot of languages. The most well-known are Node.js, HTML, Java, and Ruby.

I had some fun the first time I tried to work with Cloud9:

Do you want to guess which browser I was using? One thing to mention before actually starting with Cloud9 is, that it only support Firefox, Chrome, and Safari. If you are using Internet Explorer, you have to switch to one of these three. My favorite, and the one of Paul, is Chrome, but that is a matter of personal preference.

Sign up

After choosing an appropriate browser you can get started with Cloud9. You have several options how you can sign in into it. You can create an account on Cloud9 or you can sign in with your GitHub or BitBucket credentials. I prefer to sign in with my GitHub account. Why? If you are using GitHub a lot, like I do, you can work on your repositories directly on Cloud9.

Pricing

Before we actually start with Cloud9 I want to quickly talk about the two pricing models of Cloud9: Standard and Premium.

The Standard account is a free one, which is best suited for public projects (for example open-source projects). With that you will get one private workspace, full shell access and terminal, three FTP Workspaces, an unlimited amount of public workspaces, and an unlimited amount of collaborators. For me it was important that I will have a private workspace, because even if I work on a open-source project I like to bring it on a certain level before making it available to the whole community.

The second option is the Premium account for $12 per month. The difference to a Standard account is that you have six private workspaces, an unlimited amount of FTP Workspaces, and that you can connect to your own VM. This option is mostly used if you work on some internal projects, which should not be accessible for everybody.

The IDE

Ok, up to this point we have chosen the right browser, we have signed up for Cloud9, and we have chosen the appropriate pricing model for our purposes. Let us have a look at the dashboard. This is how my dashboard looks like:

On the left side I can see my projects, the projects shared with me by someone else, recently visited projects, and one thing which is really important for me: my projects on GitHub. If you have not signed up with your GitHub account you probably won’t see them until you activate the add-on service for it. Also on the left side I can create a new workspace, either from creating a new workspace or cloning from a URL. On the right-hand side you will see some links about how to get started with Cloud9, your recent activities, the add-on services you can use, and some account settings.

Enough of the introduction, let us start coding and create a new workspace. If you are not familiar with workspaces (maybe because you have not used Eclipse before), workspaces are the place where your code lives in. If you have a Visual Studio background think of it as a project.
While creating a new workspace you will see the following screen:

First you have to make sure that it is awesome, that means give your project a cool name. After that you should choose the workspace privacy. Make it open and discoverable for anyone or just create a private workspace (but keep in mind that you will only have one with the Standard account). After that you will have to choose how you want to host your project. Should it be hosted on the Cloud9 site, on a FTP server, or on a server which is accessible via SSH. In most situations the hosted option is just fine.
As a last step you can choose your project type. For this post I want to concentrate on the Node.js, HTML5, and Python types.

HTML

If you have chosen HTML5 as your project type a screen similar to the following one will be appear:

That is your IDE! Before I show you around a quick hint what you should do first. In the top-hand menu bar you will find the Preview button. Click it! On the side you will now see a live preview of your HTML site. Is it really a live preview? No. The preview window will update after saving the file. I do not want bother you with writing a sample in HTML. Instead I will show you around in the IDE.

One thing you should notice when opening the generated HTML file is that you have warnings beside some lines of CSS.

Using width with border can sometimes make elements larger than you expect.

Seems useful? I think so. Also if you miss a semicolon in your JavaScript Cloud9 will inform you. The tool bar at the top is similar to most IDEs, so I will only point out some things which I think are quite useful.

Zen Mode

Zen Mode can be found under the View button and lets you focus on your code. Everything will be closed expect your code editing window. It will grow and take most of the space of your browser.

The Share menu gives you the option to invite other people to your project. Also you can share it via Twitter or Facebook.

Deploy

Deploy is a quite useful option. It lets you define several deployment server, for example a Windows Azure Cloud Service, a Windows Azure Web Site, on Heroku, or on RedHat Openshift. I have tried to upload a Windows Azure settings file to point Cloud9 to my Azure account, but it seems to have some problems with it, but fortunately an azure_error file was created in my workspace which gave me some hints for further investigations.

Most things I told you to this point also apply to the following short discussions about Node.js and Python in Cloud9.

Node.js

Most of the IDE tooling was already said before. That is the reason why I only want to point out an amazing feature: the terminal. I’m a big fan of Markdown, so I love to work with marked, a library for parsing Markdown which is available through NPM. Now, how can I install this library? Simple answer: Go to the terminal at the bottom and type

npm install -g marked

This will give you the following output, which should be familiar:

Now we are ready to change the given sample code a little bit.

The output will be the following

Awesome? I would think so.

Python

At this point we have seen a little bit of HTML and Node.js in Cloud9. Lets move on to my last favorite: Python. If you are mostly using Python for shell programs you do not have to stay away from Cloud9. With the terminal and output window you can work like you would do in a desktop environment. Let me give you an example.

I have used this snippet on my introduction post about the Python Tools for Visual Studio. Because you are not in a Windows environment anymore, and the shell will close when the program is done, you can remove the first and the last line, click run and the same output will appear in the Output window as it would in a normal shell.

There is more…

Cloud9 gives you the ability to work on the same file at the same time. The changes on a file will be reflected to all connected clients. I have not tried it yet, but I hope some of you are trying the links below and I can see live how you are editing my files.

If you want to have some fun with my workspaces for this blog post: you will find them on the following sites

Summary

We have covered a lot of topics in this post. We signed up for an account, we have become familiar with the IDE, and we have seen some cool features.

A last hint from my side: if you ever have the problem that the preview window does not reflect the changes you have made, you should ensure that you have saved the appropriate file. As a Visual Studio user for years now I had this problem several times.