Results 1 to 10 of 21

Thread: HOWTO: Install Cloud9 IDE locally

Hybrid View

  1. #1
    Join Date
    Aug 2008
    Location
    Brazil
    Beans
    12,497
    Distro
    Ubuntu Studio 12.04 Precise Pangolin

    HOWTO: Install Cloud9 IDE locally

    In the last couple of days I have been playing with Cloud9 and it looks awesome. This tutorial will explain how to install Cloud9 IDE locally on your Ubuntu, how to create a script to easily switch between your projects and how to launch it using a customized separate browser profile.



    What is Cloud9?

    Cloud9 is an open-source full browser-based IDE with team collaboration and online project hosting, through GitHub integration.

    For more information about it's functionality and innovative approach, see Why Cloud9 Deserves your Attention.

    If you just want to use Cloud9 in the cloud, create a free account at http://cloud9ide.com and jump to section 4 of this tutorial.

    1. Installation

    The installation instructions are based on the tutorial posted on the Gratuitous Development blog and have been tested on Ubuntu 11.04.

    1.1 Installing Dependencies

    First you need to install the necessary dependencies to build node.js and o3.

    Open a terminal, paste the following code and hit Enter:

    Code:
    sudo apt-get install -y build-essential g++ curl libssl-dev apache2-utils git libxml2-dev
    1.2 Installation directory

    In order to avoid permissions issues, it is recommended to create a folder under your home for installing the necessary applications. Furthermore, you need to install everything on the same directory, so I recommend a separate folder just for these applications. In my system, I install several applications manually in the ~/install folder, so I have created another sub-folder for Cloud 9 stuff. For this tutorial I will use the same folder as the original tutorial, which will be ~/local. However, you can use whatever name and directory structure you want, just make sure to use the correct paths in the commands throughout the tutorial.

    So, create the installation folder and add the bin sub-folder to bash:

    Code:
    mkdir ~/local
    
    echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
    . ~/.bashrc
    Then cd into the installation directory. All the following instructions are assuming you started your terminal within the installation folder. They will instruct when you need to change directories.

    Code:
    cd ~/local
    1.3 Installing node.js

    The following commands will fetch the node.js source code from GitHub, cd into it's directory, switch to the latest stable branch, configure it to be installed in the ~/local folder, build, install and test it.

    Code:
    git clone git://github.com/joyent/node.git
    cd node
    git checkout v0.4.10
    ./configure --prefix=~/local
    make
    make install
    make test
    cd ..
    node -v
    1.4 Installing npm (Node Package Manager)

    Code:
    curl http://npmjs.org/install.sh | sh
    npm -v

    1.5 Installing Cloud9

    The following commands will fetch Cloud9 source code from GitHub, cd into it's directory, switch to the latest development branch and update the submodules.

    Code:
    git clone git://github.com/ajaxorg/cloud9.git
    cd cloud9
    git checkout devel
    git submodule update --init --recursive
    bin/cloud9.sh
    cd ..
    1.6 Installing o3

    The following commands will fetch o3 source code from GitHub, cd into it's directory, build it and copy it to cloud9 installation folder.

    Code:
    git clone http://github.com/ajaxorg/o3
    cd o3
    ./tools/node_modules_build
    cp build/default/o3.node ../cloud9/support/jsdav/support/node-o3-xml-v4/lib/o3-xml/
    cd ..
    That's it for the installation part.

    1.7 Removal

    In case you decide Cloud9 is not for you or if it doesn't work as expected, you can remove it completely by deleting the installation directory, which is ~/local in this tutorial.

    Then open ~/.bashrc:

    Code:
    gedit ~/.bashrc
    Remove the following line:

    Code:
    export PATH=$HOME/local/bin:$PATH
    To remove the dependencies:

    Code:
    sudo apt-get remove build-essential g++ curl libssl-dev apache2-utils git libxml2-dev

    2. Launching your project with Cloud9

    Cloud9 can be used with any web browser. All you need is to start the server with your project path:

    Code:
    ~/local/node ~/local/cloud9/bin/cloud9.js -w ~/pathtoyourproject
    Then you can open it in your browser by typing the following url in the address bar:

    Code:
    http://127.0.0.1:3000
    To stop the server:

    Code:
    killall node

    3. Easily switching projects

    Unlike more traditional integrated development environments like Netbeans, Eclipse or Aptana, which allows to open several projects simultaneously, it seems Cloud9 is designed to work with a single project. I have several git projects under the same root directory and I tried to open the root instead of the project itself, but it doesn't seem to work as expected. You can actually do it, but then you lose git integration.

    The single project approach makes sense for cloud hosting, but it is a little bit inconvenient when you are working with a local installation. However, it is easy to switch projects with a simply shell script.

    First make sure you have zenity installed:

    Code:
    sudo apt-get install zenity
    Then create/open the script with your favourite text editor:

    Code:
    gedit ~/local/projectswitcher.sh
    Add the following code and save it

    Code:
    #!/bin/bash
    
    PROJECT=$(zenity --file-selection --directory --title 'Select a Project Directory')
    
    if test -d "${PROJECT}";then
      killall node
      $HOME/local/bin/node $HOME/local/cloud9/bin/cloud9.js -w ${PROJECT} &
    fi
    exit
    Then make it executable:

    Code:
    chmod +x ~/local/projectswitcher.sh
    To switch projects, launch the script by double-clicking ~/local/projectswitcher.sh and select the project folder with the folder picker when prompted. Assuming Cloud9 is already opened in your browser (see previous section), just reload the page to switch to the new project.

    You can add the scrip to your desktop or panel for convenience. If you are using Firefox, you can also use my FoxRunner extension, that allows to run scripts from Firefox. This can be particularly useful for switching projects or if you use other scripts to manage your projects repositories. You can import the scripts above into FoxRunner or even create them using FoxRunner interface. For more information, see the extension documentation.

    Here is a screenshot of FoxRunner sidebar along with Cloud9:




    4. Create a separate browser profile

    Although you can open Cloud9 within your browser session, you might find more convenient to work with it as a standalone application. You can do that by simply using a different browser, but using a different profile allows you to use the same browser you like for regular browsing. A different profile will allow you to use a different set of add-ons, that are related to development, without cluttering your browser with more icons. It also allows to customize the browser appearance, independently from your default profile.

    4.1 Configuring a cloud9 browser profile in Firefox

    To create a new profile in Firefox, execute the following command:

    Code:
    firefox -no-remote -CreateProfile "cloud9"
    If you want to start your profile from command-line use:

    Code:
    firefox -P -no-remote "cloud9" http://127.0.0.1:3000
    You can also create a script to launch the profile:

    Code:
    gedit ~/local/firefox-profilelauncher.sh
    Add the following code and save it:

    Code:
    #!/bin/bash
    
    firefox -P -no-remote "cloud9" http://127.0.0.1:3000 &
    exit
    Make it executable:

    Code:
    chmod +x ~/local/firefox-profilelauncher.sh
    To delete the profile, in case you are uninstalling everything, open the profile manager and delete the profile:

    Code:
    firefox -no-remote -P

    4.2 Configuring a cloud9 browser profile in Chrome

    To create/start a cloud9 profile in Chrome use:

    Code:
    google-chrome --user-data-dir=$HOME/.config/google-chrome/cloud9 http://127.0.0.1:3000
    You can also create a script to launch the profile:

    Code:
    gedit ~/local/chrome-profilelauncher.sh
    Add the following code and save it:

    Code:
    #!/bin/bash
    
    google-chrome --user-data-dir=$HOME/.config/google-chrome/cloud9 http://127.0.0.1:3000 &
    exit
    Make it executable:

    Code:
    chmod +x ~/local/chrome-profilelauncher.sh
    To delete the profile, in case you are uninstalling everything, simply remove the profile folder:

    WARNING: Be careful when using rm command with -r option. Make sure you type the path correctly, otherwise it might delete other stuff without prompting. To be safe, use the file manager instead.
    Code:
    rm -r ~/.config/google-chrome/cloud9

    4.3 Configuring a cloud9 browser profile in Opera

    Unfortunately, Cloud9 doesn't seem to work well with Opera.


    5. Customizing cloud9 profile

    5.1 Theme

    Bloomind FT DeepDark 2 theme for Firefox integrates wonderfully with Cloud9 IDE:




    For Chrome, I suggest Tiësto theme.





    5.2 Customizing the interface

    You might want to hide some toolbars and icons in Firefox. Right-click on a toolbar, select Customize, then drag everything you don't need to the customization dialog and everything you need from the various toolbars and from the customization dialog, to the Tabs bar and click Done. Then right-click on a toolbar and untick Add-ons Bar, Navigation Toolbar, Bookmarks Toolbar and Menu Bar. Tick Tabs on Top.

    For example, this is how my cloud9 profile toolbar looks like:




    5.3 Hide the window border

    To hide the window border we can use the window rules feature of the window manager.

    5.3.1 Gnome Unity

    Unity maximizes applications by default and Firefox has global menu integration, so there is no title bar.

    5.3.2 KDE Kwin

    Right-click on the cloud9 profile window border, then select Advanced >> Special Window Settings..., then click Window Extra tab. In the Window title option paste:

    On Firefox: Cloud9 - Your code, anywhere anytime. - Mozilla Firefox

    On Chrome: Cloud9 - Your code, anywhere anytime. - Google Chrome

    Select Exact Match option. In the Geometry tab, tick Maximized horizontally and Maximized vertically, select Remember for both and tick the checkboxes. In the Preferences tab, tick No border, set to force and tick the checkbox. Click OK.



    6. Chromeless (experimental)

    Mozilla has killed Prism, which allowed to run web pages as standalone apps. However, Mozilla Labs folks are now working on the Chromeless project, which can provide a somewhat similar experience.

    Webian Shell, which is based on Chromeless, can easily provide such experience. To install Webian Shell, simply download it, extract it to the ~/local folder or somewhere else and execute the binary inside the extracted folder.

    Here is what Cloud9 looks like in Webian Shell:



    Enjoy!

  2. #2
    Join Date
    Feb 2010
    Location
    City Of Angels
    Beans
    110
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: HOWTO: Install Cloud9 IDE locally

    is this free? i mean all of it is free?

  3. #3
    Join Date
    Aug 2008
    Location
    Brazil
    Beans
    12,497
    Distro
    Ubuntu Studio 12.04 Precise Pangolin

    Re: HOWTO: Install Cloud9 IDE locally

    Quote Originally Posted by itagomo View Post
    is this free? i mean all of it is free?
    Yes.

  4. #4
    Join Date
    Feb 2010
    Location
    City Of Angels
    Beans
    110
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: HOWTO: Install Cloud9 IDE locally

    i was using the online version then a 'Trial Mode' appears in my dashboard. after few research, i found out there will be some kind of a extension.

    cloud9ide.lighthouseapp.com/projects/67519/tickets/372-trial-mode-on-cloud9-ide

    just curious if it's really free or not.

  5. #5
    Join Date
    Aug 2008
    Location
    Brazil
    Beans
    12,497
    Distro
    Ubuntu Studio 12.04 Precise Pangolin

    Re: HOWTO: Install Cloud9 IDE locally

    Quote Originally Posted by itagomo View Post
    i was using the online version then a 'Trial Mode' appears in my dashboard. after few research, i found out there will be some kind of a extension.

    cloud9ide.lighthouseapp.com/projects/67519/tickets/372-trial-mode-on-cloud9-ide

    just curious if it's really free or not.
    Yes, it is totally free if you install locally. They only charge for the online service, which also has a limited free plan.

  6. #6
    Join Date
    Feb 2010
    Location
    City Of Angels
    Beans
    110
    Distro
    Ubuntu 12.04 Precise Pangolin

    Re: HOWTO: Install Cloud9 IDE locally

    thanks for sharing this tutorial bro

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •