For Javascript programs, Cloud9 IDE provides intelligent and responsive autocompletion for your code. Autocompletion is based not only on the content within your files, but also on the ECMAScript and Node.js standard library:
-
Methods defined in ECMAScript and Node.js also have documentation provided for you. Simply hover over a method name for a moment, and a second box quickly shows some additional information.
-You can disable autocompletion in the Settings menu.
- -Cloud9 IDE offers many different ways to get your code from your editor to your \nproduction server. To deploy your code, click on the Deploy button in the \nProject Bar:
\n![\"The](\"./resources/images/deployButton.png\")
We offer tight integration with the following environments:
\n\nFollowing these links will provide you with more information on code deployment.\nYou can deploy your code to as many services and servers as you like. Keep in \nmind that you'll already need an account at those hosting providers before you \ncan deploy your app to them!
\nIf you're comfortable with the command line, you can also deploy to several more\nenvironments, such as:
\n\nThis section will show you how to deploy your applications to Heroku, a cloud-based application platform. The integration with Cloud9 IDE makes your development process even more agile. If you don't have a Heroku account, visit their website to create one for free.
\nTo get started, create a simple Node.js application. If you don't have one yet, you can follow our tutorial on developing one.
\nAfter you click on the Deploy button in the Project Bar, click the plus sign next to Deploy to add another deploy target. Choose Heroku as an option. After you have signed into your Heroku account, you can create a new deploy target or choose an existing one from your account:
\n![\"Showing](\"./resources/images/herokuDeploy.png\")
Next, press Deploy to continue the process; the following window might appear:
\n![\"Dialog](\"./resources/images/missingPackageJSON.png\")
Heroku Node.js apps are required to have a package.json file, much like with NPM. Cloud9 can generate a package.json file for you, containing metadata to share Heroku. The following lines represent what that file might looks like:
\n{\n \"name\": \"cloud9-heroku-example\",\n \"version\": \"0.0.1\"\n}After you have a package.json file, you might see this dialog:
\n![\"Dialog](\"./resources/images/missingProcFile.png\")
Sometimes, a Heroku app also requires a Procfile. The Procfile is needed to start the application in Heroku. You can just create a new file, add the line below, and save it as 'Procfile'. Don't add any file extensions.
\nweb: node web.jsTry the deploy button again. The console will directly output the following when the deployment is completed:
\n![\"Console](\"./resources/images/herokuConsoleOutput.png\")
And just like that, you've deployed your project to Heroku.
\n\nThis article will show you how to deploy your applications to Windows Azure. If you don't have an account yet, the Windows Azure process will help you create one. Keep in mind that Windows Azure is not free, though it does come with a free trial. Windows Azure projects can be deployed from any operating system.
\nTo get started, create a simple Node.js application. If you don't have one yet, you can follow our tutorial on developing one.
\nAfter you click on the Deploy button in the Project Bar, click the plus sign next to Deploy to add another deploy target. Choose Windows Azure as an option. You'll be prompted with this dialog:![\"Windows](\"./resources/images/windowsAzureDialog.png\")
You must click on the Download Windows Azure Settings button before you can continue. If you don't have a Windows Azure account, here is where you can create one. If you do have an account, your browser will automatically download the required file.
\nWhen that's finished, simply select the downloaded file from your computer, and upload it to Cloud9. You'll only have to do this process once. If you ever need to upload a new certificate, be sure to click Clear cert in the lower-right corner of this dialog.
\nAfter the file has uploaded, click on Create new to create a new hosted service. A hosted service is the container in which your application is hosted when it is deployed to Windows Azure. For more information, see Overview of Creating a Hosted Service for Windows Azure.
\nYou can set a few configuration options such as the number of instances to use, its host OS, and where the data center is located. Selecting "Enable RDP" and providing a username and password enables remote desktop for your deployment.
\nYour new Windows Azure server will appear in the Deploy list:![\"Windows](\"./resources/images/windowsAzureInfo.png\")
Go ahead and click on DEPLOY. If this is the first time you're trying to deploy this project to Windows Azure, you'll receive three prompts:
\nA dialog will inform you of a missing web.config file. If you click Yes, Cloud9 will create a file called Web.cloud.config in your project. This file contains configuration information about your app.
\nYou'll be told about a missing csdef file. If you click Yes, Cloud9 will create a file called ServiceDefinition.csdef in your project. ServiceDefinition.csdef is a Windows Azure-specific files necessary for publishing your application For more information, see Overview of Creating a Hosted Service for Windows Azure.
\nYou'll be asked to select the instance size for this application. For this tutorial, just select Small, and then click Create. For more details about Windows Azure VM sizes, see How to Configure Virtual Machine Sizes.
\nYour app will now deploy to a Windows Azure server! You can follow its progress in the Deploy panel, or by watching the messages in the console:\n![\"Windows](\"./resources/images/windowsAzureStagingOutput.png\")
For more information on configuring your app on the Windows Azure website, see Deploying a Windows Azure App from Cloud9.
\n\nIn the new version of Cloud9 we don't have support for deployment from the UI yet, but we're going to add those features soon.
\nUntil then, you can manually install various command-line tools into your workspace and deploy using the command line. \nIt should go without saying that this is for super 31337 developers that aren't afraid of the command line.
\nBelow is a list of some of the services we have tested and support deploying to. \nAll the commands need to be executed in the terminal unless stated otherwise.
\nHeroku's toolbelt is installed by default in new VMs.
Now, you can use the heroku command for your projects, as described in the \nHeroku documentation.
If deploying to Heroku, you should probably be using a local instance of PostgresQL, or you may run into problems caused by different database interpretations of SQL.
\nIn the Console or a Terminal, type the \nfollowing:
\nnpm install azureNow, you can use the azure command from the Console/Terminal. For more \ninformation, read the official azure documentation.
To deploy to Azure sites from the command line, open the Terminal and type:
\ncd ~/lib/azure-sites\nnpm installThen, add the bin to your workspace's path:
\nPATH=$PATH:$HOME/lib/azure-sites/binNow, you can use the azure command in the terminal.
For free and premium plans, follow the instructions on the \nazure-cmdlet-node repository. This \nproject is maintained by Cloud9.
\nFirst, setup Push to Deploy: Create a new App Engine application at \ncloud.google.com/console, and then enable \nPush-to-Deploy under 'App Engine' in the Application Settings page. Leave this \ntab open to note the URL for your repo.
\nSecondly, configure Cloud9. Run the following commands (making sure to replace \nyour email address, auth-token, and repo-url):
\necho \"machine code.google.com login EMAIL password PASSWORD\" >> ~/.netrc\ngit remote add appengine REPOFinally, do a commit, and a push:
git commit -a -m \"First commit\"\ngit push appengine master# Install rhc:\ngem install rhc\nrhc setup\n\n# After this you can use rhc to manage your account:\n\n# list apps:\nrhc apps\n# To show what you can do with apps do:\nrhc app help\n# You deploy via a git push\ngit push <giturl> masterTo deploy to CloudFoundry from the command line in the Console \nor a Terminal, type:
\ncd ~\nwget https://github.com/cloudfoundry/vmc/zipball/master\nmv master cloudfoundry\nunzip cloudfoundry\ncd cloudfoundry-vmc-nnnn\nbundleIn the the Console or a Terminal, type:
\nnpm install jitsu@0.7.x -g\nmkdir node_modules\nmv ../lib/node_modules/jitsu node_modulesNow, you can run jitsu from the command line. For more information, see \nthe official jitsu documentation.
npm install jitsu@0.7.x -gYou can now run jitsu from both the Console and the Terminal.
In the the Console or a Terminal, type:
\nnpm install modulus -gNow, you can run modulus from the command line. For more information, see \nthe official modulus documentation.
Yes, Cloud9 supports FTP workspaces that allow you to edit your files directly on your FTP server. \nCurrently FTP workspaces still open in the old version of Cloud9, but soon we'll also support FTP workspaces with the new version of Cloud9.
\nOne thing that was removed for reliability reasons in the new version of Cloud9, is the ability to deploy over FTP from a regular workspace.\nWe're bringing back those features in a new format and with much higher reliability in the coming months.
\nSee Deploying via CLI.
\nNo, this is not supported by our hosting platform. It does currently allow access to the GMail servers though, so you can use that service during development.
\nYou can inspect your current quota usage with the df command in the Terminal:
\n$ dfTo find which files and directories are consuming a lot of space, go to a directory such as your home directory, and run this command:
\n$ du -m -d 1 -a | sort -nThis should give you a list of all members of that directory and how much space they use in megabytes.
\nAlternatively, try du-c9 for seeing all files you added to your workspace and account for the quota.
You can sign into Cloud9 with your github or bitbucket account and set that up to use two-factor authentication.\nWe don't currently provide an option to directly setup your Cloud9 account for two-factor authentication.
\nTry using port 8080 instead, which often solves this case.
\nApplications won't start if another application is already listening to the same port. In order to fix it you first need to find out which process that is:
\n$ netstat -nlp | grep $PORTThis will report the process id (PID) which you can then kill using
\n$ sudo kill -9 <PID>Often apache is still running in the background. In that case you can kill it using
\n$ sudo pkill apache2Either drag a local file directly from your desktop into the Cloud9 file tree,\nor use the "File > Upload Local Files" menu item.
\nUse "File > Download project". Currently, this will give you a .tar.gz file, which\nensures maximum portability. To open these files, you can use something like\nWinRAR or 7-zip.
\nSometime you might want others to open a file or directory in the browser \nwithout opening up the whole workspace. This can be done by starting a small \nhttp server in that directory and make sure that the running application is public.
\nTo make the running application public you have to click the "sharing" button at\nthe top right and the check "public" for application.
\nTo run the server open a terminal and do
\n$ cd /dir/i/want/to/share\n$ python3 -m http.server 8080We recently discovered our web host is blocking connections to some Digital Ocean IP addresses because they suspect they are being used by Iranian users. They are legally forced to block them.
\nDigital Ocean maintains a whitelist of droplet IP addresses which should not be blocked and our web host follows this list.
\nPlease raise a support ticket with Digital Ocean mentioning that you would like to have your droplet IP added to the whitelist. After this is complete you will be able to create your SSH workspace within 24 - 48 hours.
\nTry executing the following command:
\nyum install ncurses-devel or
\nyum install glibc-static By default the logs are in ~/lib/apache2/log
\nNo, this is currently not supported; see FAQ: General about SMTP access.
\n\nThe color picker is an awesome feature in Cloud9 IDE, designed to not only make color selections easier, but also, more harmonious. At its core, the color picker is a way to represent words (red, blue, e.t.c.), RGBA values (rgba(175, 3, 124, .6)), or hex values (#f00f00) into actual colors.
To enable the color picker, flip the preferences on in the Settings panel. You can use the color picker in CSS, SVG, HTML, or APF Skin files. All you have to do is hover over the value of a color definition, and it'll instantly highlight, like this: ![\"Color](\"./resources/images/colorPickerHighlight.png\")
When the represented color is highlighted, click on it. You'll get a color square defining all the possible color arrangements. To select a color, you can click in the square, pick your own RGB or HSB values, or enter some hex code. Best of all, at the bottom of the window, you'll find a list of other colors found within the same document--just in case you want to achieve matching shades:![\"Color](\"./resources/images/colorPickerWheel.png\")
To set the value, just click anywhere outside of the color picker.
\n\nFor JavaScript files, Cloud9 provides analysis using a combination of our own analysis tools, as well as JSHint (specifically for Javascript code). Our language analysis can't detect if your program is correct, fast, or has memory leaks, but it can save you time by spotting things like undeclared variables, syntax errors, or other preventable typos.
\nWhen Cloud9 detects an issue with your code, an icon appears in the gutter for the offending lines of code. There are three types of identifiers available for your code:
\n![\"Little](\"./resources/icons/info_icon.gif\"){kind=icon}
): these are non-critical, non-dangerous updates about your code![\"Warning](\"./resources/icons/warning_icon.gif\"){kind=icon}
): these are potentially incorrect pieces of code![\"Error](\"./resources/icons/error_icon.gif\"){kind=icon}
): these are incorrect lines of code that will almost certainly throw a runtime error when you try to run your scriptIf you hover over any of these icons in the gutter, you'll get a pop-up that presents some information as to what, exactly, the problem is. For example, suppose we have a variable declared, called fs, that is never used:![\"fs](\"./resources/images/unused_var_sample.png\")
Notice also that fs has a strikethrough, to provide further visual clues that something is not quite right.
If you're concerned with the level of information that's listed in the gutter, you can always configure its "strictness" in the IDE preferences. For example, you could choose to hide every icon that isn't a warning or an error.
\nJSHint provides additional configuration options that Cloud9 incorporates on a per-file basis. Typically, you declare these options as comments at the very top of a file, like this:
\n/*jshint curly:true, debug:true */For a full list of the JSHint configutation options, please check the documentation page describing them.
\n\nFor Javascript programs, Cloud9 IDE provides intelligent and responsive autocompletion for your code. Autocompletion is based not only on the content within your files, but also on the ECMAScript and Node.js standard library:
\n![\"Autocompletion](\"./resources/anims/autocompletion.gif\")
Methods defined in ECMAScript and Node.js also have documentation provided for you. Simply hover over a method name for a moment, and a second box quickly shows some additional information.
\nYou can disable autocompletion in the Settings menu.
\n\nLuckily you're not limited to the default set of Runners in Cloud9.\nYou can simply define your own custom Runner, which is both simple and very powerful.\nAll you need to do is create a Runner file.\nIn this article we'll describe how to do this in just a few steps.
\nIn the Run panel (usually at the bottom of the UI), click the 'Runner' text input and choose 'New Runner'. \nIn the new Runner file that's now opened, you can configure your runner\nusing a simple JSON format. We'll show a basic example below\nand then explain the different properties you can use.
\nLet's start with a basic example: a runner for go files.
\n{\n \"cmd\": [\"go\", \"run\", \"$file\", \"$args\"],\n \"selector\": \"source.go\",\n \"info\": \"Your code is running :)\"\n}This runner will use "go run" for any file that has a ".go" file extension.\nIf you add it, it'll override our default Go runner.
\nAs another example, let's save a new Node 0.11 configuration, including Harmony support. \nCreate a new Runner, add this code, and save it as 'Node 0.11.x.run':
\n// This file overrides the built-in Node 0.11.x runner\n// For more information see http://docs.c9.io:8080/#!/api/run-method-run\n{\n \"cmd\": [\n \"bash\",\n \"--login\",\n \"-c\",\n \"nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args\"\n ],\n \"debugger\": \"v8\",\n \"debugport\": 15454,\n \"info\": \"Your code is running at \\\\033[01;34m$url\\\\033[00m.\\n\\\\033[01;31mImportant:\\\\033[00m use \\\\033[01;32mprocess.env.PORT\\\\033[00m as the port and \\\\033[01;32mprocess.env.IP\\\\033[00m as the host in your scripts!\\n\"\n}That's it! Your custom Runner should be available in the Run panel.
\nHere's a list of all the variables you can use in your runners:
\n$file_path The directory of the current file, e. g., /home/ubuntu/workspace/docs
$file The full path to the current file, e. g., /home/ubuntu/workspace/docs/Chapter1.txt.
$args Any arguments entered after the file name.
$file_name The name portion of the current file, e. g., Chapter1.txt.
$file_extension The extension portion of the current file, e. g., txt.
$file_base_name The name only portion of the current file, e. g., Document.
$packages The full path to the Packages folder.
$project The full path to the current project file.
$project_path The directory of the current project file.
$project_name The name portion of the current project file.
$project_extension The extension portion of the current project file.
$project_base_name The name only portion of the current project file.
$hostname The hostname of the workspace.
$hostname_path The hostname of the workspace together with the relative path of the project file.
$url The full url to access the workspace.
$port The port assigned to the workspace.
$ip The ip address to run a process against in the workspace.
Let's say you're working a large project containing many files, and you kind-of sort-of know the name of a file that you want to open up. Goto File is our feature to help you quickly and easily jump to any file in your workspace, without the need to search through different directories. Simply hit Cmd-E (or Ctrl-E on Unix/Windows) and away you go:
![\"Goto](\"./resources/images/gotofile.png\")
Goto File offers filtering for any portion of a filename, including directories. Search for the beginning, middle, or end of a file path, or even just an extension, like .js, and Goto File with instantly present the results to you. Clicking on a name in the list opens the file right up. Goto File does not support case-insensitive, wildcard (*, ?), or regular expression (., +) searching.
Goto Definition takes the same concept and applies it to files. You can easily navigate between classes and members defined in your files. By entering text, you can filter your class' member results. Finally, as you navigate through your file, Cloud9 IDE will jump to the relevant portion of the code:
\n![\"Goto](\"./resources/images/gotodefinition.png\")
Another feature that's available is the capability to "jump to definition." If your cursor is on a variable or function name, you can tap F12 (or type jumptodef in the console) to instantly scroll the editor to the member's definition.
Collaboration with Cloud9 IDE is an amazing feature that lets you do more than just share your projects with any other Cloud9 developer. You can grant someone else access to change files in your workspace, in realtime--or just let them view the workspace without any other rights. While you're collaborating, you can discuss the code through a built-in chat room.
\nTo invite someone to collaborate on a project with you, simply copy the URL in the browser and send it to a friend. You can also click on Share in the menu bar to get quick access to other ways to share, such as via e-mail, Twitter, or Facebook.
\nLet's take a look at some of the additional features available while you collaborate.
\nThere are two terms used for people accessing your project: members and visitors. Members are individuals that have read and write access to your project--that means they can change any code; visitors only have read access. The Members panel lists all the collaborators in a project, both active and inactive:
\n![\"The](\"./resources/images/members_panel.png\")
If you are the owner of a project, you can click on anyone's username to grant (or revoke) write access:
\n![\"Granting](\"./resources/images/collab_grant_access.png\")
If you're worried about the sanctity of your code after grant access to other developers, fear not. You can always take a look at a file revision history to view line-by-line changes made to your project over time.
\nAny member or visitor can participate in group chat with each other. Developers can also choose to double-click on a person's username and engage in a private, instant-message-style conversation.
\nWhen a collaborator changes a file you're also working on, Cloud9 detects it and asks you whether you'd like to use their changes, or your version. We're also simply giving you the option to merge both, using a three-way-merge algorithm to handle any conflicts. This is the same algorithm used by version control systems like git for merging branches.
\nTo make the experience even smoother you can choose "Always merge by default" and we'll never interrupt you about file changes again.
\nCheck out the video below to see this in action.
\nAside from Goto File and Goto Definition, Cloud9 also offers more traditional search functionality. There are three types of search modes available: quicksearch, search and replace, and find in files.
\nQuicksearch can be activated by hitting Cmd-F on a Mac, or Ctrl-F on a Unix/Windows machine. As you type in the quicksearch bar, the IDE instantly shifts to the next available result. This is a great way to quickly search around in your code without hassle.
Quicksearch offers the following options:
\nBuilding on the features of quicksearch, search and replace allows you to replace segments of code in your file. You can again continue to use regular expressions, keeping in mind the groupings are prefixed with a dollar sign, i.e. $1.
Replacing offers two more options:
\nIn order to search across a set of files, you'll want to use the Find in Files feature. Here, you can search of a string or regular expression, within your entire workspace or a single directory. You can also filter based on extensions, like *.js or *.rb.
Find in files offers some of the same search options as quicksearch:
\nOne more feature of find in files is the ability to render search results either in the console or the IDE. You can fold results to keep them out of the way, or, edited the file if you're working down a list:![\"Search](\"./resources/images/searchinfiles_ide.png\")
Multiple cursors is one of the most useful features available in the Cloud9 editor. You can use multiple cursors to perform tasks like rename several variables or members at once, break up lists separated by commas, or insert the same text in multiple locations.
\n![\"Showing](\"./resources/anims/multiplecursors.gif\")
Multiple selections can be copied and pasted, and you can insert or remove entire lines in several locations.
\nThere are several ways to get access to mutliple cursors:
\nOne of the best capabilities is the ability to instantly select the next instance of your currently highlighted section. This is especially useful for refactoring several parts of the code at once. To do this, press Ctrl-Alt, followed by the right (or left) arrow key to navigate around in the code.
\n\nCloud9 IDE has varying levels of support for different programming languages. \nUsually you will at least have Syntax Highlighting in the editor and the ability\nto run apps from the Terminal.
\nCloud9 IDE develops and builds on Ace, an \neditor for writing code online. Cloud9's Ace editor currently supports \nhighlighting for about 100 programming languages, and any changes made to Ace are \nreflected back into Cloud9 IDE.
\nThe list of supported languages is growing, and you can get the full list from \nthe menu. Feel free to create an issue in the Ace repository \nfor new requests, or add your own syntax highlighting mode.
\nSee Syntax Highlighting & Themes for more \ninfo.
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe Run panel currently supports running the following by default:
\nIf you'd like to run any other language, simply create a new "Runner".
\nYou can also do so from the Terminal. \nEach workspace is an Ubuntu VM with the standard tools like bash, make, \ngcc, vim, java SDK or perl pre-installed.
Cloud9 IDE develops and builds on Ace, an editor for writing code online. Ace supports over two dozen different themes for highlighting your code, and any changes made to Ace are reflected back into Cloud9 IDE.
\nYou can change your current theme by going to , and selecting from one of the many options. By hovering over the menu items, you'll be able to get a preview of the theme. To activate a theme you like, just click on its name.
\nThe IDE contains the following themes:
\nBy default, files are highlighted based on their file extension. You can change this by going to , and selecting a different context. This forces a single file to use a different highlighter.
\nWe support highlighting for at least the following languages, and many more:
\nWe are always adding new themes and new languages to support, so check the menu often! Since we use Ace to provide syntax highlighting, feel free to log an issue there for new requests.
\n\nCloud9 IDE allows you to easily add files to your curent workspace at any time. You can drag and drop files from your computer directly into the Project Files pane, and the IDE will add them to your project. Google Chrome users can also drag entire folders into the IDE.
\nIf a file transfer is halted for some reason--say, if you lose your internet connection--the upload resumes once the connection returns. As the files transfer, the IDE lets you know the current status of the overall transfer, as well as the status of each file being uploaded:
\n![\"Uploading](\"./resources/anims/uploading.gif\")
You can also get an exact copy of your workspace to save on your computer. By going into , you will be provided with a Zip file containing the entirety of your project.
\n\nFor Drupal there are some installation guides around which tell you to install PHP first, but that's not necessary with Cloud9.\nYou don't need to install MySQL either, it is already preinstalled in PHP workspaces. \nJust make a new workspace, choose PHP, go to the Terminal, and execute the following:
\ncd $HOME\ncurl -O http://ftp.drupal.org/files/projects/drupal-7.30.tar.gz\ntar xvf drupal-7.30.tar.gz\nmv drupal-7.30/* workspace/\nmv drupal-7.30/.htaccess workspace/\ncd $HOME/workspace\nmysql-ctl install\nmysql-ctl start\nmysql-ctl statusOpen the file install.php in the file tree, and while opened, click on the "Run Project" button in the menu bar on top of the IDE.\nAn URL will be shown at the bottom of the page, something like "https://drupal-c9-lcipriani.c9.io/", but with your username and workspace name in it.
\nCopy the url in a new browser tab and you will see the install page of Drupal
\nYou can now proceed with the installer
\n![\"Drupal](\"./resources/images/drupalFrameworkInstaller.png\")
Now be careful inserting the correct values for the database. You need to change the values as follows:
\nuser: yourusername\ndatabase: c9\nhost: 127.0.0.1Open the Advanced Options in the database settings page as shown in the screenshot:
\n![\"Drupal](\"./resources/images/drupalFrameworkMysql.png\")
Now fill the form with the correct site information:
\n![\"Drupal](\"./resources/images/drupalFrameworkSiteInfo.png\")
Continue the setup and enjoy your website!
\n![\"Drupal](\"./resources/images/drupalFrameworkInstalled.png\")
When you're working with git repositories, it's helpful to know who made a commit to a particular piece of code. As it turns out, git has a feature called git blame that we've integrated directly into Cloud9 IDE.
By using git blame, you'll be able to instantly discover who edited certain lines of code, when they edited it, and what their commit message at the time was. Clicking on a git commit also highlights other lines of code changed at the same time. To launch the git blame feature, open a file and navigate to .
Zen mode is a full screen coding environment designed to make you more productive. It essentially removes all the additional UI elements in Cloud9 IDE, and places you in a harmonious relationship with your code.
\nTo activate zen mode, simply hover over the upper right corner of the code editor, and click the icon that appears. Keep in mind that you'll need to have a file open before you can launch zen mode. You can resize your window by holding and dragging the left or right border.
\nTo get out of zen mode, hover over the same corner and click the same icon.
\nYou can also enter and exit zen mode via keyboard shortcuts, command line, or from the menu bar at .
\n\nIonic is an open source front-end framework for developing hybrid mobile apps with HTML5.
\nCreate a Ionic app as follows:
\nRun the following commands in the Terminal:
\n $ npm install -g cordova ionic\n $ ionic start myApp sidemenu\n $ cd myApp\n $ ionic serve $PORTClick the "Preview" button in the top menu in the IDE, and choose "Preview with Web Server". This will open the Preview window for your running app.
\nGhost is a simple, powerful publishing platform that \nallows you to share your story with the world.
\nCreate a Ghost blog as follows:
\nRun the following commands in the Terminal:
\n $ curl -L https://ghost.org/zip/ghost-latest.zip -o ghost.zip\n $ unzip -uo ghost.zip -d .\n $ rm ghost.zip\n $ npm install --productionAdapt the config.js file to the Cloud9 environment. Change the following keys:
config: {\n development: {\n url: 'https://' + process.env.C9_HOSTNAME,\n },\n server: {\n host: process.env.IP,\n port: process.env.PORT\n }\n }Run Ghost by typing npm start in the console or by opening index.js and\nhitting the run button.
Change the URL to /ghost and create your admin user to login to the Ghost admin interface
Joomla is a popular open source CMS. \nInstalling Joomla is very straightforward, but there are just a few quirks to keep in mind, which we describe below.
\nDownload and Unzip Joomla from the Terminal. You can find the latest version on the Joomla website
\n wget http://joomlacode.org/gf/download/frsrelease/19665/160049/Joomla_3.3.3-Stable-Full_Package.zip\n unzip Joomla*.zip\n rm Joomla*.zipJoomla requires a MySQL database to connect to. MySQL is pre-installed in your workspace, so just execute these commands:
\nmysql-ctl install\nmysql-ctl start... and then note the credentials to use in the configuration of Joomla later on.
\nTo run the Joomla installer, open index.php and run it with the "Run" (or "Run Project") button at the top of the IDE.\nNext, click the URL that's displayed in the Run panel, which looks something like https://joomla-c9-username.c9.io/installation/index.php#. \nThis will open up the Preview window with the installer.
\nNow, here comes the quirky part: the installer will not work properly if it's loaded over HTTPS, as the Cloud9 Preview window does by default.\nSo, in order to make the Joomla installer work, do the following:
\n![\"Preview](\"./resources/images/previewPopOutButton.png\")
(or copy & load the URL in a browser tab)Now you should be able you to get through the installer successfully.
\nThe main Configuration screen should look like this:
\n![\"Joomla](\"./resources/images/joomlaInstallerMain.png\")
Enter whatever values you'd like here.
\nThe second quirky and important thing to keep in mind in the Database section, is to use Host Name "0.0.0.0" instead of "localhost".
\nSo use values like shown in the screenshot below:
\n![\"Joomla](\"./resources/images/joomlaInstallerDatabase.png\")
Use whatever settings you'd like in the final installation screen, and after it completes, have Joomla remove the Installation folder for safety.
\nThat's it, you're done and your Joomla setup should run fully on Cloud9!
\n\nEvery time you save a file on Cloud9, a diff of any changes made to it is saved by the server. Over time, you can view these file revisions as content is added and removed from your files. You can also restore a file to any previously saved state; you'll never have to worry about losing your work ever again!
\nTo access file revisions, you can either go to , or type Cmd-B on Mac or Ctrl-B on Linux/Windows. This will pop open the Revisions History panel. Red lines indicate lines that were removed; green lines indicate lines that were either added or changed.
At the bottom of the panel, there's a checkbox for showing all of a file's changes. Files changes that occur relatively soon to one another--say, a few seconds--are grouped by the revisions panel as one "change." If you prefer to see every single change as an individual entry, enable the Show all file changes checkbox.
\nTo restore a file to a previous revision, simply click the revisions button for that entry: ![\"Revisions](\"./resources/icons/revisions_button.png\"){kind=icon}
Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.
\nTo get started with a Koa app, first create a workspace and choose either the Node.js type, or a Custom workspace type for a clean workspace.
\nKoa.Js makes use of the new generator feature in javascript ECMA 6. \nThis feature is support in Node from 0.11 and up by toggling the --harmony flag. \nBy default Cloud9 runs Node v0.10.x or v0.8.x, depending on your setup, so we first need activate Node version 0.11.x.
Open a Terminal, or using the pre-existing one at the bottom and execute the following in your Terminal:
\nnvm use 0.11Next, we need to install Koa itself:
\nnpm install koaNow we can create a simple Koa.Js server.\nCreate a server.js file in your root folder with this code:
\nvar koa = require('koa');\nvar app = koa();\n\napp.use(function *(){\n this.body = '<h1>Hello from Koa.Js</h1>';\n});\n\napp.listen(process.env.PORT);If you now press the Run button on top of the IDE, you will see some errors, as the runner/debugger defaults to 'Node (default)', which is Node version 0.10.x or 0.8.x.
\nLuckily all you need is to create a Runner file so Cloud9 can run Node 11.x in harmony mode and thereby support generators.
\nIn the Run panel below, click the 'Runner' text input and choose 'New Runner'. \nIn the new Runner file that's opened, save the following code as 'Node 0.11.x.run':
\n// This file overrides the built-in Node 0.11.x runner\n// For more information see http://docs.c9.io:8080/#!/api/run-method-run\n{\n \"cmd\": [\n \"bash\",\n \"--login\",\n \"-c\",\n \"nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args\"\n ],\n \"debugger\": \"v8\",\n \"debugport\": 15454,\n \"info\": \"Your code is running at \\\\033[01;34m$url\\\\033[00m.\\n\\\\033[01;31mImportant:\\\\033[00m use \\\\033[01;32mprocess.env.PORT\\\\033[00m as the port and \\\\033[01;32mprocess.env.IP\\\\033[00m as the host in your scripts!\\n\"\n}Let's run server.js with this new configuration; in the Run panel on the bottom, choose your new 'Node 0.11.x' Runner, and press Run again.
\nYou Koa.Js server should now be up and running.
\nNow if you click the Preview button in the top menu in the IDE, and choose "Preview with Web Server", this will open the Preview window for your running app.
\n(Credits go to Tom at http://kyorcode.blogspot.nl/2014/08/running-koajs-in-cloud9.html)
\n\nExpress is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
\nTo get started with an Express app, first create a workspace and choose either the Node.js type, or a Custom workspace type for a clean workspace. Open the new workspace (or an existing one) to follow the instructions below.
\nFirst we'll install the Express project generator and generate an application stub:
\n$ npm install -g express-generator\n$ express -f .\n$ npm installYou might want to take a look at package.json and update the application name from the default workspace to something more fitting.
Now you have a fully configured express application already. You can run it from the terminal using:
\n$ bin/wwwNow if you click the Preview button in the top menu in the IDE, and choose "Preview with Web Server", this will open the Preview window for your running app.
\nIn order to make life easier you can create a run configuration for express.
\nRun -> Run Configurations -> Manage ...Add New ConfigExpress as name, bin/www as the command and Node 0.10.x as the runner.Set As Default. If you do so then clicking the run button will always run the app and not the currently opened file.The finished run configuration should look something like this
\n![\"Express](\"./resources/images/express-run-config.png\")
For Laravel there are some installation guides around which tell you to install PHP first, but that's not necessary with Cloud9.\nJust make a new workspace, choose PHP, go to the Terminal, and execute the following:
\nrm README.md php.ini hello-world.php\ncomposer create-project laravel/laravel ./laravel --prefer-dist\nshopt -s dotglob\nmv laravel/* ./\nrm -rf laravelAs lavarel is serving its content from the public directory we need to modify the apache config:
sudo vi /etc/apache2/sites-enabled/001-cloud9.confThen do the following:
\n// Change this line\nDocumentRoot /home/ubuntu/workspace\n\n// To following\nDocumentRoot /home/ubuntu/workspace/publicRun the project with the "Run Project" button in the menu bar on top of the IDE.\nIf you click the URL that appears in the Run panel below (in the shape of 'https://laravel-c9-username.c9.io/'), you can preview your new Laravel app.
\n![\"Run](\"./resources/images/laravelWorkspaceRunning.png\")
Meteor is an open-source platform for building web apps.
\nCreate a Meteor app as follows:
\nRun the following commands in the Terminal:
\n curl https://install.meteor.com/ | sh\n meteor create ./my_cool_app\n cd my_cool_app/\n meteor --port $IP:$PORTClick the Preview button in the top menu in the IDE, and choose "Preview with Web Server". This will open the Preview window for your running app.
\nSymfony is one of the leading PHP Webframeworks. It is Open-Source and built on top of the Symfony Components.
\nInstall the Intl extension for PHP that is required in most of the Symfony2 projects
\n sudo apt-get install php5-intlSet a valid PHP timezone
\n echo 'date.timezone = UTC' | sudo tee --append /etc/php5/apache2/php.iniStarting MySQL-Server
\n sudo mysql-ctl install\n sudo mysql-ctl startOpen your Terminal and execute the following to create a new Symfony-Project\nYou need the first line only if you used the PHP Project type for your workspace.
\n rm README.md php.ini hello-world.php\n composer create-project symfony/framework-standard-edition symfony/ \"2.5.*\"\n mv symfony/{*,.*} ./ \n rm -rf symfonyThe create-project composer command will ask for a few parameters, the only one you need to pay special attention is the database-host parameter.
\nThere is a IP address checking in the web/app_dev.php file. To disable this check please remove the following lines
\n // This check prevents access to debug front controllers that are deployed by accident to production servers.\n // Feel free to remove this, extend it, or make something more sophisticated.\n if (isset($_SERVER['HTTP_CLIENT_IP'])\n || isset($_SERVER['HTTP_X_FORWARDED_FOR'])\n || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1'))\n ) {\n header('HTTP/1.0 403 Forbidden');\n exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');\n }After that add a new run configuration in Menu Run > Run Configurations > New Run Configuration. Select Apache http (PHP, HTML) as a Runner and web/app_dev.php as Command.\nThat's it after you hit Run your server will start up and you can access your new Symfony project.
On Hosted and SSH workspaces, Cloud9 provides two ways to run your application:
\nFirst, open the file you want to run.
\nNext, click on the Run button in the top menu bar in the IDE.
\n![\"Run](\"./resources/images/runButtonMenuBar.png\")
The Run button acts as a sort of shortcut to the Run panel, which will appear by default in the bottom of the IDE when you run a file.\nThis automatically runs the currently active file, and it will guess which Runner to use based on the extension of the file.
\nWhen you're ready to stop your app, click on the Stop Button button in the menu bar at any time, or from the Run panel below.
\n![\"Run](\"./resources/images/runPanel.png\")
On the Run panel, you'll notice a few more options you can set. \nFilling these textboxes out creates a Run Configuration.
\nFor some default runners like Node.js, it's an option to Run in debug mode, which indicates that you want to run the current code through the debugger. \nThis will reveal (or collapse) the debugging tools panel described in Running and Debugging your code.
\nThe built-in Terminal provides access to all underlying system commands, including your Runners such as Node.js. \nSimply open up a Terminal from the "+" sign, or use CMD+T (Mac) / Control+T (Windows), and then execute the command you need to run your app, e.g. node server.js.
To find out where your application is running you can do two things:
\nFrom the Terminal, run the following command:
\n$ mysql-ctl installThe output will be:
\nMySQL 5.5 database added. Please make note of these credentials:\n\nRoot User: username\nDatabase Name: c9Now you can connect to the database using the ip 127.0.0.1 and the default port 3306.\nYou can also test it using our tool from the Terminal:
\n$ mysql-ctl cli\nWelcome to the MySQL monitor. Commands end with ; or \\g.\nYour MySQL connection id is 24\nServer version: 5.5.37-0ubuntu0.14.04.1 (Ubuntu)\n\nCopyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.\n\nOracle is a registered trademark of Oracle Corporation and/or its\naffiliates. Other names may be trademarks of their respective\nowners.\n\nType 'help;' or '\\h' for help. Type '\\c' to clear the current input statement.\n\nmysql> show databases;\n+--------------------+\n| Database |\n+--------------------+\n| information_schema |\n| c9 |\n| mysql |\n| performance_schema |\n+--------------------+\n4 rows in set (0.15 sec)From the Terminal, run the following command:
\n$ mongod --bind_ip=$IP --nojournalThe output will include:
\n...\nwaiting for connections on port 27017Now you can open the mongo shell in a new Terminal, running following command:
\n$ mongoTo stop the MongoDB instance press Control+C in the Terminal where mongod is running.\nNow have a look at the currently used database:
$ mongo\nmongo> db\ntestAfter you have logged into Cloud9, you are placed into your account's dashboard. From here, you can edit your profile and manage workspaces you have access to.
\n![\"An](\"./resources/images/theDashboard.png\")
In the top-left corner of the dashboard, your username is displayed. Within the user context, you can view your user profile by clicking on Your Account:
\n![\"A](\"./resources/images/userContext.png\")
The user profile contains:
\nThe gravatar that is used for your profile is handled by gravatar.com. If you don't have a gravatar yet, Cloud9 IDE uses an uninspiring default.
\nIn the left panel, you'll find a list of various projects associated with your account. These are:
\nClicking on the ![\"Project](\"./resources/icons/workspacePlusIcon.png\"){kind=icon}
next to MY PROJECTS lets you:
![\"Creating](\"./resources/images/newWorkspace.png\")
For more information on creating new workspaces, see this section of the documentation.
\nYou can always filter your project list by entering text in the text bar to find matching projects. If you need to update the list, click the refresh icon at the bottom of the panel: ![\"Refresh](\"./resources/icons/refreshProjects.png\"){kind=icon}
Cloud9 supports three types of workspaces:
\n"Hosted" is the best choice for most people, so in this short "Getting Started" article we'll only describe this option; for other options please read the full Creating a new workspace article.
\nThe first step for creating a new workspace is click the "CREATE NEW WORKSPACE" button in your Dashboard:
\n
At this point, you'll encounter two choices: Create a new workspace and Clone from URL. \nIn this article we'll only describe the Create a New Workspace option, which allows you to create any of the previously mentioned types of workspaces (hosted, FTP, or SSH).
\nAfter clicking on Create a new workspace, you're taken to the screen below:
\n![\"Options](\"./resources/images/createNewWorkspaceOptions.png\")
First, let's enter a workspace name.\nDepending on whether you have a Free of Premium account, you can choose to make it either Public (open to anyone with the URL), or Private (only accessible to you and people you share it with).
\nAfter this, choose the type of workspace you want to create:
\nsudo powers!Choose the "Hosted" workspace type to start from scratch with a 'Custom' workspace, or simply pick a pre-configured environment like Node.js, WordPress, or Python/Django, and immediately start developing your app.\nThis way you don't need to spend valuable development time on system setup and maintenance, as we maintain it, and you control it.
\n![\"Options](\"./resources/images/createHostedWorkspace.png\")
As it's powered by a full Linux Ubuntu environment, hosted workspaces allow you to install any package (sudo apt-get install package), run git commands from the console to push your changes to a GitHub repo or a Bitbucket git repo, etcetera.
Now press Create. That's it! You can now see your new workspace in the dashboard:
\n![\"New](\"./resources/images/createdWorkspace.png\")
Now, just click Start Editing to get started!
\nNext up, read how to run an application and set up a database.
\n\nCloud9 IDE can be thought of as being divided into the following components:
\n![\"IDE](\"./resources/images/editorNaming.png\")
Throughout the documentation, we'll refer to these sections by name. We can identify several distinct areas in the editor:
\nls or mkdir). It also displays output provided by your program's print statements (like console.log()), as well as providing an area for search resultsThe Project Bar, Tool Bar, and Console are powerful features, so their documentation is provided separately. We'll talk about the rest of the editor below:
\nRemember: nearly every UI element can be collapsed, in order to provided a more harmonious coding experience. For example, clicking on the buttons in the upper left of the editor allows you to hide the panels and top menu bar:![\"Hiding](\"./resources/anims/collapsingbars.gif\")
![\"A](\"./resources/images/topMenuBar.png\")
In this section, you can find the usual menus for creating and saving files, changing your view, applying a new theme for the editor, and switching between windows.
\nIn the middle of the menu bar you'll find the debug button: ![\"The](\"./resources/icons/debugButton.png\"){kind=icon}
. This is used for running and debugging your code. For more information, see the section on "Running and Debugging Your Code"..
The preview button ![\"The](\"./resources/icons/previewButton.png\"){kind=icon}
provides you with a look of what the currently active file would look like in the browser. For text files, this is usually just the raw text, but certain files, like HTML or XML, render as the actual markup.
The autosave button indicates the status of your current saves: ![\"Autosave](\"./resources/icons/autosaveButton.png\"){kind=icon}
. Files are saved automatically by Cloud9 IDE, and every revision is made available for you to browse through. For more information, see the section on revisions and saving.
On the far right of the menu, near the Cloud9 IDE logo, there are two more icons: one to return to the dashboard, and one to return to the Cloud9 IDE homepage.
\nThis is where most of the action happens. Every file you open appears here as a tab. You can open a new file easily by clicking on the ![\"Tab](\"./resources/icons/tabPlusIcon.png\"){kind=icon}
button to the right of the last tab. Cloud9 IDE offers syntax highlighting for over two dozen programming languages.
The code editor supports a large number of keyboard shortcuts to increase your productivity. For an up-to-date list of these within the IDE, simply go to .
\nIf you hover over to the upper-right corner, you can activate zen-mode, which is a full screen coding environment.
\nAt the lower-right corner, you can find the status bar.
\n\nAs you develop your application, often you just want to quickly demo your work-in-progress to a colleague, customer, or friend. \nOr you want to pull in a fellow dev to debug an issue, or to pair program.
\nCloud9 enables you to do just these things, easily: share your entire development environment, the running application, or just a preview of your running application. \nHere we describe how to access these options, and how to use each.
\nThe best place to start sharing is from the dedicated "Share" dialog. \nAccess it via the "Share" button on the right top of the IDE, or via the menu in Window > Share...
\n![\"Share](\"./resources/images/shareButtons.png\")
Here's what you see when you pull up the Share dialog:
\n![\"Share](\"./resources/images/shareWorkspaceDialog.png\")
Links to share
\nIf you enable the "Public" checkbox for an option, it will make the URL accessible for anyone with the URL.\nFor public workspaces all these URLs are public by default, but for private workspaces you have to enable them manually.
\nWho has access
\nThis section refers to people you have specifically granted access to your entire development environment.\n(R) gives Read access only to that person: the ability to open and view files, and to run your code.\n(RW) or "Read/Write" also gives that person the ability to write to files.
\nInvite people
\nThis section enables you to invite people to your workspace and immediately set if they have just "Read" or "Read+Write" rights. \nYou can invite people by their email address or Cloud9 username. \nYou can also choose whether or not send an automatic email to that person that they've been invited to your workspace.
\nCloud9's Collaboration features allow you to share your entire development environment so you can work on code together, much like working on a document in Google Docs.\nYou'll actually be able to see each other's cursor as you type, run your app, share the Terminal(s), and talk in the group chat.\nSee the screenshot below for what this looks like:
\n![\"Collaboration](\"./resources/images/collab.png\")
In order to share your entire development environment, do one of the following:
\nIf someone asks for either Read or Read+Write access to your workspace, you can accept or deny them from the Collaboration panel on the right.
\nIf you Run your application the result can be shared by copying the URL from the dialog. \nThis URL can only be viewed if it's made Public by checking the "Public" checkbox next to the "Application" in the "Links to share" section.
\nPeople who have full read access to your workspace (as defined in the "Who has access") can view this URL whether it's public or not.
\nIf you Preview a file in your application, it can be shared by copying the URL from the dialog. \nThis URL can only be viewed if it's made Public by checking the "Public" checkbox next to the "Preview" in the "Links to share" section.
\nPeople who have full read access to your workspace (as defined in the "Who has access") can view this URL whether it's public or not.
\nThe Console is at the bottom of the IDE. It's where you can enter command line input, view output from your program, and push and pull your files between your code repositories.
\nThe terminal can perform all Unix commands, and allows for path autocompletion by hitting Tab.
\nFor instance, you can use mercurial commands (hg) and git commands (git) to communicate with the system, and to push your code between repositories. Typing hg or git shows the complete list of commands that are available for these services. For more information about these commands, please check their respective documentation:
To use mercurial commands on the project you are working on, you must have a mercurial project set up; the same holds true for git. Follow these links to learn more about how to set up these project in Cloud9:
\n\nThe output tab in the Console shows information whenever a user is running or debugging a program. The content is similar to the output of a desktop terminal:![\"Screenshot](\"./resources/images/consoleOutput.png\")
The output tab also displays the error and additional information that can improve your coding quality. You can use the Console to output results from your running application, just like a regular terminal.
\nAs your process runs, you'll see a message similar to this one indicating that Cloud9 is running something in the background: ![\"Running](\"./resources/images/runningProcess.png\")
If you hover over this message, you can opt to cancel the process by clicking on the button: ![\"Cancelling](\"./resources/images/cancellingProcess.png\")
AngularJS lets you write client-side web \napplications as if you had a smarter browser.
\nFollow these steps to create an AngularJS application using the official project\ntemplate:
\nrm -rf * .c9\ngit clone https://github.com/angular/angular-seed.git .\nnpm install\nmv package.json package.json.bak\njq '.scripts.start=\"http-server -a $IP -p $PORT\"' package.json.bak > package.jsonRun Project button in the top menu of the IDERun Project to get started. This doesn't\nlimit the choice of the backend technology you might want to use.Nearly every action in Cloud9 has a corresponding command associated with it. On top of that, every command also has a keybinding that can be used to effortlessly execute the command.
\nBelow is a list of every single command and keybinding used by Cloud9. Have fun being efficient!
\n| Command Name | \nKeybinding | \n
|---|---|
Abortclicommand | \n ˄-C | \n
AddCursorAbove | \n ˄-⌥-Up | \n
AddCursorAboveSkipCurrent | \n ˄-⌥-⇧-Up | \n
AddCursorBelow | \n ˄-⌥-Down | \n
AddCursorBelowSkipCurrent | \n ˄-⌥-⇧-Down | \n
Backspace | \n ˄-⌫ | \n
Beautify | \n ⌘-⇧-B | \n
Clearcut | \n ⎋ | \n
Closeallbutme | \n ⌥-˄-W | \n
Closealltabs | \n ⌥-⇧-W | \n
Closetab | \n ⌥-W | \n
Complete | \n ˄-Space | \n
Copy | \n ⌘-C | \n
Copylinesdown | \n ⌘-⌥-Down | \n
Copylinesup | \n ⌘-⌥-Up | \n
Cut | \n ⌘-X | \n
Del | \n Delete | \n
DuplicateSelection | \n ⌘-⇧-D | \n
Escapeconsole | \n ⎋ | \n
EvalInteractive | \n ⌘-Return | \n
Find | \n ⌘-F | \n
Findnext | \n ⌘-G | \n
Findprevious | \n ⌘-⇧-G | \n
Fold | \n ⌘-⌥-L | \n
Foldall | \n ⌘-⌥-0 | \n
Golinedown | \n Down | \n
Golineup | \n Up | \n
Gotoend | \n ⌘-End | \n
Gotofile | \n ⌘-E | \n
Gotoleft | \n Left | \n
Gotoline | \n ⌘-L | \n
Gotolineend | \n ⌘-Right | \n
Gotolinestart | \n ⌘-Left | \n
Gotopagedown | \n PageDown | \n
Gotoright | \n Right | \n
Gotostart | \n ⌘-Home | \n
Gototableft | \n ⌘-[ | \n
Gototabright | \n ⌘-] | \n
Gotowordleft | \n ⌥-Left | \n
Gotowordright | \n ⌥-Right | \n
Indent | \n Tab | \n
Jumptomatching | \n ˄-⇧-P | \n
Largerfont | \n ˄-⇧-. | \n
Movelinesdown | \n ⌥-Down | \n
Movelinesup | \n ⌥-Up | \n
Movetableft | \n ⌘-⌥-[ | \n
Movetabright | \n ⌘-⌥-] | \n
Newfile | \n ⌥-⇧-N | \n
Newfiletemplate | \n ⌥-˄-N | \n
Newfolder | \n ⌥-˄-⇧-N | \n
Nexttab | \n ⌥-Tab | \n
Openfilepanel | \n ⇧-⌘-U | \n
Opensettingspanel | \n ⌘-, | \n
Opentreepanel | \n ⌘-U | \n
Outdent | \n ⇧-Tab | \n
Outline | \n ⌘-⇧-E | \n
Paste | \n ⌘-V | \n
Previoustab | \n ⌥-⇧-Tab | \n
Quicksave | \n ⌘-S | \n
Quickwatch | \n ⌥-Q | \n
Redo | \n ⌘-⇧-Z | \n
Removeline | \n ⌘-D | \n
Removetolineend | \n ˄-K | \n
Removetolinestart | \n ⌘-⌫ | \n
Removewordleft | \n ⌥-⌫ | \n
Removewordright | \n ⌥-Delete | \n
RenameVar | \n ⌥-⌘-R | \n
Replace | \n ⌥-⌘-F | \n
Replaymacro | \n ⌘-˄-R | \n
Resume | \n F8 | \n
Revealtab | \n ⇧-⌘-L | \n
Reverttosaved | \n ˄-⇧-Q | \n
Revisionpanel | \n ⌘-B | \n
Run | \n F5 | \n
Saveas | \n ⌘-⇧-S | \n
Savetabsession | \n ⇧-˄-S | \n
Searchinfiles | \n ⇧-⌘-F | \n
SelectMoreAfter | \n ˄-⌥-Right | \n
SelectMoreBefore | \n ˄-⌥-Left | \n
SelectNextAfter | \n ˄-⌥-⇧-Right | \n
SelectNextBefore | \n ˄-⌥-⇧-Left | \n
Selectall | \n ⌘-A | \n
Selectdown | \n ⇧-Down | \n
Selectleft | \n ⇧-Left | \n
Selectright | \n ⇧-Right | \n
Selecttoend | \n ⌘-⇧-Down | \n
Selecttolineend | \n ⌘-⇧-Right | \n
Selecttolinestart | \n ⌘-⇧-Left | \n
Selecttostart | \n ⌘-⇧-Up | \n
Selectup | \n ⇧-Up | \n
Selectwordleft | \n ⌥-⇧-Left | \n
Selectwordright | \n ⌥-⇧-Right | \n
Smallerfont | \n ˄-⇧-, | \n
SplitIntoLines | \n ˄-⇧-L | \n
Stepinto | \n F11 | \n
Stepout | \n ⇧-F11 | \n
Stepover | \n F10 | \n
Stop | \n ⇧-F5 | \n
Switchconsole | \n ⇧-⎋ | \n
Tab0 | \n ⌘-0 | \n
Tab1 | \n ⌘-1 | \n
Tab2 | \n ⌘-2 | \n
Tab3 | \n ⌘-3 | \n
Tab4 | \n ⌘-4 | \n
Tab5 | \n ⌘-5 | \n
Tab6 | \n ⌘-6 | \n
Tab7 | \n ⌘-7 | \n
Tab8 | \n ⌘-8 | \n
Tab9 | \n ⌘-9 | \n
ToggleTabs | \n ˄-M | \n
Togglecomment | \n ⌘-/ | \n
Toggleconsole | \n ˄-⎋ | \n
Togglerecording | \n ⌘-⇧-R | \n
Tolowercase | \n ˄-⇧-U | \n
Touppercase | \n ˄-U | \n
Transposeletters | \n ˄-T | \n
Undo | \n ⌘-Z | \n
Unfold | \n ⌘-⌥-⇧-L | \n
Unfoldall | \n ⌘-⌥-⇧-0 | \n
Zen | \n ⌥-Z | \n
Zenslow | \n ⇧-⌥-Z | \n
| Command Name | \nKeybinding | \n
|---|---|
Abortclicommand | \n Ctrl-C | \n
AddCursorAbove | \n Ctrl-Alt-Up | \n
AddCursorAboveSkipCurrent | \n Ctrl-Alt-Shift-Up | \n
AddCursorBelow | \n Ctrl-Alt-Down | \n
AddCursorBelowSkipCurrent | \n Ctrl-Alt-Shift-Down | \n
Backspace | \n Command-Backspace | \n
Beautify | \n Shift-Ctrl-B | \n
Clearcut | \n ESC | \n
Closeallbutme | \n Ctrl-Alt-W | \n
Closealltabs | \n Ctrl-Shift-W | \n
Closetab | \n Ctrl-W | \n
Complete | \n Ctrl-Space | \n
Copy | \n Ctrl-C | \n
Copylinesdown | \n Alt-Shift-Down | \n
Copylinesup | \n Alt-Shift-Up | \n
Cut | \n Ctrl-X | \n
Del | \n Delete | \n
DuplicateSelection | \n Ctrl-Shift-D | \n
Escapeconsole | \n Esc | \n
EvalInteractive | \n Ctrl-Return | \n
Find | \n Ctrl-F | \n
Findnext | \n Ctrl-K | \n
Findprevious | \n Ctrl-Shift-K | \n
Fold | \n Alt-L | \n
Foldall | \n Alt-0 | \n
Golinedown | \n Down | \n
Golineup | \n Up | \n
Gotoend | \n Ctrl-End | \n
Gotofile | \n Ctrl-E | \n
Gotoleft | \n Left | \n
Gotoline | \n Ctrl-G | \n
Gotolineend | \n Alt-Right | \n
Gotolinestart | \n Alt-Left | \n
Gotopagedown | \n PageDown | \n
Gotoright | \n Right | \n
Gotostart | \n Ctrl-Home | \n
Gototableft | \n Ctrl-[ | \n
Gototabright | \n Ctrl-] | \n
Gotowordleft | \n Ctrl-Left | \n
Gotowordright | \n Ctrl-Right | \n
Indent | \n Tab | \n
Jumptomatching | \n Ctrl-P | \n
Largerfont | \n Ctrl-Shift-. | \n
Movelinesdown | \n Alt-Down | \n
Movelinesup | \n Alt-Up | \n
Movetableft | \n Ctrl-Alt[ | \n
Movetabright | \n Ctrl-Alt-] | \n
Newfile | \n Ctrl-N | \n
Newfiletemplate | \n Ctrl-Alt-N | \n
Newfolder | \n Ctrl-N | \n
Nexttab | \n Ctrl-Tab | \n
Openfilepanel | \n Shift-Ctrl-U | \n
Opensettingspanel | \n Ctrl-, | \n
Opentreepanel | \n Ctrl-U | \n
Outdent | \n Shift-Tab | \n
Outline | \n Ctrl-Shift-E | \n
Paste | \n Ctrl-V | \n
Previoustab | \n Ctrl-Shift-Tab | \n
Quicksave | \n Ctrl-S | \n
Quickwatch | \n Alt-Q | \n
Redo | \n Ctrl-Shift-Z | \n
Removeline | \n Ctrl-D | \n
Removetolineend | \n Alt-Delete | \n
Removetolinestart | \n Alt-Backspace | \n
Removewordleft | \n Ctrl-Backspace | \n
Removewordright | \n Ctrl-Delete | \n
RenameVar | \n Ctrl-Alt-R | \n
Replace | \n Alt-Shift-F | \n
Replaymacro | \n Alt-R | \n
Resume | \n F8 | \n
Revealtab | \n Ctrl-Shift-L | \n
Reverttosaved | \n Ctrl-Shift-Q | \n
Revisionpanel | \n Ctrl-B | \n
Run | \n F5 | \n
Saveas | \n Ctrl-Shift-S | \n
Savetabsession | \n Shift-Ctrl-S | \n
Searchinfiles | \n Ctrl-Shift-F | \n
SelectMoreAfter | \n Ctrl-Alt-Right | \n
SelectMoreBefore | \n Ctrl-Alt-Left | \n
SelectNextAfter | \n Ctrl-Alt-Shift-Right | \n
SelectNextBefore | \n Ctrl-Alt-Shift-Left | \n
Selectall | \n Ctrl-A | \n
Selectdown | \n Shift-Down | \n
Selectleft | \n Shift-Left | \n
Selectright | \n Shift-Right | \n
Selecttoend | \n Ctrl-Shift-End | \n
Selecttolineend | \n Alt-Shift-Right | \n
Selecttolinestart | \n Alt-Shift-Left | \n
Selecttostart | \n Ctrl-Shift-Home | \n
Selectup | \n Shift-Up | \n
Selectwordleft | \n Ctrl-Shift-Left | \n
Selectwordright | \n Ctrl-Shift-Right | \n
Smallerfont | \n Ctrl-Shift-, | \n
SplitIntoLines | \n Ctrl-Shift-L | \n
Stepinto | \n F11 | \n
Stepout | \n Shift-F11 | \n
Stepover | \n F10 | \n
Stop | \n Shift-F5 | \n
Switchconsole | \n Shift-Esc | \n
Tab0 | \n Ctrl-0 | \n
Tab1 | \n Ctrl-1 | \n
Tab2 | \n Ctrl-2 | \n
Tab3 | \n Ctrl-3 | \n
Tab4 | \n Ctrl-4 | \n
Tab5 | \n Ctrl-5 | \n
Tab6 | \n Ctrl-6 | \n
Tab7 | \n Ctrl-7 | \n
Tab8 | \n Ctrl-8 | \n
Tab9 | \n Ctrl-9 | \n
ToggleTabs | \n Ctrl-M | \n
Togglecomment | \n Ctrl-/ | \n
Toggleconsole | \n F6 | \n
Togglerecording | \n Alt-Shift-R | \n
Tolowercase | \n Ctrl-Shift-U | \n
Touppercase | \n Ctrl-U | \n
Transposeletters | \n Ctrl-T | \n
Undo | \n Ctrl-Z | \n
Unfold | \n Alt-Shift-L | \n
Unfoldall | \n Alt-Shift-0 | \n
Zen | \n Alt-Z | \n
Zenslow | \n Shift-Alt-Z | \n
The editor is the most important element of any IDE; that's why Cloud9 developed ACE. ACE is a high-performance code editor for the web that supports over 40 different languages, over two dozen themes, and can still work faithfully on large documents (at last count, four million lines of code was the upper limit). It also contains a bevy of features you'd expect from traditional desktop editors. Among these include:
\nThere are many different ways to configure the IDE. Below is a list of the options available, and what they do.
\nThis section controls the overall IDE behavior:
\n| Preference Name | \nDescription | \n
|---|---|
| Enable UI Animations | \nEnables or disables fluid animations for various UI elements, such as the Project Bar | \n
| Animate Scrolling | \nEnables or disables fluid animations when scrolling through code (such as for goto line) | \n
| Enable Auto-Save | \nIf enabled, automatically saves your files on every change | \n
| On Save, Strip Whitespace | \nWhen saving a file, you can remove all extraneous whitespace from your code lines | \n
| Reveal Active File in Project Tree | \nEnabling this jumps the project tree to the active file whenever a tab changes to a different file | \n
| Warn Before Exiting | \nPrevents accidental data loss by showing a dialog asking if you really want to leave Cloud9 IDE when closing your browser | \n
| Node.js Runtime | \nDefines the default runtime for your Node.js code. "Auto" is based on whatever is in the package.json file, while "Default" reverts to Node 0.6.x. | \n
| Keybindings | \nAllows you to choose which operating system to use for keyboard shortcuts | \n
This section controls language analysis options:
\n| Preference Name | \nDescription | \n
|---|---|
| Enable Hints and Warnings Rules | \nPresents information about your code in the gutter | \n
| Highlight Variable Instances | \nHighlights variable instances in your code | \n
| Mark Undeclared Variables | \nProvides warnings if a variable is being used and has not been declared yet | \n
| Mark Unused Function Arguments | \nProvides a strikethrough for arguments in a function that are not being used | \n
| Warning Level | \nSpecifies the minimum level of information severity you want provided in the gutter | \n
This section controls language analysis options:
\n| Preference Name | \nDescription | \n
|---|---|
| Auto-pair Quotes, Brackets, etc. | \nWhen enabled, typing ", (, or [ will actually make two characters appear. In addition, whenever you highlight a word and type one of these characters, it is surrounded by that character (e.g. words becomes "words") | \n
| Full Line Selection | \nWhen highlighting lines, this option will highlight all ending whitespace, until the end of the editor window | \n
| Highlight Active Line | \nPresents a darker shade in the code editor to indicate which line you're currently on | \n
| Highlight Gutter Line | \nPresents a darker shade in the gutter which line you're currently on | \n
| Show Invisible Characters | \nShows invisibles characters in the editor, like tabs and line breaks | \n
| Show Indent Guides | \nShows the indent guides in the editor, letting you see your code's nestings | \n
| Show Gutter | \nShows the gutter in the editor, which indicates line numbers, warnings, and errors | \n
| Highlight Selected Word | \nIf you highlight a word, this highlights all matching words in the editor | \n
| Auto-hide Horizontal Scroll | \nWhen this is enabled, this will hide the horizontal scroll bar in the editor. Note that this has no effect in Mac OS X 10.7 (Lion) and above, since all scrollbars, by default, auto-hide. | \n
| Vim Mode | \nWhen enabled, allows you to use vim keybindings in the IDE | \n
| Code Folding | \nWhen enabled, allows you to show or hide "blocks" of code | \n
| Fade Fold Widgets | \nWhen enabled, fades the folding widgets in the gutter | \n
| Font Size | \nChanges the font size of the code in the editor | \n
| Show Print Margin | \nShows (and defines) the number of characters possible in line, before it wraps | \n
| Soft Tabs | \nIndicates how many spaces a single tab represents | \n
| Mouse Scroll Speed | \nDefines the speed of the mouse scrolls | \n
| Newline Mode | \nSpecifies the newline mode for the IDE | \n
This section controls the behavior for the terminal:
\n| Preference Name | \nDescription | \n
|---|---|
| Scrollback | \nSets the scrollback buffer for the terminal | \n
| Font Family | \nSets the font for the terminal | \n
| Font Size | \nSets the font size for the terminal | \n
| Blinking Cursor | \nSpecifies whether or not you want the cursor to blink | \n
This section controls the various tools that are available in the IDE:
\n| Preference Name | \nDescription | \n
|---|---|
| Enable Color Picker | \nMakes the color picker available for use | \n
| Preserve Empty Lines | \nWhen enabled, the editor keeps any new lines without text | \n
| Keep Array Indention | \nWhen enabled, tabs and newlines in arrays are preserved. For example, the follow array would remain as-is with this option:\n \n var o = [{\n a: b\n }, {\n c: d\n }];\n \n | \n
| JSLint Strict Whitespace | \nIf selected, all brackets are preceded by a space. For example, if(x){ becomes if (x) {, and function(arg){ becomes function (arg) { | \n
| Braces | \nThese options control how braces are handled in the IDE:\n
| \n\n
The terminal provides you with a TTY interface for direct access to the machine that Cloud9 is running on. If you're running your own workspace, this is the server you've SSH'ed into. If you're using the hosted Cloud9 platform, this is the server your code runs on.
\nsudo, are restricted, you can completely destroy your workspace, by doing something like rm -rf. Use your power wisely!\n\nTo create a new terminal, go to , or simply type Alt-T on the keyboard. The terminal has the following capabilities:
\n![\"Screenshot](\"./resources/images/terminal.png\")
Jekyll is a great static site generator, also used by github pages. You simply need to install the Ruby gem and then make sure you pass the right port to the serve command.
$ gem install jekyll\n$ jekyll new my-awesome-site\n$ cd my-awesome-site\n$ jekyll serve --port $PORTCloud9 IDE offers many different ways to get your code from your editor to your \\nproduction server. To deploy your code, click on the Deploy button in the \\nProject Bar:
\\n![\\\"The](\\\"./resources/images/deployButton.png\\\")
We offer tight integration with the following environments:
\\nFollowing these links will provide you with more information on code deployment.\\nYou can deploy your code to as many services and servers as you like. Keep in \\nmind that you'll already need an account at those hosting providers before you \\ncan deploy your app to them!
\\nIf you're comfortable with the command line, you can also deploy to several more\\nenvironments, such as:
\\n\\nThis section will show you how to deploy your applications to Heroku, a cloud-based application platform. The integration with Cloud9 IDE makes your development process even more agile. If you don't have a Heroku account, visit their website to create one for free.
\\nTo get started, create a simple Node.js application. If you don't have one yet, you can follow our tutorial on developing one.
\\nAfter you click on the Deploy button in the Project Bar, click the plus sign next to Deploy to add another deploy target. Choose Heroku as an option. After you have signed into your Heroku account, you can create a new deploy target or choose an existing one from your account:
\\n![\\\"Showing](\\\"./resources/images/herokuDeploy.png\\\")
Next, press Deploy to continue the process; the following window might appear:
\\n![\\\"Dialog](\\\"./resources/images/missingPackageJSON.png\\\")
Heroku Node.js apps are required to have a package.json file, much like with NPM. Cloud9 can generate a package.json file for you, containing metadata to share Heroku. The following lines represent what that file might looks like:
\\n{\\n \\\"name\\\": \\\"cloud9-heroku-example\\\",\\n \\\"version\\\": \\\"0.0.1\\\"\\n}After you have a package.json file, you might see this dialog:
\\n![\\\"Dialog](\\\"./resources/images/missingProcFile.png\\\")
Sometimes, a Heroku app also requires a Procfile. The Procfile is needed to start the application in Heroku. You can just create a new file, add the line below, and save it as 'Procfile'. Don't add any file extensions.
\\nweb: node web.jsTry the deploy button again. The console will directly output the following when the deployment is completed:
\\n![\\\"Console](\\\"./resources/images/herokuConsoleOutput.png\\\")
And just like that, you've deployed your project to Heroku.
\\n\\nThis article will show you how to deploy your applications to Windows Azure. If you don't have an account yet, the Windows Azure process will help you create one. Keep in mind that Windows Azure is not free, though it does come with a free trial. Windows Azure projects can be deployed from any operating system.
\\nTo get started, create a simple Node.js application. If you don't have one yet, you can follow our tutorial on developing one.
\\nAfter you click on the Deploy button in the Project Bar, click the plus sign next to Deploy to add another deploy target. Choose Windows Azure as an option. You'll be prompted with this dialog:![\\\"Windows](\\\"./resources/images/windowsAzureDialog.png\\\")
You must click on the Download Windows Azure Settings button before you can continue. If you don't have a Windows Azure account, here is where you can create one. If you do have an account, your browser will automatically download the required file.
\\nWhen that's finished, simply select the downloaded file from your computer, and upload it to Cloud9. You'll only have to do this process once. If you ever need to upload a new certificate, be sure to click Clear cert in the lower-right corner of this dialog.
\\nAfter the file has uploaded, click on Create new to create a new hosted service. A hosted service is the container in which your application is hosted when it is deployed to Windows Azure. For more information, see Overview of Creating a Hosted Service for Windows Azure.
\\nYou can set a few configuration options such as the number of instances to use, its host OS, and where the data center is located. Selecting "Enable RDP" and providing a username and password enables remote desktop for your deployment.
\\nYour new Windows Azure server will appear in the Deploy list:![\\\"Windows](\\\"./resources/images/windowsAzureInfo.png\\\")
Go ahead and click on DEPLOY. If this is the first time you're trying to deploy this project to Windows Azure, you'll receive three prompts:
\\nA dialog will inform you of a missing web.config file. If you click Yes, Cloud9 will create a file called Web.cloud.config in your project. This file contains configuration information about your app.
\\nYou'll be told about a missing csdef file. If you click Yes, Cloud9 will create a file called ServiceDefinition.csdef in your project. ServiceDefinition.csdef is a Windows Azure-specific files necessary for publishing your application For more information, see Overview of Creating a Hosted Service for Windows Azure.
\\nYou'll be asked to select the instance size for this application. For this tutorial, just select Small, and then click Create. For more details about Windows Azure VM sizes, see How to Configure Virtual Machine Sizes.
\\nYour app will now deploy to a Windows Azure server! You can follow its progress in the Deploy panel, or by watching the messages in the console:\\n![\\\"Windows](\\\"./resources/images/windowsAzureStagingOutput.png\\\")
For more information on configuring your app on the Windows Azure website, see Deploying a Windows Azure App from Cloud9.
\\n\\nIn the new version of Cloud9 we don't have support for deployment from the UI yet, but we're going to add those features soon.
\\nUntil then, you can manually install various command-line tools into your workspace and deploy using the command line. \\nIt should go without saying that this is for super 31337 developers that aren't afraid of the command line.
\\nBelow is a list of some of the services we have tested and support deploying to. \\nAll the commands need to be executed in the terminal unless stated otherwise.
\\nHeroku's toolbelt is installed by default in new VMs.
Now, you can use the heroku command for your projects, as described in the \\nHeroku documentation.
If deploying to Heroku, you should probably be using a local instance of PostgresQL, or you may run into problems caused by different database interpretations of SQL.
\\nIn the Console or a Terminal, type the \\nfollowing:
\\nnpm install azureNow, you can use the azure command from the Console/Terminal. For more \\ninformation, read the official azure documentation.
To deploy to Azure sites from the command line, open the Terminal and type:
\\ncd ~/lib/azure-sites\\nnpm installThen, add the bin to your workspace's path:
\\nPATH=$PATH:$HOME/lib/azure-sites/binNow, you can use the azure command in the terminal.
For free and premium plans, follow the instructions on the \\nazure-cmdlet-node repository. This \\nproject is maintained by Cloud9.
\\nFirst, setup Push to Deploy: Create a new App Engine application at \\ncloud.google.com/console, and then enable \\nPush-to-Deploy under 'App Engine' in the Application Settings page. Leave this \\ntab open to note the URL for your repo.
\\nSecondly, configure Cloud9. Run the following commands (making sure to replace \\nyour email address, auth-token, and repo-url):
\\necho \\\"machine code.google.com login EMAIL password PASSWORD\\\" >> ~/.netrc\\ngit remote add appengine REPOFinally, do a commit, and a push:
git commit -a -m \\\"First commit\\\"\\ngit push appengine master# Install rhc:\\ngem install rhc\\nrhc setup\\n\\n# After this you can use rhc to manage your account:\\n\\n# list apps:\\nrhc apps\\n# To show what you can do with apps do:\\nrhc app help\\n# You deploy via a git push\\ngit push <giturl> masterTo deploy to CloudFoundry from the command line in the Console \\nor a Terminal, type:
\\ncd ~\\nwget https://github.com/cloudfoundry/vmc/zipball/master\\nmv master cloudfoundry\\nunzip cloudfoundry\\ncd cloudfoundry-vmc-nnnn\\nbundleIn the the Console or a Terminal, type:
\\nnpm install jitsu@0.7.x -g\\nmkdir node_modules\\nmv ../lib/node_modules/jitsu node_modulesNow, you can run jitsu from the command line. For more information, see \\nthe official jitsu documentation.
npm install jitsu@0.7.x -gYou can now run jitsu from both the Console and the Terminal.
In the the Console or a Terminal, type:
\\nnpm install modulus -gNow, you can run modulus from the command line. For more information, see \\nthe official modulus documentation.
Yes, Cloud9 supports FTP workspaces that allow you to edit your files directly on your FTP server. \\nCurrently FTP workspaces still open in the old version of Cloud9, but soon we'll also support FTP workspaces with the new version of Cloud9.
\\nOne thing that was removed for reliability reasons in the new version of Cloud9, is the ability to deploy over FTP from a regular workspace.\\nWe're bringing back those features in a new format and with much higher reliability in the coming months.
\\nSee Deploying via CLI.
\\nNo, this is not supported by our hosting platform. It does currently allow access to the GMail servers though, so you can use that service during development.
\\nYou can inspect your current quota usage with the df command in the Terminal:
\\n$ dfTo find which files and directories are consuming a lot of space, go to a directory such as your home directory, and run this command:
\\n$ du -m -d 1 -a | sort -nThis should give you a list of all members of that directory and how much space they use in megabytes.
\\nAlternatively, try du-c9 for seeing all files you added to your workspace and account for the quota.
You can sign into Cloud9 with your github or bitbucket account and set that up to use two-factor authentication.\\nWe don't currently provide an option to directly setup your Cloud9 account for two-factor authentication.
\\nTry using port 8080 instead, which often solves this case.
\\nApplications won't start if another application is already listening to the same port. In order to fix it you first need to find out which process that is:
\\n$ netstat -nlp | grep $PORTThis will report the process id (PID) which you can then kill using
\\n$ sudo kill -9 <PID>Often apache is still running in the background. In that case you can kill it using
\\n$ sudo pkill apache2Either drag a local file directly from your desktop into the Cloud9 file tree,\\nor use the "File > Upload Local Files" menu item.
\\nUse "File > Download project". Currently, this will give you a .tar.gz file, which\\nensures maximum portability. To open these files, you can use something like\\nWinRAR or 7-zip.
\\nSometime you might want others to open a file or directory in the browser \\nwithout opening up the whole workspace. This can be done by starting a small \\nhttp server in that directory and make sure that the running application is public.
\\nTo make the running application public you have to click the "sharing" button at\\nthe top right and the check "public" for application.
\\nTo run the server open a terminal and do
\\n$ cd /dir/i/want/to/share\\n$ python3 -m http.server 8080We recently discovered our web host is blocking connections to some Digital Ocean IP addresses because they suspect they are being used by Iranian users. They are legally forced to block them.
\\nDigital Ocean maintains a whitelist of droplet IP addresses which should not be blocked and our web host follows this list.
\\nPlease raise a support ticket with Digital Ocean mentioning that you would like to have your droplet IP added to the whitelist. After this is complete you will be able to create your SSH workspace within 24 - 48 hours.
\\nTry executing the following command:
\\nyum install ncurses-devel or
\\nyum install glibc-static By default the logs are in ~/lib/apache2/log
\\nNo, this is currently not supported; see FAQ: General about SMTP access.
\\n\\nPlease use sudo easy_install instead.
The color picker is an awesome feature in Cloud9 IDE, designed to not only make color selections easier, but also, more harmonious. At its core, the color picker is a way to represent words (red, blue, e.t.c.), RGBA values (rgba(175, 3, 124, .6)), or hex values (#f00f00) into actual colors.
To enable the color picker, flip the preferences on in the Settings panel. You can use the color picker in CSS, SVG, HTML, or APF Skin files. All you have to do is hover over the value of a color definition, and it'll instantly highlight, like this: ![\\\"Color](\\\"./resources/images/colorPickerHighlight.png\\\")
When the represented color is highlighted, click on it. You'll get a color square defining all the possible color arrangements. To select a color, you can click in the square, pick your own RGB or HSB values, or enter some hex code. Best of all, at the bottom of the window, you'll find a list of other colors found within the same document--just in case you want to achieve matching shades:![\\\"Color](\\\"./resources/images/colorPickerWheel.png\\\")
To set the value, just click anywhere outside of the color picker.
\\n\\nFor JavaScript files, Cloud9 provides analysis using a combination of our own analysis tools, as well as JSHint (specifically for Javascript code). Our language analysis can't detect if your program is correct, fast, or has memory leaks, but it can save you time by spotting things like undeclared variables, syntax errors, or other preventable typos.
\\nWhen Cloud9 detects an issue with your code, an icon appears in the gutter for the offending lines of code. There are three types of identifiers available for your code:
\\n![\\\"Little](\\\"./resources/icons/info_icon.gif\\\"){kind=icon}
): these are non-critical, non-dangerous updates about your code![\\\"Warning](\\\"./resources/icons/warning_icon.gif\\\"){kind=icon}
): these are potentially incorrect pieces of code![\\\"Error](\\\"./resources/icons/error_icon.gif\\\"){kind=icon}
): these are incorrect lines of code that will almost certainly throw a runtime error when you try to run your scriptIf you hover over any of these icons in the gutter, you'll get a pop-up that presents some information as to what, exactly, the problem is. For example, suppose we have a variable declared, called fs, that is never used:![\\\"fs](\\\"./resources/images/unused_var_sample.png\\\")
Notice also that fs has a strikethrough, to provide further visual clues that something is not quite right.
If you're concerned with the level of information that's listed in the gutter, you can always configure its "strictness" in the IDE preferences. For example, you could choose to hide every icon that isn't a warning or an error.
\\nJSHint provides additional configuration options that Cloud9 incorporates on a per-file basis. Typically, you declare these options as comments at the very top of a file, like this:
\\n/*jshint curly:true, debug:true */For a full list of the JSHint configutation options, please check the documentation page describing them.
\\n\\nFor Javascript programs, Cloud9 IDE provides intelligent and responsive autocompletion for your code. Autocompletion is based not only on the content within your files, but also on the ECMAScript and Node.js standard library:
\\n![\\\"Autocompletion](\\\"./resources/anims/autocompletion.gif\\\")
Methods defined in ECMAScript and Node.js also have documentation provided for you. Simply hover over a method name for a moment, and a second box quickly shows some additional information.
\\nYou can disable autocompletion in the Settings menu.
\\n\\nLuckily you're not limited to the default set of Runners in Cloud9.\\nYou can simply define your own custom Runner, which is both simple and very powerful.\\nAll you need to do is create a Runner file.\\nIn this article we'll describe how to do this in just a few steps.
\\nIn the Run panel (usually at the bottom of the UI), click the 'Runner' text input and choose 'New Runner'. \\nIn the new Runner file that's now opened, you can configure your runner\\nusing a simple JSON format. We'll show a basic example below\\nand then explain the different properties you can use.
\\nLet's start with a basic example: a runner for go files.
\\n{\\n \\\"cmd\\\": [\\\"go\\\", \\\"run\\\", \\\"$file\\\", \\\"$args\\\"],\\n \\\"selector\\\": \\\"source.go\\\",\\n \\\"info\\\": \\\"Your code is running :)\\\"\\n}This runner will use "go run" for any file that has a ".go" file extension.\\nIf you add it, it'll override our default Go runner.
\\nAs another example, let's save a new Node 0.11 configuration, including Harmony support. \\nCreate a new Runner, add this code, and save it as 'Node 0.11.x.run':
\\n// This file overrides the built-in Node 0.11.x runner\\n// For more information see http://docs.c9.io:8080/#!/api/run-method-run\\n{\\n \\\"cmd\\\": [\\n \\\"bash\\\",\\n \\\"--login\\\",\\n \\\"-c\\\",\\n \\\"nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args\\\"\\n ],\\n \\\"debugger\\\": \\\"v8\\\",\\n \\\"debugport\\\": 15454,\\n \\\"info\\\": \\\"Your code is running at \\\\\\\\033[01;34m$url\\\\\\\\033[00m.\\\\n\\\\\\\\033[01;31mImportant:\\\\\\\\033[00m use \\\\\\\\033[01;32mprocess.env.PORT\\\\\\\\033[00m as the port and \\\\\\\\033[01;32mprocess.env.IP\\\\\\\\033[00m as the host in your scripts!\\\\n\\\"\\n}That's it! Your custom Runner should be available in the Run panel.
\\nHere's a list of all the variables you can use in your runners:
\\n$file_path The directory of the current file, e. g., /home/ubuntu/workspace/docs
$file The full path to the current file, e. g., /home/ubuntu/workspace/docs/Chapter1.txt.
$args Any arguments entered after the file name.
$file_name The name portion of the current file, e. g., Chapter1.txt.
$file_extension The extension portion of the current file, e. g., txt.
$file_base_name The name only portion of the current file, e. g., Document.
$packages The full path to the Packages folder.
$project The full path to the current project file.
$project_path The directory of the current project file.
$project_name The name portion of the current project file.
$project_extension The extension portion of the current project file.
$project_base_name The name only portion of the current project file.
$hostname The hostname of the workspace.
$hostname_path The hostname of the workspace together with the relative path of the project file.
$url The full url to access the workspace.
$port The port assigned to the workspace.
$ip The ip address to run a process against in the workspace.
Let's say you're working a large project containing many files, and you kind-of sort-of know the name of a file that you want to open up. Goto File is our feature to help you quickly and easily jump to any file in your workspace, without the need to search through different directories. Simply hit Cmd-E (or Ctrl-E on Unix/Windows) and away you go:
![\\\"Goto](\\\"./resources/images/gotofile.png\\\")
Goto File offers filtering for any portion of a filename, including directories. Search for the beginning, middle, or end of a file path, or even just an extension, like .js, and Goto File with instantly present the results to you. Clicking on a name in the list opens the file right up. Goto File does not support case-insensitive, wildcard (*, ?), or regular expression (., +) searching.
Goto Definition takes the same concept and applies it to files. You can easily navigate between classes and members defined in your files. By entering text, you can filter your class' member results. Finally, as you navigate through your file, Cloud9 IDE will jump to the relevant portion of the code:
\\n![\\\"Goto](\\\"./resources/images/gotodefinition.png\\\")
Another feature that's available is the capability to "jump to definition." If your cursor is on a variable or function name, you can tap F12 (or type jumptodef in the console) to instantly scroll the editor to the member's definition.
Collaboration with Cloud9 IDE is an amazing feature that lets you do more than just share your projects with any other Cloud9 developer. You can grant someone else access to change files in your workspace, in realtime--or just let them view the workspace without any other rights. While you're collaborating, you can discuss the code through a built-in chat room.
\\nTo invite someone to collaborate on a project with you, simply copy the URL in the browser and send it to a friend. You can also click on Share in the menu bar to get quick access to other ways to share, such as via e-mail, Twitter, or Facebook.
\\nLet's take a look at some of the additional features available while you collaborate.
\\nThere are two terms used for people accessing your project: members and visitors. Members are individuals that have read and write access to your project--that means they can change any code; visitors only have read access. The Members panel lists all the collaborators in a project, both active and inactive:
\\n![\\\"The](\\\"./resources/images/members_panel.png\\\")
If you are the owner of a project, you can click on anyone's username to grant (or revoke) write access:
\\n![\\\"Granting](\\\"./resources/images/collab_grant_access.png\\\")
If you're worried about the sanctity of your code after grant access to other developers, fear not. You can always take a look at a file revision history to view line-by-line changes made to your project over time.
\\nAny member or visitor can participate in group chat with each other. Developers can also choose to double-click on a person's username and engage in a private, instant-message-style conversation.
\\nWhen a collaborator changes a file you're also working on, Cloud9 detects it and asks you whether you'd like to use their changes, or your version. We're also simply giving you the option to merge both, using a three-way-merge algorithm to handle any conflicts. This is the same algorithm used by version control systems like git for merging branches.
\\nTo make the experience even smoother you can choose "Always merge by default" and we'll never interrupt you about file changes again.
\\nCheck out the video below to see this in action.
\\nAside from Goto File and Goto Definition, Cloud9 also offers more traditional search functionality. There are three types of search modes available: quicksearch, search and replace, and find in files.
\\nQuicksearch can be activated by hitting Cmd-F on a Mac, or Ctrl-F on a Unix/Windows machine. As you type in the quicksearch bar, the IDE instantly shifts to the next available result. This is a great way to quickly search around in your code without hassle.
Quicksearch offers the following options:
\\nBuilding on the features of quicksearch, search and replace allows you to replace segments of code in your file. You can again continue to use regular expressions, keeping in mind the groupings are prefixed with a dollar sign, i.e. $1.
Replacing offers two more options:
\\nIn order to search across a set of files, you'll want to use the Find in Files feature. Here, you can search of a string or regular expression, within your entire workspace or a single directory. You can also filter based on extensions, like *.js or *.rb.
Find in files offers some of the same search options as quicksearch:
\\nOne more feature of find in files is the ability to render search results either in the console or the IDE. You can fold results to keep them out of the way, or, edited the file if you're working down a list:![\\\"Search](\\\"./resources/images/searchinfiles_ide.png\\\")
Multiple cursors is one of the most useful features available in the Cloud9 editor. You can use multiple cursors to perform tasks like rename several variables or members at once, break up lists separated by commas, or insert the same text in multiple locations.
\\n![\\\"Showing](\\\"./resources/anims/multiplecursors.gif\\\")
Multiple selections can be copied and pasted, and you can insert or remove entire lines in several locations.
\\nThere are several ways to get access to mutliple cursors:
\\nOne of the best capabilities is the ability to instantly select the next instance of your currently highlighted section. This is especially useful for refactoring several parts of the code at once. To do this, press Ctrl-Alt, followed by the right (or left) arrow key to navigate around in the code.
\\n\\nCloud9 IDE has varying levels of support for different programming languages. \\nUsually you will at least have Syntax Highlighting in the editor and the ability\\nto run apps from the Terminal.
\\nCloud9 IDE develops and builds on Ace, an \\neditor for writing code online. Cloud9's Ace editor currently supports \\nhighlighting for about 100 programming languages, and any changes made to Ace are \\nreflected back into Cloud9 IDE.
\\nThe list of supported languages is growing, and you can get the full list from \\nthe menu. Feel free to create an issue in the Ace repository \\nfor new requests, or add your own syntax highlighting mode.
\\nSee Syntax Highlighting & Themes for more \\ninfo.
\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\nThe Run panel currently supports running the following by default:
\\nIf you'd like to run any other language, simply create a new "Runner".
\\nYou can also do so from the Terminal. \\nEach workspace is an Ubuntu VM with the standard tools like bash, make, \\ngcc, vim, java SDK or perl pre-installed.
Cloud9 IDE develops and builds on Ace, an editor for writing code online. Ace supports over two dozen different themes for highlighting your code, and any changes made to Ace are reflected back into Cloud9 IDE.
\\nYou can change your current theme by going to , and selecting from one of the many options. By hovering over the menu items, you'll be able to get a preview of the theme. To activate a theme you like, just click on its name.
\\nThe IDE contains the following themes:
\\nBy default, files are highlighted based on their file extension. You can change this by going to , and selecting a different context. This forces a single file to use a different highlighter.
\\nWe support highlighting for at least the following languages, and many more:
\\nWe are always adding new themes and new languages to support, so check the menu often! Since we use Ace to provide syntax highlighting, feel free to log an issue there for new requests.
\\n\\nCloud9 IDE allows you to easily add files to your curent workspace at any time. You can drag and drop files from your computer directly into the Project Files pane, and the IDE will add them to your project. Google Chrome users can also drag entire folders into the IDE.
\\nIf a file transfer is halted for some reason--say, if you lose your internet connection--the upload resumes once the connection returns. As the files transfer, the IDE lets you know the current status of the overall transfer, as well as the status of each file being uploaded:
\\n![\\\"Uploading](\\\"./resources/anims/uploading.gif\\\")
You can also get an exact copy of your workspace to save on your computer. By going into , you will be provided with a Zip file containing the entirety of your project.
\\n\\nFor Drupal there are some installation guides around which tell you to install PHP first, but that's not necessary with Cloud9.\\nYou don't need to install MySQL either, it is already preinstalled in PHP workspaces. \\nJust make a new workspace, choose PHP, go to the Terminal, and execute the following:
\\ncd $HOME\\ncurl -O http://ftp.drupal.org/files/projects/drupal-7.30.tar.gz\\ntar xvf drupal-7.30.tar.gz\\nmv drupal-7.30/* workspace/\\nmv drupal-7.30/.htaccess workspace/\\ncd $HOME/workspace\\nmysql-ctl install\\nmysql-ctl start\\nmysql-ctl statusOpen the file install.php in the file tree, and while opened, click on the "Run Project" button in the menu bar on top of the IDE.\\nAn URL will be shown at the bottom of the page, something like "https://drupal-c9-lcipriani.c9.io/", but with your username and workspace name in it.
\\nCopy the url in a new browser tab and you will see the install page of Drupal
\\nYou can now proceed with the installer
\\n![\\\"Drupal](\\\"./resources/images/drupalFrameworkInstaller.png\\\")
Now be careful inserting the correct values for the database. You need to change the values as follows:
\\nuser: yourusername\\ndatabase: c9\\nhost: 127.0.0.1Open the Advanced Options in the database settings page as shown in the screenshot:
\\n![\\\"Drupal](\\\"./resources/images/drupalFrameworkMysql.png\\\")
Now fill the form with the correct site information:
\\n![\\\"Drupal](\\\"./resources/images/drupalFrameworkSiteInfo.png\\\")
Continue the setup and enjoy your website!
\\n![\\\"Drupal](\\\"./resources/images/drupalFrameworkInstalled.png\\\")
When you're working with git repositories, it's helpful to know who made a commit to a particular piece of code. As it turns out, git has a feature called git blame that we've integrated directly into Cloud9 IDE.
By using git blame, you'll be able to instantly discover who edited certain lines of code, when they edited it, and what their commit message at the time was. Clicking on a git commit also highlights other lines of code changed at the same time. To launch the git blame feature, open a file and navigate to .
Zen mode is a full screen coding environment designed to make you more productive. It essentially removes all the additional UI elements in Cloud9 IDE, and places you in a harmonious relationship with your code.
\\nTo activate zen mode, simply hover over the upper right corner of the code editor, and click the icon that appears. Keep in mind that you'll need to have a file open before you can launch zen mode. You can resize your window by holding and dragging the left or right border.
\\nTo get out of zen mode, hover over the same corner and click the same icon.
\\nYou can also enter and exit zen mode via keyboard shortcuts, command line, or from the menu bar at .
\\n\\nIonic is an open source front-end framework for developing hybrid mobile apps with HTML5.
\\nCreate a Ionic app as follows:
\\nRun the following commands in the Terminal:
\\n $ npm install -g cordova ionic\\n $ ionic start myApp sidemenu\\n $ cd myApp\\n $ ionic serve $PORTClick the "Preview" button in the top menu in the IDE, and choose "Preview with Web Server". This will open the Preview window for your running app.
\\nGhost is a simple, powerful publishing platform that \\nallows you to share your story with the world.
\\nCreate a Ghost blog as follows:
\\nRun the following commands in the Terminal:
\\n $ curl -L https://ghost.org/zip/ghost-latest.zip -o ghost.zip\\n $ unzip -uo ghost.zip -d .\\n $ rm ghost.zip\\n $ npm install --productionAdapt the config.js file to the Cloud9 environment. Change the following keys:
config: {\\n development: {\\n url: 'https://' + process.env.C9_HOSTNAME,\\n },\\n server: {\\n host: process.env.IP,\\n port: process.env.PORT\\n }\\n }Run Ghost by typing npm start in the console or by opening index.js and\\nhitting the run button.
Change the URL to /ghost and create your admin user to login to the Ghost admin interface
Joomla is a popular open source CMS. \\nInstalling Joomla is very straightforward, but there are just a few quirks to keep in mind, which we describe below.
\\nDownload and Unzip Joomla from the Terminal. You can find the latest version on the Joomla website
\\n wget http://joomlacode.org/gf/download/frsrelease/19665/160049/Joomla_3.3.3-Stable-Full_Package.zip\\n unzip Joomla*.zip\\n rm Joomla*.zipJoomla requires a MySQL database to connect to. MySQL is pre-installed in your workspace, so just execute these commands:
\\nmysql-ctl install\\nmysql-ctl start... and then note the credentials to use in the configuration of Joomla later on.
\\nTo run the Joomla installer, open index.php and run it with the "Run" (or "Run Project") button at the top of the IDE.\\nNext, click the URL that's displayed in the Run panel, which looks something like https://joomla-c9-username.c9.io/installation/index.php#. \\nThis will open up the Preview window with the installer.
\\nNow, here comes the quirky part: the installer will not work properly if it's loaded over HTTPS, as the Cloud9 Preview window does by default.\\nSo, in order to make the Joomla installer work, do the following:
\\n![\\\"Preview](\\\"./resources/images/previewPopOutButton.png\\\")
(or copy & load the URL in a browser tab)Now you should be able you to get through the installer successfully.
\\nThe main Configuration screen should look like this:
\\n![\\\"Joomla](\\\"./resources/images/joomlaInstallerMain.png\\\")
Enter whatever values you'd like here.
\\nThe second quirky and important thing to keep in mind in the Database section, is to use Host Name "0.0.0.0" instead of "localhost".
\\nSo use values like shown in the screenshot below:
\\n![\\\"Joomla](\\\"./resources/images/joomlaInstallerDatabase.png\\\")
Use whatever settings you'd like in the final installation screen, and after it completes, have Joomla remove the Installation folder for safety.
\\nThat's it, you're done and your Joomla setup should run fully on Cloud9!
\\n\\nEvery time you save a file on Cloud9, a diff of any changes made to it is saved by the server. Over time, you can view these file revisions as content is added and removed from your files. You can also restore a file to any previously saved state; you'll never have to worry about losing your work ever again!
\\nTo access file revisions, you can either go to , or type Cmd-B on Mac or Ctrl-B on Linux/Windows. This will pop open the Revisions History panel. Red lines indicate lines that were removed; green lines indicate lines that were either added or changed.
At the bottom of the panel, there's a checkbox for showing all of a file's changes. Files changes that occur relatively soon to one another--say, a few seconds--are grouped by the revisions panel as one "change." If you prefer to see every single change as an individual entry, enable the Show all file changes checkbox.
\\nTo restore a file to a previous revision, simply click the revisions button for that entry: ![\\\"Revisions](\\\"./resources/icons/revisions_button.png\\\"){kind=icon}
Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.
\\nTo get started with a Koa app, first create a workspace and choose either the Node.js type, or a Custom workspace type for a clean workspace.
\\nKoa.Js makes use of the new generator feature in javascript ECMA 6. \\nThis feature is support in Node from 0.11 and up by toggling the --harmony flag. \\nBy default Cloud9 runs Node v0.10.x or v0.8.x, depending on your setup, so we first need activate Node version 0.11.x.
Open a Terminal, or using the pre-existing one at the bottom and execute the following in your Terminal:
\\nnvm use 0.11Next, we need to install Koa itself:
\\nnpm install koaNow we can create a simple Koa.Js server.\\nCreate a server.js file in your root folder with this code:
\\nvar koa = require('koa');\\nvar app = koa();\\n\\napp.use(function *(){\\n this.body = '<h1>Hello from Koa.Js</h1>';\\n});\\n\\napp.listen(process.env.PORT);If you now press the Run button on top of the IDE, you will see some errors, as the runner/debugger defaults to 'Node (default)', which is Node version 0.10.x or 0.8.x.
\\nLuckily all you need is to create a Runner file so Cloud9 can run Node 11.x in harmony mode and thereby support generators.
\\nIn the Run panel below, click the 'Runner' text input and choose 'New Runner'. \\nIn the new Runner file that's opened, save the following code as 'Node 0.11.x.run':
\\n// This file overrides the built-in Node 0.11.x runner\\n// For more information see http://docs.c9.io:8080/#!/api/run-method-run\\n{\\n \\\"cmd\\\": [\\n \\\"bash\\\",\\n \\\"--login\\\",\\n \\\"-c\\\",\\n \\\"nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args\\\"\\n ],\\n \\\"debugger\\\": \\\"v8\\\",\\n \\\"debugport\\\": 15454,\\n \\\"info\\\": \\\"Your code is running at \\\\\\\\033[01;34m$url\\\\\\\\033[00m.\\\\n\\\\\\\\033[01;31mImportant:\\\\\\\\033[00m use \\\\\\\\033[01;32mprocess.env.PORT\\\\\\\\033[00m as the port and \\\\\\\\033[01;32mprocess.env.IP\\\\\\\\033[00m as the host in your scripts!\\\\n\\\"\\n}Let's run server.js with this new configuration; in the Run panel on the bottom, choose your new 'Node 0.11.x' Runner, and press Run again.
\\nYou Koa.Js server should now be up and running.
\\nNow if you click the Preview button in the top menu in the IDE, and choose "Preview with Web Server", this will open the Preview window for your running app.
\\n(Credits go to Tom at http://kyorcode.blogspot.nl/2014/08/running-koajs-in-cloud9.html)
\\n\\nExpress is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
\\nTo get started with an Express app, first create a workspace and choose either the Node.js type, or a Custom workspace type for a clean workspace. Open the new workspace (or an existing one) to follow the instructions below.
\\nFirst we'll install the Express project generator and generate an application stub:
\\n$ npm install -g express-generator\\n$ express -f .\\n$ npm installYou might want to take a look at package.json and update the application name from the default workspace to something more fitting.
Now you have a fully configured express application already. You can run it from the terminal using:
\\n$ bin/wwwNow if you click the Preview button in the top menu in the IDE, and choose "Preview with Web Server", this will open the Preview window for your running app.
\\nIn order to make life easier you can create a run configuration for express.
\\nRun -> Run Configurations -> Manage ...Add New ConfigExpress as name, bin/www as the command and Node 0.10.x as the runner.Set As Default. If you do so then clicking the run button will always run the app and not the currently opened file.The finished run configuration should look something like this
\\n![\\\"Express](\\\"./resources/images/express-run-config.png\\\")
For Laravel there are some installation guides around which tell you to install PHP first, but that's not necessary with Cloud9.\\nJust make a new workspace, choose PHP, go to the Terminal, and execute the following:
\\nrm README.md php.ini hello-world.php\\ncomposer create-project laravel/laravel ./laravel --prefer-dist\\nshopt -s dotglob\\nmv laravel/* ./\\nrm -rf laravelAs lavarel is serving its content from the public directory we need to modify the apache config:
sudo vi /etc/apache2/sites-enabled/001-cloud9.confThen do the following:
\\n// Change this line\\nDocumentRoot /home/ubuntu/workspace\\n\\n// To following\\nDocumentRoot /home/ubuntu/workspace/publicRun the project with the "Run Project" button in the menu bar on top of the IDE.\\nIf you click the URL that appears in the Run panel below (in the shape of 'https://laravel-c9-username.c9.io/'), you can preview your new Laravel app.
\\n![\\\"Run](\\\"./resources/images/laravelWorkspaceRunning.png\\\")
Meteor is an open-source platform for building web apps.
\\nCreate a Meteor app as follows:
\\nRun the following commands in the Terminal:
\\n curl https://install.meteor.com/ | sh\\n meteor create ./my_cool_app\\n cd my_cool_app/\\n meteor --port $IP:$PORTClick the Preview button in the top menu in the IDE, and choose "Preview with Web Server". This will open the Preview window for your running app.
\\nSymfony is one of the leading PHP Webframeworks. It is Open-Source and built on top of the Symfony Components.
\\nInstall the Intl extension for PHP that is required in most of the Symfony2 projects
\\n sudo apt-get install php5-intlSet a valid PHP timezone
\\n echo 'date.timezone = UTC' | sudo tee --append /etc/php5/apache2/php.iniStarting MySQL-Server
\\n sudo mysql-ctl install\\n sudo mysql-ctl startOpen your Terminal and execute the following to create a new Symfony-Project\\nYou need the first line only if you used the PHP Project type for your workspace.
\\n rm README.md php.ini hello-world.php\\n composer create-project symfony/framework-standard-edition symfony/ \\\"2.5.*\\\"\\n mv symfony/{*,.*} ./ \\n rm -rf symfonyThe create-project composer command will ask for a few parameters, the only one you need to pay special attention is the database-host parameter.
\\nThere is a IP address checking in the web/app_dev.php file. To disable this check please remove the following lines
\\n // This check prevents access to debug front controllers that are deployed by accident to production servers.\\n // Feel free to remove this, extend it, or make something more sophisticated.\\n if (isset($_SERVER['HTTP_CLIENT_IP'])\\n || isset($_SERVER['HTTP_X_FORWARDED_FOR'])\\n || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1'))\\n ) {\\n header('HTTP/1.0 403 Forbidden');\\n exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');\\n }After that add a new run configuration in Menu Run > Run Configurations > New Run Configuration. Select Apache http (PHP, HTML) as a Runner and web/app_dev.php as Command.\\nThat's it after you hit Run your server will start up and you can access your new Symfony project.
On Hosted and SSH workspaces, Cloud9 provides two ways to run your application:
\\nFirst, open the file you want to run.
\\nNext, click on the Run button in the top menu bar in the IDE.
\\n![\\\"Run](\\\"./resources/images/runButtonMenuBar.png\\\")
The Run button acts as a sort of shortcut to the Run panel, which will appear by default in the bottom of the IDE when you run a file.\\nThis automatically runs the currently active file, and it will guess which Runner to use based on the extension of the file.
\\nWhen you're ready to stop your app, click on the Stop Button button in the menu bar at any time, or from the Run panel below.
\\n![\\\"Run](\\\"./resources/images/runPanel.png\\\")
On the Run panel, you'll notice a few more options you can set. \\nFilling these textboxes out creates a Run Configuration.
\\nFor some default runners like Node.js, it's an option to Run in debug mode, which indicates that you want to run the current code through the debugger. \\nThis will reveal (or collapse) the debugging tools panel described in Running and Debugging your code.
\\nThe built-in Terminal provides access to all underlying system commands, including your Runners such as Node.js. \\nSimply open up a Terminal from the "+" sign, or use CMD+T (Mac) / Control+T (Windows), and then execute the command you need to run your app, e.g. node server.js.
To find out where your application is running you can do two things:
\\nFrom the Terminal, run the following command:
\\n$ mysql-ctl installThe output will be:
\\nMySQL 5.5 database added. Please make note of these credentials:\\n\\nRoot User: username\\nDatabase Name: c9Now you can connect to the database using the ip 127.0.0.1 and the default port 3306.\\nYou can also test it using our tool from the Terminal:
\\n$ mysql-ctl cli\\nWelcome to the MySQL monitor. Commands end with ; or \\\\g.\\nYour MySQL connection id is 24\\nServer version: 5.5.37-0ubuntu0.14.04.1 (Ubuntu)\\n\\nCopyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.\\n\\nOracle is a registered trademark of Oracle Corporation and/or its\\naffiliates. Other names may be trademarks of their respective\\nowners.\\n\\nType 'help;' or '\\\\h' for help. Type '\\\\c' to clear the current input statement.\\n\\nmysql> show databases;\\n+--------------------+\\n| Database |\\n+--------------------+\\n| information_schema |\\n| c9 |\\n| mysql |\\n| performance_schema |\\n+--------------------+\\n4 rows in set (0.15 sec)From the Terminal, run the following command:
\\n$ mongod --bind_ip=$IP --nojournalThe output will include:
\\n...\\nwaiting for connections on port 27017Now you can open the mongo shell in a new Terminal, running following command:
\\n$ mongoTo stop the MongoDB instance press Control+C in the Terminal where mongod is running.\\nNow have a look at the currently used database:
$ mongo\\nmongo> db\\ntestAfter you have logged into Cloud9, you are placed into your account's dashboard. From here, you can edit your profile and manage workspaces you have access to.
\\n![\\\"An](\\\"./resources/images/theDashboard.png\\\")
In the top-left corner of the dashboard, your username is displayed. Within the user context, you can view your user profile by clicking on Your Account:
\\n![\\\"A](\\\"./resources/images/userContext.png\\\")
The user profile contains:
\\nThe gravatar that is used for your profile is handled by gravatar.com. If you don't have a gravatar yet, Cloud9 IDE uses an uninspiring default.
\\nIn the left panel, you'll find a list of various projects associated with your account. These are:
\\nClicking on the ![\\\"Project](\\\"./resources/icons/workspacePlusIcon.png\\\"){kind=icon}
next to MY PROJECTS lets you:
![\\\"Creating](\\\"./resources/images/newWorkspace.png\\\")
For more information on creating new workspaces, see this section of the documentation.
\\nYou can always filter your project list by entering text in the text bar to find matching projects. If you need to update the list, click the refresh icon at the bottom of the panel: ![\\\"Refresh](\\\"./resources/icons/refreshProjects.png\\\"){kind=icon}
Cloud9 supports three types of workspaces:
\\n"Hosted" is the best choice for most people, so in this short "Getting Started" article we'll only describe this option; for other options please read the full Creating a new workspace article.
\\nThe first step for creating a new workspace is click the "CREATE NEW WORKSPACE" button in your Dashboard:
\\n
At this point, you'll encounter two choices: Create a new workspace and Clone from URL. \\nIn this article we'll only describe the Create a New Workspace option, which allows you to create any of the previously mentioned types of workspaces (hosted, FTP, or SSH).
\\nAfter clicking on Create a new workspace, you're taken to the screen below:
\\n![\\\"Options](\\\"./resources/images/createNewWorkspaceOptions.png\\\")
First, let's enter a workspace name.\\nDepending on whether you have a Free of Premium account, you can choose to make it either Public (open to anyone with the URL), or Private (only accessible to you and people you share it with).
\\nAfter this, choose the type of workspace you want to create:
\\nsudo powers!Choose the "Hosted" workspace type to start from scratch with a 'Custom' workspace, or simply pick a pre-configured environment like Node.js, WordPress, or Python/Django, and immediately start developing your app.\\nThis way you don't need to spend valuable development time on system setup and maintenance, as we maintain it, and you control it.
\\n![\\\"Options](\\\"./resources/images/createHostedWorkspace.png\\\")
As it's powered by a full Linux Ubuntu environment, hosted workspaces allow you to install any package (sudo apt-get install package), run git commands from the console to push your changes to a GitHub repo or a Bitbucket git repo, etcetera.
Now press Create. That's it! You can now see your new workspace in the dashboard:
\\n![\\\"New](\\\"./resources/images/createdWorkspace.png\\\")
Now, just click Start Editing to get started!
\\nNext up, read how to run an application and set up a database.
\\n\\nCloud9 IDE can be thought of as being divided into the following components:
\\n![\\\"IDE](\\\"./resources/images/editorNaming.png\\\")
Throughout the documentation, we'll refer to these sections by name. We can identify several distinct areas in the editor:
\\nls or mkdir). It also displays output provided by your program's print statements (like console.log()), as well as providing an area for search resultsThe Project Bar, Tool Bar, and Console are powerful features, so their documentation is provided separately. We'll talk about the rest of the editor below:
\\nRemember: nearly every UI element can be collapsed, in order to provided a more harmonious coding experience. For example, clicking on the buttons in the upper left of the editor allows you to hide the panels and top menu bar:![\\\"Hiding](\\\"./resources/anims/collapsingbars.gif\\\")
![\\\"A](\\\"./resources/images/topMenuBar.png\\\")
In this section, you can find the usual menus for creating and saving files, changing your view, applying a new theme for the editor, and switching between windows.
\\nIn the middle of the menu bar you'll find the debug button: ![\\\"The](\\\"./resources/icons/debugButton.png\\\"){kind=icon}
. This is used for running and debugging your code. For more information, see the section on "Running and Debugging Your Code"..
The preview button ![\\\"The](\\\"./resources/icons/previewButton.png\\\"){kind=icon}
provides you with a look of what the currently active file would look like in the browser. For text files, this is usually just the raw text, but certain files, like HTML or XML, render as the actual markup.
The autosave button indicates the status of your current saves: ![\\\"Autosave](\\\"./resources/icons/autosaveButton.png\\\"){kind=icon}
. Files are saved automatically by Cloud9 IDE, and every revision is made available for you to browse through. For more information, see the section on revisions and saving.
On the far right of the menu, near the Cloud9 IDE logo, there are two more icons: one to return to the dashboard, and one to return to the Cloud9 IDE homepage.
\\nThis is where most of the action happens. Every file you open appears here as a tab. You can open a new file easily by clicking on the ![\\\"Tab](\\\"./resources/icons/tabPlusIcon.png\\\"){kind=icon}
button to the right of the last tab. Cloud9 IDE offers syntax highlighting for over two dozen programming languages.
The code editor supports a large number of keyboard shortcuts to increase your productivity. For an up-to-date list of these within the IDE, simply go to .
\\nIf you hover over to the upper-right corner, you can activate zen-mode, which is a full screen coding environment.
\\nAt the lower-right corner, you can find the status bar.
\\n\\nAs you develop your application, often you just want to quickly demo your work-in-progress to a colleague, customer, or friend. \\nOr you want to pull in a fellow dev to debug an issue, or to pair program.
\\nCloud9 enables you to do just these things, easily: share your entire development environment, the running application, or just a preview of your running application. \\nHere we describe how to access these options, and how to use each.
\\nThe best place to start sharing is from the dedicated "Share" dialog. \\nAccess it via the "Share" button on the right top of the IDE, or via the menu in Window > Share...
\\n![\\\"Share](\\\"./resources/images/shareButtons.png\\\")
Here's what you see when you pull up the Share dialog:
\\n![\\\"Share](\\\"./resources/images/shareWorkspaceDialog.png\\\")
Links to share
\\nIf you enable the "Public" checkbox for an option, it will make the URL accessible for anyone with the URL.\\nFor public workspaces all these URLs are public by default, but for private workspaces you have to enable them manually.
\\nWho has access
\\nThis section refers to people you have specifically granted access to your entire development environment.\\n(R) gives Read access only to that person: the ability to open and view files, and to run your code.\\n(RW) or "Read/Write" also gives that person the ability to write to files.
\\nInvite people
\\nThis section enables you to invite people to your workspace and immediately set if they have just "Read" or "Read+Write" rights. \\nYou can invite people by their email address or Cloud9 username. \\nYou can also choose whether or not send an automatic email to that person that they've been invited to your workspace.
\\nCloud9's Collaboration features allow you to share your entire development environment so you can work on code together, much like working on a document in Google Docs.\\nYou'll actually be able to see each other's cursor as you type, run your app, share the Terminal(s), and talk in the group chat.\\nSee the screenshot below for what this looks like:
\\n![\\\"Collaboration](\\\"./resources/images/collab.png\\\")
In order to share your entire development environment, do one of the following:
\\nIf someone asks for either Read or Read+Write access to your workspace, you can accept or deny them from the Collaboration panel on the right.
\\nIf you Run your application the result can be shared by copying the URL from the dialog. \\nThis URL can only be viewed if it's made Public by checking the "Public" checkbox next to the "Application" in the "Links to share" section.
\\nPeople who have full read access to your workspace (as defined in the "Who has access") can view this URL whether it's public or not.
\\nIf you Preview a file in your application, it can be shared by copying the URL from the dialog. \\nThis URL can only be viewed if it's made Public by checking the "Public" checkbox next to the "Preview" in the "Links to share" section.
\\nPeople who have full read access to your workspace (as defined in the "Who has access") can view this URL whether it's public or not.
\\nThe Console is at the bottom of the IDE. It's where you can enter command line input, view output from your program, and push and pull your files between your code repositories.
\\nThe terminal can perform all Unix commands, and allows for path autocompletion by hitting Tab.
\\nFor instance, you can use mercurial commands (hg) and git commands (git) to communicate with the system, and to push your code between repositories. Typing hg or git shows the complete list of commands that are available for these services. For more information about these commands, please check their respective documentation:
To use mercurial commands on the project you are working on, you must have a mercurial project set up; the same holds true for git. Follow these links to learn more about how to set up these project in Cloud9:
\\n\\nThe output tab in the Console shows information whenever a user is running or debugging a program. The content is similar to the output of a desktop terminal:![\\\"Screenshot](\\\"./resources/images/consoleOutput.png\\\")
The output tab also displays the error and additional information that can improve your coding quality. You can use the Console to output results from your running application, just like a regular terminal.
\\nAs your process runs, you'll see a message similar to this one indicating that Cloud9 is running something in the background: ![\\\"Running](\\\"./resources/images/runningProcess.png\\\")
If you hover over this message, you can opt to cancel the process by clicking on the button: ![\\\"Cancelling](\\\"./resources/images/cancellingProcess.png\\\")
AngularJS lets you write client-side web \\napplications as if you had a smarter browser.
\\nFollow these steps to create an AngularJS application using the official project\\ntemplate:
\\nrm -rf * .c9\\ngit clone https://github.com/angular/angular-seed.git .\\nnpm install\\nmv package.json package.json.bak\\njq '.scripts.start=\\\"http-server -a $IP -p $PORT\\\"' package.json.bak > package.jsonRun Project button in the top menu of the IDERun Project to get started. This doesn't\\nlimit the choice of the backend technology you might want to use.Nearly every action in Cloud9 has a corresponding command associated with it. On top of that, every command also has a keybinding that can be used to effortlessly execute the command.
\\nBelow is a list of every single command and keybinding used by Cloud9. Have fun being efficient!
\\n| Command Name | \\nKeybinding | \\n
|---|---|
Abortclicommand | \\n ˄-C | \\n
AddCursorAbove | \\n ˄-⌥-Up | \\n
AddCursorAboveSkipCurrent | \\n ˄-⌥-⇧-Up | \\n
AddCursorBelow | \\n ˄-⌥-Down | \\n
AddCursorBelowSkipCurrent | \\n ˄-⌥-⇧-Down | \\n
Backspace | \\n ˄-⌫ | \\n
Beautify | \\n ⌘-⇧-B | \\n
Clearcut | \\n ⎋ | \\n
Closeallbutme | \\n ⌥-˄-W | \\n
Closealltabs | \\n ⌥-⇧-W | \\n
Closetab | \\n ⌥-W | \\n
Complete | \\n ˄-Space | \\n
Copy | \\n ⌘-C | \\n
Copylinesdown | \\n ⌘-⌥-Down | \\n
Copylinesup | \\n ⌘-⌥-Up | \\n
Cut | \\n ⌘-X | \\n
Del | \\n Delete | \\n
DuplicateSelection | \\n ⌘-⇧-D | \\n
Escapeconsole | \\n ⎋ | \\n
EvalInteractive | \\n ⌘-Return | \\n
Find | \\n ⌘-F | \\n
Findnext | \\n ⌘-G | \\n
Findprevious | \\n ⌘-⇧-G | \\n
Fold | \\n ⌘-⌥-L | \\n
Foldall | \\n ⌘-⌥-0 | \\n
Golinedown | \\n Down | \\n
Golineup | \\n Up | \\n
Gotoend | \\n ⌘-End | \\n
Gotofile | \\n ⌘-E | \\n
Gotoleft | \\n Left | \\n
Gotoline | \\n ⌘-L | \\n
Gotolineend | \\n ⌘-Right | \\n
Gotolinestart | \\n ⌘-Left | \\n
Gotopagedown | \\n PageDown | \\n
Gotoright | \\n Right | \\n
Gotostart | \\n ⌘-Home | \\n
Gototableft | \\n ⌘-[ | \\n
Gototabright | \\n ⌘-] | \\n
Gotowordleft | \\n ⌥-Left | \\n
Gotowordright | \\n ⌥-Right | \\n
Indent | \\n Tab | \\n
Jumptomatching | \\n ˄-⇧-P | \\n
Largerfont | \\n ˄-⇧-. | \\n
Movelinesdown | \\n ⌥-Down | \\n
Movelinesup | \\n ⌥-Up | \\n
Movetableft | \\n ⌘-⌥-[ | \\n
Movetabright | \\n ⌘-⌥-] | \\n
Newfile | \\n ⌥-⇧-N | \\n
Newfiletemplate | \\n ⌥-˄-N | \\n
Newfolder | \\n ⌥-˄-⇧-N | \\n
Nexttab | \\n ⌥-Tab | \\n
Openfilepanel | \\n ⇧-⌘-U | \\n
Opensettingspanel | \\n ⌘-, | \\n
Opentreepanel | \\n ⌘-U | \\n
Outdent | \\n ⇧-Tab | \\n
Outline | \\n ⌘-⇧-E | \\n
Paste | \\n ⌘-V | \\n
Previoustab | \\n ⌥-⇧-Tab | \\n
Quicksave | \\n ⌘-S | \\n
Quickwatch | \\n ⌥-Q | \\n
Redo | \\n ⌘-⇧-Z | \\n
Removeline | \\n ⌘-D | \\n
Removetolineend | \\n ˄-K | \\n
Removetolinestart | \\n ⌘-⌫ | \\n
Removewordleft | \\n ⌥-⌫ | \\n
Removewordright | \\n ⌥-Delete | \\n
RenameVar | \\n ⌥-⌘-R | \\n
Replace | \\n ⌥-⌘-F | \\n
Replaymacro | \\n ⌘-˄-R | \\n
Resume | \\n F8 | \\n
Revealtab | \\n ⇧-⌘-L | \\n
Reverttosaved | \\n ˄-⇧-Q | \\n
Revisionpanel | \\n ⌘-B | \\n
Run | \\n F5 | \\n
Saveas | \\n ⌘-⇧-S | \\n
Savetabsession | \\n ⇧-˄-S | \\n
Searchinfiles | \\n ⇧-⌘-F | \\n
SelectMoreAfter | \\n ˄-⌥-Right | \\n
SelectMoreBefore | \\n ˄-⌥-Left | \\n
SelectNextAfter | \\n ˄-⌥-⇧-Right | \\n
SelectNextBefore | \\n ˄-⌥-⇧-Left | \\n
Selectall | \\n ⌘-A | \\n
Selectdown | \\n ⇧-Down | \\n
Selectleft | \\n ⇧-Left | \\n
Selectright | \\n ⇧-Right | \\n
Selecttoend | \\n ⌘-⇧-Down | \\n
Selecttolineend | \\n ⌘-⇧-Right | \\n
Selecttolinestart | \\n ⌘-⇧-Left | \\n
Selecttostart | \\n ⌘-⇧-Up | \\n
Selectup | \\n ⇧-Up | \\n
Selectwordleft | \\n ⌥-⇧-Left | \\n
Selectwordright | \\n ⌥-⇧-Right | \\n
Smallerfont | \\n ˄-⇧-, | \\n
SplitIntoLines | \\n ˄-⇧-L | \\n
Stepinto | \\n F11 | \\n
Stepout | \\n ⇧-F11 | \\n
Stepover | \\n F10 | \\n
Stop | \\n ⇧-F5 | \\n
Switchconsole | \\n ⇧-⎋ | \\n
Tab0 | \\n ⌘-0 | \\n
Tab1 | \\n ⌘-1 | \\n
Tab2 | \\n ⌘-2 | \\n
Tab3 | \\n ⌘-3 | \\n
Tab4 | \\n ⌘-4 | \\n
Tab5 | \\n ⌘-5 | \\n
Tab6 | \\n ⌘-6 | \\n
Tab7 | \\n ⌘-7 | \\n
Tab8 | \\n ⌘-8 | \\n
Tab9 | \\n ⌘-9 | \\n
ToggleTabs | \\n ˄-M | \\n
Togglecomment | \\n ⌘-/ | \\n
Toggleconsole | \\n ˄-⎋ | \\n
Togglerecording | \\n ⌘-⇧-R | \\n
Tolowercase | \\n ˄-⇧-U | \\n
Touppercase | \\n ˄-U | \\n
Transposeletters | \\n ˄-T | \\n
Undo | \\n ⌘-Z | \\n
Unfold | \\n ⌘-⌥-⇧-L | \\n
Unfoldall | \\n ⌘-⌥-⇧-0 | \\n
Zen | \\n ⌥-Z | \\n
Zenslow | \\n ⇧-⌥-Z | \\n
| Command Name | \\nKeybinding | \\n
|---|---|
Abortclicommand | \\n Ctrl-C | \\n
AddCursorAbove | \\n Ctrl-Alt-Up | \\n
AddCursorAboveSkipCurrent | \\n Ctrl-Alt-Shift-Up | \\n
AddCursorBelow | \\n Ctrl-Alt-Down | \\n
AddCursorBelowSkipCurrent | \\n Ctrl-Alt-Shift-Down | \\n
Backspace | \\n Command-Backspace | \\n
Beautify | \\n Shift-Ctrl-B | \\n
Clearcut | \\n ESC | \\n
Closeallbutme | \\n Ctrl-Alt-W | \\n
Closealltabs | \\n Ctrl-Shift-W | \\n
Closetab | \\n Ctrl-W | \\n
Complete | \\n Ctrl-Space | \\n
Copy | \\n Ctrl-C | \\n
Copylinesdown | \\n Alt-Shift-Down | \\n
Copylinesup | \\n Alt-Shift-Up | \\n
Cut | \\n Ctrl-X | \\n
Del | \\n Delete | \\n
DuplicateSelection | \\n Ctrl-Shift-D | \\n
Escapeconsole | \\n Esc | \\n
EvalInteractive | \\n Ctrl-Return | \\n
Find | \\n Ctrl-F | \\n
Findnext | \\n Ctrl-K | \\n
Findprevious | \\n Ctrl-Shift-K | \\n
Fold | \\n Alt-L | \\n
Foldall | \\n Alt-0 | \\n
Golinedown | \\n Down | \\n
Golineup | \\n Up | \\n
Gotoend | \\n Ctrl-End | \\n
Gotofile | \\n Ctrl-E | \\n
Gotoleft | \\n Left | \\n
Gotoline | \\n Ctrl-G | \\n
Gotolineend | \\n Alt-Right | \\n
Gotolinestart | \\n Alt-Left | \\n
Gotopagedown | \\n PageDown | \\n
Gotoright | \\n Right | \\n
Gotostart | \\n Ctrl-Home | \\n
Gototableft | \\n Ctrl-[ | \\n
Gototabright | \\n Ctrl-] | \\n
Gotowordleft | \\n Ctrl-Left | \\n
Gotowordright | \\n Ctrl-Right | \\n
Indent | \\n Tab | \\n
Jumptomatching | \\n Ctrl-P | \\n
Largerfont | \\n Ctrl-Shift-. | \\n
Movelinesdown | \\n Alt-Down | \\n
Movelinesup | \\n Alt-Up | \\n
Movetableft | \\n Ctrl-Alt[ | \\n
Movetabright | \\n Ctrl-Alt-] | \\n
Newfile | \\n Ctrl-N | \\n
Newfiletemplate | \\n Ctrl-Alt-N | \\n
Newfolder | \\n Ctrl-N | \\n
Nexttab | \\n Ctrl-Tab | \\n
Openfilepanel | \\n Shift-Ctrl-U | \\n
Opensettingspanel | \\n Ctrl-, | \\n
Opentreepanel | \\n Ctrl-U | \\n
Outdent | \\n Shift-Tab | \\n
Outline | \\n Ctrl-Shift-E | \\n
Paste | \\n Ctrl-V | \\n
Previoustab | \\n Ctrl-Shift-Tab | \\n
Quicksave | \\n Ctrl-S | \\n
Quickwatch | \\n Alt-Q | \\n
Redo | \\n Ctrl-Shift-Z | \\n
Removeline | \\n Ctrl-D | \\n
Removetolineend | \\n Alt-Delete | \\n
Removetolinestart | \\n Alt-Backspace | \\n
Removewordleft | \\n Ctrl-Backspace | \\n
Removewordright | \\n Ctrl-Delete | \\n
RenameVar | \\n Ctrl-Alt-R | \\n
Replace | \\n Alt-Shift-F | \\n
Replaymacro | \\n Alt-R | \\n
Resume | \\n F8 | \\n
Revealtab | \\n Ctrl-Shift-L | \\n
Reverttosaved | \\n Ctrl-Shift-Q | \\n
Revisionpanel | \\n Ctrl-B | \\n
Run | \\n F5 | \\n
Saveas | \\n Ctrl-Shift-S | \\n
Savetabsession | \\n Shift-Ctrl-S | \\n
Searchinfiles | \\n Ctrl-Shift-F | \\n
SelectMoreAfter | \\n Ctrl-Alt-Right | \\n
SelectMoreBefore | \\n Ctrl-Alt-Left | \\n
SelectNextAfter | \\n Ctrl-Alt-Shift-Right | \\n
SelectNextBefore | \\n Ctrl-Alt-Shift-Left | \\n
Selectall | \\n Ctrl-A | \\n
Selectdown | \\n Shift-Down | \\n
Selectleft | \\n Shift-Left | \\n
Selectright | \\n Shift-Right | \\n
Selecttoend | \\n Ctrl-Shift-End | \\n
Selecttolineend | \\n Alt-Shift-Right | \\n
Selecttolinestart | \\n Alt-Shift-Left | \\n
Selecttostart | \\n Ctrl-Shift-Home | \\n
Selectup | \\n Shift-Up | \\n
Selectwordleft | \\n Ctrl-Shift-Left | \\n
Selectwordright | \\n Ctrl-Shift-Right | \\n
Smallerfont | \\n Ctrl-Shift-, | \\n
SplitIntoLines | \\n Ctrl-Shift-L | \\n
Stepinto | \\n F11 | \\n
Stepout | \\n Shift-F11 | \\n
Stepover | \\n F10 | \\n
Stop | \\n Shift-F5 | \\n
Switchconsole | \\n Shift-Esc | \\n
Tab0 | \\n Ctrl-0 | \\n
Tab1 | \\n Ctrl-1 | \\n
Tab2 | \\n Ctrl-2 | \\n
Tab3 | \\n Ctrl-3 | \\n
Tab4 | \\n Ctrl-4 | \\n
Tab5 | \\n Ctrl-5 | \\n
Tab6 | \\n Ctrl-6 | \\n
Tab7 | \\n Ctrl-7 | \\n
Tab8 | \\n Ctrl-8 | \\n
Tab9 | \\n Ctrl-9 | \\n
ToggleTabs | \\n Ctrl-M | \\n
Togglecomment | \\n Ctrl-/ | \\n
Toggleconsole | \\n F6 | \\n
Togglerecording | \\n Alt-Shift-R | \\n
Tolowercase | \\n Ctrl-Shift-U | \\n
Touppercase | \\n Ctrl-U | \\n
Transposeletters | \\n Ctrl-T | \\n
Undo | \\n Ctrl-Z | \\n
Unfold | \\n Alt-Shift-L | \\n
Unfoldall | \\n Alt-Shift-0 | \\n
Zen | \\n Alt-Z | \\n
Zenslow | \\n Shift-Alt-Z | \\n
The editor is the most important element of any IDE; that's why Cloud9 developed ACE. ACE is a high-performance code editor for the web that supports over 40 different languages, over two dozen themes, and can still work faithfully on large documents (at last count, four million lines of code was the upper limit). It also contains a bevy of features you'd expect from traditional desktop editors. Among these include:
\\nThere are many different ways to configure the IDE. Below is a list of the options available, and what they do.
\\nThis section controls the overall IDE behavior:
\\n| Preference Name | \\nDescription | \\n
|---|---|
| Enable UI Animations | \\nEnables or disables fluid animations for various UI elements, such as the Project Bar | \\n
| Animate Scrolling | \\nEnables or disables fluid animations when scrolling through code (such as for goto line) | \\n
| Enable Auto-Save | \\nIf enabled, automatically saves your files on every change | \\n
| On Save, Strip Whitespace | \\nWhen saving a file, you can remove all extraneous whitespace from your code lines | \\n
| Reveal Active File in Project Tree | \\nEnabling this jumps the project tree to the active file whenever a tab changes to a different file | \\n
| Warn Before Exiting | \\nPrevents accidental data loss by showing a dialog asking if you really want to leave Cloud9 IDE when closing your browser | \\n
| Node.js Runtime | \\nDefines the default runtime for your Node.js code. "Auto" is based on whatever is in the package.json file, while "Default" reverts to Node 0.6.x. | \\n
| Keybindings | \\nAllows you to choose which operating system to use for keyboard shortcuts | \\n
This section controls language analysis options:
\\n| Preference Name | \\nDescription | \\n
|---|---|
| Enable Hints and Warnings Rules | \\nPresents information about your code in the gutter | \\n
| Highlight Variable Instances | \\nHighlights variable instances in your code | \\n
| Mark Undeclared Variables | \\nProvides warnings if a variable is being used and has not been declared yet | \\n
| Mark Unused Function Arguments | \\nProvides a strikethrough for arguments in a function that are not being used | \\n
| Warning Level | \\nSpecifies the minimum level of information severity you want provided in the gutter | \\n
This section controls language analysis options:
\\n| Preference Name | \\nDescription | \\n
|---|---|
| Auto-pair Quotes, Brackets, etc. | \\nWhen enabled, typing ", (, or [ will actually make two characters appear. In addition, whenever you highlight a word and type one of these characters, it is surrounded by that character (e.g. words becomes "words") | \\n
| Full Line Selection | \\nWhen highlighting lines, this option will highlight all ending whitespace, until the end of the editor window | \\n
| Highlight Active Line | \\nPresents a darker shade in the code editor to indicate which line you're currently on | \\n
| Highlight Gutter Line | \\nPresents a darker shade in the gutter which line you're currently on | \\n
| Show Invisible Characters | \\nShows invisibles characters in the editor, like tabs and line breaks | \\n
| Show Indent Guides | \\nShows the indent guides in the editor, letting you see your code's nestings | \\n
| Show Gutter | \\nShows the gutter in the editor, which indicates line numbers, warnings, and errors | \\n
| Highlight Selected Word | \\nIf you highlight a word, this highlights all matching words in the editor | \\n
| Auto-hide Horizontal Scroll | \\nWhen this is enabled, this will hide the horizontal scroll bar in the editor. Note that this has no effect in Mac OS X 10.7 (Lion) and above, since all scrollbars, by default, auto-hide. | \\n
| Vim Mode | \\nWhen enabled, allows you to use vim keybindings in the IDE | \\n
| Code Folding | \\nWhen enabled, allows you to show or hide "blocks" of code | \\n
| Fade Fold Widgets | \\nWhen enabled, fades the folding widgets in the gutter | \\n
| Font Size | \\nChanges the font size of the code in the editor | \\n
| Show Print Margin | \\nShows (and defines) the number of characters possible in line, before it wraps | \\n
| Soft Tabs | \\nIndicates how many spaces a single tab represents | \\n
| Mouse Scroll Speed | \\nDefines the speed of the mouse scrolls | \\n
| Newline Mode | \\nSpecifies the newline mode for the IDE | \\n
This section controls the behavior for the terminal:
\\n| Preference Name | \\nDescription | \\n
|---|---|
| Scrollback | \\nSets the scrollback buffer for the terminal | \\n
| Font Family | \\nSets the font for the terminal | \\n
| Font Size | \\nSets the font size for the terminal | \\n
| Blinking Cursor | \\nSpecifies whether or not you want the cursor to blink | \\n
This section controls the various tools that are available in the IDE:
\\n| Preference Name | \\nDescription | \\n
|---|---|
| Enable Color Picker | \\nMakes the color picker available for use | \\n
| Preserve Empty Lines | \\nWhen enabled, the editor keeps any new lines without text | \\n
| Keep Array Indention | \\nWhen enabled, tabs and newlines in arrays are preserved. For example, the follow array would remain as-is with this option:\\n \\n var o = [{\\n a: b\\n }, {\\n c: d\\n }];\\n \\n | \\n
| JSLint Strict Whitespace | \\nIf selected, all brackets are preceded by a space. For example, if(x){ becomes if (x) {, and function(arg){ becomes function (arg) { | \\n
| Braces | \\nThese options control how braces are handled in the IDE:\\n
| \\n\\n
The terminal provides you with a TTY interface for direct access to the machine that Cloud9 is running on. If you're running your own workspace, this is the server you've SSH'ed into. If you're using the hosted Cloud9 platform, this is the server your code runs on.
\\nsudo, are restricted, you can completely destroy your workspace, by doing something like rm -rf. Use your power wisely!\\n\\nTo create a new terminal, go to , or simply type Alt-T on the keyboard. The terminal has the following capabilities:
\\n![\\\"Screenshot](\\\"./resources/images/terminal.png\\\")
Jekyll is a great static site generator, also used by github pages. You simply need to install the Ruby gem and then make sure you pass the right port to the serve command.
$ gem install jekyll\\n$ jekyll new my-awesome-site\\n$ cd my-awesome-site\\n$ jekyll serve --port $PORTWelcome to the official Cloud9 IDE documentation! Here, you'll find articles and tutorials to help you use the Cloud9 platform. These include everything from setting up a workspace, to learning how to run, debug, and deploy your code.
\\n\\n\\nHave a look at the "Getting Started" section on the left for an introduction into the basics of Cloud9.\\nFor instance, read up on how to:
\\n\\nIf you're interested in troubleshooting specific aspects of the IDE, need help setting up an account, or just want to chat with our support team, please visit the Support pages.
\\nRemember: All of our documentation content is open-sourced on GitHub, just like our amazing IDE.
\\nSee something that's not documented here? Simply add it to the documentation with a Pull Request, or send an e-mail to docs@c9.io, and we'll get it in.
\\nHere's a list of the last five recently updated topics:
\\n\\n\\nMySQL is the world's most widely used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.
\\nCloud9 IDE does not support installing a MySQL database (yet). As a workaround you can choose to connect your project to a MySQL database hosted elsewhere. Xeround\\noffers hosted MySQL instances and have a free tier available for getting started.
\\nTest the connection using the following script:
<?php\\n\\n $database = new mysqli('instanceNo.db.xeround.com', 'username', 'password', 'databasename', 'port');\\n\\n if($database->connect_errno > 0){\\n die ('Database Error' . $database->connect_error); \\n }else{\\n die ('Connected!');\\n }\\n ?>Courtesy of Roger Qui of Polycadamy. This guide is elaborately explained in a video tutorial
\\n\\nThe project bar is located towards the left of the Cloud9 IDE: ![\\\"The](\\\"./resources/images/project_bar.png\\\")
The buttons in the project bar allow you to reveal and hide panels for the IDE. In more detail:
\\nClicking on any button expands its menu. Clicking on an expanded menu causes it to collapse, which gives you more room in the IDE to work with.
\\n\\nCloud9 IDE offers advanced tab features to make working with multiple files easy. By right-clicking on any tab, you'll open up the tab context menu:
\\n![\\\"The](\\\"./resources/images/tab_context_menu.png\\\")
These feature include:
\\nTo the left of the tab menu is another button that offers additional functions for tab navigation:![\\\"The](\\\"./resources/images/tab_button_menu.png\\\")
Tab sessions is a unique feature that is useful when dealing with projects that involve juggling between many tabs. Essentially, tab sessions lets you save the current state of the tabs. You can close your workspace, switch to a different branch, and instantly reload your previously opened files. You'll no longer need to work with opening and closing multiple files.
\\nTo use tab sessions, select Save Tab Sessions from the tab button menu. Give it a unique name. When you're ready to restore your tab sessions, just select Load Tab Sessions.
\\nIf you find that you've got too many tab sessions defined, you can always choose to delete them from the same tab menu.
\\n\\nThe status bar is designed to provide you with all sorts of information about your code--and additional functionality--without getting in the way of the IDE. It's quite tiny, and quite powerful, like a weight-lifting squirrel.
\\nYou can find the status bar in the lower-right corner of the editor: ![\\\"The](\\\"./resources/icons/statusBarCollapsed.png\\\"){kind=icon}
. Keep in mind that the status bar is transparent, so it's able to camoflauge well with light or dark themes.
There's three pieces of crucial information available at all times: your current row, your current column, and, if you're highlighting characters, the status bar displays the number of bytes currently selected. If you're using Vim Mode, the status bar also tells you if you're in INSERT mode.
\\nIf you click on the status bar, it expands into a menu that provides a smaller set of the full IDE preferences. These options only deal with the IDE editor:
\\n| Preference Name | \\nDescription | \\n
|---|---|
| Show Invisibles | \\nShows invisibles characters in the editor, like tabs and line breaks | \\n
| Wraps Lines | \\nWraps lines according to the line margin defined, or your browser's window. Otherwise, lines run off the current viewport. | \\n
| Code Folding | \\nWhen enabled, allows you to show or hide "blocks" of code | \\n
| Full Line Selection | \\nWhen highlighting lines, this option will highlight all ending whitespace, until the end of the editor window | \\n
| Highlight Active Line | \\nPresents a darker shade in the code editor to indicate which line you're currently on | \\n
| Show Indent Guides | \\nShows the indent guides in the editor, letting you see your code's nestings | \\n
| Show Gutter | \\nShows the gutter in the editor, which indicates line numbers, warnings, and errors | \\n
| Highlight Selected Word | \\nIf you highlight a word, this highlights all matching words in the editor | \\n
| Auto-pair Quotes, Brackets, etc. | \\nWhen enabled, typing ", (, or [ will actually make two characters appear. In addition, whenever you highlight a word and type one of these characters, it is surrounded by that character (e.g. words becomes "words") | \\n
| Auto-hide Horizontal Scrollbar | \\nhen this is enabled, this will hide the horizontal scroll bar in the editor. Note that this has no effect in Mac OS X 10.7 (Lion) and above, since all scrollbars, by default, auto-hide. | \\n
| Font Size | \\nChanges the font size of the code in the editor | \\n
| Show Print Margin | \\nShows (and defines) the number of characters possible in line, before it wraps | \\n
| Soft Tabs | \\nIndicates how many spaces a single tab represents | \\n
| Mouse Scroll Speed | \\nDefines the speed of the mouse scrolls | \\n
MySQL is the world's most widely used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.
\\nThis article explains our first iteration of MySQL support in Cloud9. It makes it super easy to install, start and stop a MySQL instance right in your workspace. The nice thing is that every workspace will run a separate database so your projects will never interfere with each other. You can control MySQL with the mysql-ctl command line tool run from the terminal:
# start MySQL. Will create an empty database on first start\\n$ mysql-ctl start\\n\\n# stop MySQL\\n$ mysql-ctl stop\\n\\n# run the MySQL interactive shell\\n$ mysql-ctl cliYou can then connect to the database with following parameters:
\\n| Option\\n | Value\\n | Comment\\n |
|---|---|---|
Hostname | \\n $IP | \\n The same local IP as the application you run on Cloud9 | \\n
Port | \\n 3306 | \\n The default MySQL port number | \\n
User | \\n $C9_USER | \\n Your Cloud9 user name | \\n
Password | \\n - | \\nNo password since you can only access the DB from within the workspace | \\n
Database | \\n c9 | \\n The database name | \\n
To import existing data into your database run following commands:
\\nmysql-ctl cliYou are now in the MySQL environment and can start the import:
\\nmysql> use c9\\nmysql> source PATH_TO_SQL_FILE.sqlTo verify that everything got imported run:
\\nmysql> show tables;Sometimes you run into issues when you run your project. Here you will find the most common issues and how to solve them.
\\nThe most common reason for an error thrown by your app stating that a port or address is in use is the fact that some process is already running/listening on that port/address. You need to take a look for those and kill the processes conflicting with your app:
\\n// Find the process\\nlsof -i tcp:$PORTIf any relevant process is running you will get a list looking like this:
\\nCOMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME\\napache2 699 ubuntu 4u IPv6 83213152 0t0 TCP *:http-alt (LISTEN)You now can kill that proccess. Make sure you replace PID with the ID of the process.
\\n// Kill the process\\nkill -9 PIDFor the console wizards:
\\nkill -9 $(lsof -i:$PORT -t)MongoDB is a scalable, high-performance, open source NoSQL database.
\\nDocument-Oriented Storage
\\nJSON-style documents with dynamic schemas offer simplicity and power.
Full Index Support
\\nIndex on any attribute, just like you're used to.
Querying
\\nRich, document-based queries.
In addition, MongoDB has many scalability features such as:
\\nReplication, Auto-sharding, Map/Reduce and GridFS
\\nMongoDB is preinstalled in your workspace. To run MongoDB, run the following below (passing the correct parameters to it). Mongodb data will be stored in the folder data.
$ mkdir data\\n$ echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest \\\"$@\\\"' > mongod\\n$ chmod a+x mongodYou can start mongodb by running the mongod script on your project root:
\\n$ ./mongod
| Parameter | Description |\\n| ------------------------------ | ----------------------------------------------------------------------------------------------- |\\n| --dbpath=data | Because it defaults to /var/db which isn't accessible) |\\n| --nojournal | Because mongodb usually pre-allocates 2 GB journal file (which exceeds Cloud9 disk space quota) |\\n| --bind_ip=$IP | Because you can't bind to 0.0.0.0) |\\n| --rest | Runs on default port 28017 |
You should use the host $IP instead of localhost as your driver connection url.
\\ne.g. in Node, it is: process.env.IP
MongoDB has drivers for all supported runtimes. Following are the most commonly used drivers:
\\nMongoose
\\nNode-Mongodb-Native
To access a shell prompt for the above MongoDB run the following.
\\n$ mongoCheck out docs.mongodb.org for details on how to use the shell
\\n\\nFor this tutorial, we'll show you how to create and run a CoffeeScript project, entirely within the Cloud9 IDE. To run any coffeescript project, you'll need to first make sure to install the coffeescript module via the Node Package Manager (npm). We're going to walk you through how to do that with a sample project.
First, create a new project. Then, in the console, enter the following command:
\\ngit clone git://github.com/fjakobs/cloud9-coffeescript-example.gitThis is a sample CoffeeScript application written by one of our developers. After cloning the project, you'll find three different files in the project tree: server.js, app.coffee, and README.md.
\\nThe README.md file contains instructions to install coffee-script using npm. We've integrated Node Package Manager into Cloud9 IDE to enable users to install Node programs. Thus, from the Cloud9 IDE command line, type the following command to install the Coffeescript module:
\\nnpm install coffee-scriptNext, let's have a look at the server.js file. The first line is the require() function, which is used to load the coffee-script module that you have just installed. On the second line, we declare the CoffeeScript file that contains your application. In the last line, we specify the port the server is listening to. When projects run within Cloud9 IDE, you must retrieve the port information using process.env.PORT.
Now, let's look at what the CoffeeScript file does. It creates an HTTP server with a function that is called for each request. In the callback function, you create a response with a status code of 200 (indicating that the request was fulfilled successfully) and the message "Hello World". You use module.exports to enable the server.js file to use the code in the CoffeeScript file:
http = require \\\"http\\\"\\n\\nmodule.exports = http.createServer((req, res) ->\\n res.writeHead 200, 'Content-Type': 'text/plain'\\n res.end 'Hello World\\\\n'Next, run the server.js file and open the URL indicated in the console:
\\n![\\\"Messages](\\\"./resources/images/consoleServerMessage.png\\\")
The result is:
\\n![\\\"The](\\\"./resources/images/coffeescriptServer.png\\\")
To stop your application, go back to the editor and click on the ![\\\"Icon](\\\"./resources/icons/stop_button.png\\\"){kind=icon}
button in the Menu Bar.
Did you know that you can use Cloud9 IDE to work on your WordPress website? It's true, and incredibly easy. You can't edit your posts on WordPress using Cloud9, since they are stored in a database on your server. But you can edit pretty much every other aspect of your site.
\\nTo start, you'll need to create a new FTP project. After that, enter your wp-content folder, find the theme you're using on your website, and start editing its style.
\\nThanks to the preview button in the menu bar, you can also witness your changes as they happen, before committing them to your server.
\\n\\nPostgreSQL comes preinstalled on every Cloud9 workspace, yay.
\\n$ sudo service postgresql start$ sudo sudo -u postgres psql \\npsql (9.3.4, server 9.3.5)\\nType \\\"help\\\" for help.\\n\\npostgres=# \\\\password\\nEnter new password: \\nEnter it again: \\npostgres=# \\\\q$ sudo sudo -u postgres psql Make sure you have logged into the PostgreSQL terminal and then you can just run:
\\n$ sudo sudo -u postgres psql \\npostgres=# create database \\\"groceries\\\";$ sudo sudo -u postgres psql \\npostgres=# \\\\listSince Cloud9 IDE is built on top of Node.js, we also leverage the module system NPM. In Cloud9, you can install any npm package either locally or globally. Note that due to security restrictions, modules installed globally can only be used in the project they were installed from. In other words, while you have access to any command line tools installed by the module, they are bound to the project, not your username. We run version 1.1.24 of npm.
\\nTo demonstrate the power of NPM, we'll build and run a quick express server:
\\nnpm install express, and wait for the npm install process to complete.var express = require('express'),\\n app = express();\\n\\napp.use(express.logger());\\n\\napp.get('/', function(req, res){\\n res.send('Hello World');\\n});\\n\\napp.listen(process.env.PORT);\\nconsole.log('Express server started on port %s', process.env.PORT);To launch your express server, click on the ![\\\"The](\\\"./resources/icons/runButton.png\\\"){kind=icon}
button in the menu bar.
Cloud9 supports the installation of Python packages for applications that need to go beyond the standard library set. Every workspace has version 0.6.10 of Python's easy_install package manager. For more information on this module, see the official easy_install documentation.
Let's try installing a package. First, type the following in the console:
\\neasy_install markdownThis installs the markdown Python package to your workspace. You won't see the package installed in the directory tree, because it's kept deep within your project's the Python libs.
Next, create a new Python script, and add these lines of code:
\\nimport markdown\\n\\nhtml = markdown.markdown(\\\"# HELLO THERE!\\\")\\n\\nprint htmlAfter clicking run, the console will correctly print out <h1>HELLO THERE!</h1>.
You have access to all of the functionality easy_install provides you. For example, you can open up the Python REPL and type the following to see a list of your installed packages:
>>> help('modules')Cloud9 workspaces come with redis pre-installed.
\\nStart the server:
\\nsudo service redis-server startConnect with the client:
\\n./redis-cliSee http://redis.io/clients for drivers.
\\n\\nSQLite is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. SQLite is the most widely deployed SQL database engine in the world. The source code for SQLite is in the public domain.
\\nYou can open the terminal and create a database in a file db_test.db as follows:
![\\\"Screenshot](\\\"./resources/images/sqlite3_simple_db.png\\\")
$ sqlite3 db_test.db\\nSQLite version 3.6.20\\nEnter \\\".help\\\" for instructions\\nEnter SQL statements terminated with a \\\";\\\"\\nsqlite> create table tbl1(one varchar(10), two smallint);\\nsqlite> insert into tbl1 values('hello!',10);\\nsqlite> insert into tbl1 values('goodbye', 20);\\nsqlite> select * from tbl1;\\nhello!|10\\ngoodbye|20\\nsqlite> CREATE TABLE tbl2 (\\n ...> f1 varchar(30) primary key,\\n ...> f2 text,\\n ...> f3 real\\n ...> );\\nsqlite> .exitTo get to know sqlite commands, use the command: .help.
To exit sqlite, use the command: .exit.
SQLite has drivers for all supported runtimes.
\\nFollowing are the most commonly used drivers:
\\nIn your Gemfile, include the line:
gem 'sqlite3'and in configs/database.yml, make sure you use:
adapter: sqlite3\\ndatabase: db/development.dbCloud9 IDE also supports the ability to run a Rails application. The rails command is only available on the terminal.
To run a rails application:
\\ngem install railsrails new example -d mysqlconfigs/database.ymlrails s -b $IP -p $PORTThat's it! Your rails app will now be running.
\\nDo not try to access the project through the IP address and port number rails returns to you--it won't work!
\\nSetup MySQl - note your DB connect parameters
\\nedit configs/database.yml
development:\\n adapter: mysql2\\n encoding: utf8\\n database: c9\\n username: <%=ENV['C9_USER']%>\\n host: <%=ENV['IP']%>Cloud9 supports the installation of Ruby gems in your workspace using the RubyGems package manager. The current installed RubyGems version is 1.3.7. For more information on the gem command, see the official RubyGems documentation.
Let's try installing a gem. First, type the following in the console:
\\ngem install progressbarThis installs the progressbar Ruby gem to your workspace. You won't see the gem installed in the directory tree, because it's kept deep within your project's the Ruby libs.
Next, create a new Ruby script, and add these lines of code:
\\nrequire 'progressbar'\\n\\nbar = ProgressBar.new(\\\"Example progress\\\", 50)\\ntotal = 0\\nuntil total >= 100\\n sleep(rand(2)/2.0)\\n increment = (rand(6) + 3)\\n bar.inc(increment)\\n total += increment\\nendAfter clicking run, the console will start printing out an ASCII progressbar.
\\nYou have access to all of the functionality gem provides you. For example, you can open up the console and type gem query to see a list of your installed gems.
WordPress is web software you can use to create websites or blogs.\\nYou can develop and host WordPress websites entirely on Cloud9 IDE
\\nCreate a WordPress workspace from the WordPress template on your Cloud9 dashboard
\\nIn order to run WordPress, you need a database to host your posts, articles, etc.
\\nYou can use MySQL with our utility script mysql-ctl as explained in MySQL Setup
\\nTo start MySQL server and create the required database, type in the terminal:
\\nmysql-ctl startOpen index.php in your workspace root and click the Run button
You can check the generated config for you In wp-config.php (you don't need to change anything there)
\\ndefine('DB_NAME', 'c9');\\ndefine('DB_USER', getenv('C9_USER'));\\ndefine('DB_PASSWORD', '');\\ndefine('DB_HOST', getenv('IP'));\\ndefine('WP_SITEURL', 'http://' . getenv('C9_PROJECT') . '.' . getenv('C9_USER') . '.c9.io');Cloud9 IDE provides several ways to run and debug your code. We'll explore each of them in this section of the documentation.
\\nThe following information applies to all of the above programming languages.
\\nRunning your code in Cloud9 is really easy. First, open the file you want to run. Usually, this file is going to be the main entry point to your app; for example, if you're creating a server, you'd want to run the file that actually instantiates that server.
\\nThere are two ways to run your code: either through the Run Panel, or through the run button in the menu bar.
\\nNext, click on the Run button in the project bar. You'll notice immediately that your active file is already available to run. Just double-click on the file, and you'll launch your app.
\\nWhen you're ready to stop your app, click on the button in the menu bar at any time.
At the bottom of the run panel, you'll notice a few more options you can set. Filling these textboxes out creates a run scenario, which is like setting up some configurations for the way your code runs. These options are:
\\nOf course, you can also save your run scenarios; just click on the add button at the top of the panel. When you're ready to run a scenario, click on its name in the Run panel list. To remove a run scenario, click on its name in the run panel list, and then click on the remove button.
\\nThe run button in the menu bar acts as a sort of short cut to the Run panel. When clicked, the button automatically runs the currently active file. If you have a list of run scenarios already defined, the run button also presents a list of those:
\\n![\\\"Run](\\\"./resources/images/run_debug_menu_button.png\\\")
Run in debug mode indicates that you want to run the current code through the debugger. Auto show & hide debug tools will reveal (or collapse) the debugging tools panel described below. You can also work with this presentation by going to , and configuring the debugger there.
\\nEvery time you run a project, the console expands to reveal output from your program. If you're launching a server, Cloud9 provides you with a URL to access the project. Otherwise, any statements sent by your application's print statements (like console.log() for Javascript, print for Python, or puts for Ruby) are also shown here. For example:![\\\"Console](\\\"./resources/images/runOutput.png\\\")
Setting up a project to debug is done in very much the same way as running your code. The only difference is that you must click on the run settings icon in the Run panel ![\\\"Run](\\\"./resources/icons/runSettingsIcon.png\\\"){kind=icon}
and select Run in debug mode. Similarly, you can select Run in debug mode from the run button.
Initially, the only difference this will make is the expansion of the debugging toolbar to the right of the editor:![\\\"The](\\\"./resources/images/tool_bar.png\\\")
This toolbar, however, grants you the following capabilities:
\\n| Toolbar Icon | \\nDebugging Function | \\nDescription | \\n
|---|---|---|
![\\\"Debugging](\\\"./resources/icons/debug_navigation.png\\\"){kind=icon} | \\n Debugging Navigation | \\nThis is a set of tools you can use to move around your code while debugging. You can step into, over, and out of your code, or simply press play to run the process until the next breakpoint. | \\n
![\\\"Icon](\\\"./resources/icons/callStackIcon.png\\\"){kind=icon} | \\n Callstack | \\nThis is a structured list of information about the sequences of your code--basically, which functions are calling what, and where you are in the current process. It also stores local variables and function arguments, if present. You can use this feature to check how your code is running:![\\\"Callstack](\\\"./resources/images/callStack.png\\\") | \\n
![\\\"Icon](\\\"./resources/icons/interactiveIcon.png\\\"){kind=icon} | \\n Interactive Mode | \\nLets you evaluate a piece of code, such as expressions or the values and properties of variables. The text field allows you to type any code you want, in case you discover a way to fix you problem:\\n![\\\"Interactive](\\\"./resources/images/interactiveMenu.png\\\") | \\n
![\\\"Icon](\\\"./resources/icons/variablesIcon.png\\\"){kind=icon} | \\n Variable Inspection | \\nThis shows all the related variables (including functions) that are present in the current context:\\n![\\\"Variable](\\\"./resources/images/variablesMenu.png\\\") | \\n
![\\\"Icon](\\\"./resources/icons/breakpointsIcon.png\\\"){kind=icon} | \\n Breakpoint List | \\nAt any point during your coding or debugging session, you can click on the gutter to apply a breakpoint: ![\\\"Breakpoint](\\\"./resources/icons/breakpoint.png\\\"){kind=icon} . When debugging your code, the process pauses at your established breakpoints, so that you can inspect closely what's going on in a certain part of the code. You can click on the breakpoint list to view all the breakpoints in your workspace. If you click on the checkbox, you can enable or disable a breakpoint as well. You can also click on a breakpoint in the gutter to disable or enable it. | \\n
While debugging, you also have the power of the live inspector. While hovering over a piece of code in the editor, you'll instantly get some floating text that describes the values of that variable, similar to Variable Inspection.![\\\"Live](\\\"./resources/images/debugLiveInspector.png\\\")
While using Cloud9 IDE, you have access to the Python runtime. Accessing the command is no different than the way you'd use Python on your computer; just open the command line and type python. Currently, we run version 2.6.6.
To run a Python program that you've created, you can either:
\\npython, followed by the name of your program; for example python hello_world.pyAs a quick demonstration, open a new file, and paste this Python code into it:
\\n#!/usr/bin/python\\n\\nprint \\\"Hello World!\\\";When you hit the button in the menu bar, the console will print out Hello World!.
Cloud9 IDE doesn't provide out-of-the-box support for the Go language, but with \\na few quick steps you can set up Cloud9 to build and run apps in Go!
\\nFirst, create a new Custom workspace and call it whatever you want:
\\n![\\\"Create](\\\"./resources/images/createNewCustomWorkspace.png\\\")
After your new workspace is created, click the "start editing" button. At the \\nbottom of your workspace you will see the Terminal. If you prefer to have it\\nfullscreen, you can launch a terminal tab by pressing Alt-T, or from the menu: \\n.
\\nFrom the terminal you can install & setup everything on the underlying virtual \\nenvironment that every workspace is provided with.
\\nWhen you first enter your Terminal, you will be in your workspace root folder, \\nwhich is a number such as ~/562166. Make a note of this directory name, as \\nyou'll need it later.
Let's use your home directory to download the Go distribution; to get there, \\nsimply enter the following in the Terminal:
\\ncd ..To download the Go distribution enter the following:
\\nwget https://go.googlecode.com/files/go1.1.1.linux-amd64.tar.gzAfter the download is complete, extract the archive:
\\ntar -xzf go1.1.1.linux-amd64.tar.gzOnce the extraction is done, you will notice a new go directory in your home \\ndirectory. Feel free to delete the archive file you downloaded.
The last step is to configure the environment so it can see the Go distribution \\nas well as our workspace Go files. To do this, edit your bash configuration \\nin the Terminal using vim (or emacs, nano, any simple editor will do):
\\nvim ~/.bashrcAdd the following lines to your .bashrc file:
\\n# setup go configuration \\nexport GOROOT=$HOME/go \\nexport PATH=$PATH:$GOROOT/bin \\n\\n# setup workspace t\\nexport GOPATH=$HOME/562166 \\nexport PATH=$PATH:$GOPATH/binUpdate the GOPATH line above to use the workspace directory you noted earlier \\n(so don't use $HOME/562166).
After you save your .bashrc file, load the new settings:
\\nsource ~/.bashrcThat's it! You should be good to Go (pun intended).
\\nMany times your app returns errors which are hard to understand and even harder to resolve. This is where the Terminal Monitor comes in.\\nThe following video gives a quick overview of the features and how the Terminal Monitor helps you write better apps.
\\n\\n\\nIf you would like to propose additions or help which Terminal Monitor should provide, please send a message to support@c9.io
\\n\\nWhile using Cloud9 IDE, you have access to the Ruby runtime. Accessing the command is no different than the way you'd use Ruby on your computer; just open the command line and type ruby. Currently, the default version is 1.9.3.
To run a Ruby program that you've created, you can either:
\\nruby, followed by the name of your program; for example ruby hello_world.rbAs a quick demonstration, open a new file, and paste this Ruby code into it:
\\n#!/usr/bin/ruby\\n\\nputs 'Hello world'When you hit the button in the menu bar, the console will print out Hello world.
We have rudimentary support for rvm, that allows you only to switch between versions 1.8.7 and 1.9.3. We don't support rvm per-project or global gemsets.
To use rvm, open the terminal and type:
# to switch to version 1.8.7\\nrvm use 1.8\\nrvm use 1.8.7 \\n\\n# to switch to version 1.9.3\\nrvm use 1.9\\nrvm use 1.9.3However, if you like, you can install the "real" rvm by executing the following command in the terminal:
curl -L https://get.rvm.io | bash -s stableTo grab the latest rvm AND the latest Ruby version, type:
curl -L https://get.rvm.io | bash -s stable --rubyCloud9 supports three types of workspaces:
\\nIn this article, we'll walk you through the creation of a new workspace and describe the choices you encounter.
\\nThe first step for creating a new workspace is click the "CREATE NEW WORKSPACE" button in your Dashboard:
\\n
At this point, you'll encounter two choices: Create a new workspace and Clone from URL. Here's what they mean:
\\nAfter clicking on Create a new workspace, you're taken to the screen below:
\\n
First, let's enter a workspace name.\\nDepending on whether you have a Free of Premium account, you can choose to make it either Public (open to anyone with the URL), or Private (only accessible to you and people you share it with).
\\nAfter this, choose the type of workspace you want to create:
\\nsudo powers! This is the best choice for most people, and we've included some more info about it below.Make a choice for the type of workspace and press Create. That's it! You can now see your new workspace in the dashboard:
\\n
Now, just click Start Editing to get started!
\\nChoose this workspace type to start from scratch with a 'Custom' workspace, or simply pick a pre-configured environment like Node.js, WordPress, or Python/Django, and immediately start developing your app.\\nThis way you don't need to spend valuable development time on system setup and maintenance, as we maintain it, and you control it.
\\n
As it's powered by a full Linux Ubuntu environment, hosted workspaces allow you to install any package (sudo apt-get install package), run git commands from the console to push your changes to a GitHub repo or a Bitbucket git repo, etcetera.
The second option for creating a new workspace is to clone one from URL. The URL would be, for example, the URL of a GitHub workspace.
\\nIn fact, let's clone a workspace. When you click on Clone from URL, you're taken to this screen:
\\n![\\\"Options](\\\"./resources/images/cloneWorkspaceOptions.png\\\")
Paste the following GitHub URL in the textbox labeled Source URL: https://github.com/mattpardee/geekdots
\\nIf you have a premium account, you can choose who has access to your workspace. For regular users, the new workspace will be public.
\\nNow, check out the workspace. It will be created under My Workspaces. You can now start editing it!
\\nNow that you know how to create a workspace, you should also learn how to delete one. Look at the far right side of your dashboard:
\\n![\\\"Delete](\\\"./resources/images/deleteWorkspace.png\\\")
Clicking on the Delete button prompts the IDE to ask for confirmation:![\\\"Confirmation](\\\"./resources/images/deleteConfirmation.png\\\")
This is your last chance to change your mind. Once you have typed delete in the textbox and pressed the red button, your workspace will be gone forever from Cloud9. If you are sure you want to delete your workspace, go ahead and press the red button. Of course, if your workspace is hosted elsewhere, like on another git or FTP server, it still exists in those repositories.
\\n\\nIn this article, we'll show you how to set up an FTP project.
\\nTo create an FTP project, go to the Dashboard and click on the next to MY PROJECTS. Choose the option to Create a new project (see "Creating a New Project" if you need to review the steps to create a new project):
In the pop-up window that appears, select FTP for the project type:
\\n![\\\"FTP](\\\"./resources/images/FTPoptions.png\\\")
Let's review the options available for your FTP project:
\\n/) path. Otherwise, it'll be set to a relative path, and Cloud9 assumes that you want to start from the folder your FTP server leaves you after login (home or default folder).Fill in your FTP details and click the Login Test to verify that the settings are correct. If the test succeeds, go ahead and click Create to create your FTP project. You'll then see your project in the Dashboard under My Projects:
\\n![\\\"New](\\\"./resources/images/newFtpWorkspace.png\\\")
When your new FTP project is selected, you will see three buttons: Start Editing, FTP settings, and Delete (on the far right). FTP settings gives you access to the settings you just filled in, as well as the login test. This is useful to use in case your login credentials have changed.
\\nTo get started with your FTP project, click on the Start Editing button. You'll be taken to the editor. Under Project Files, you should see the files from the FTP server in the directory you selected (either your home/default folder or the location indicated by the Initial Path, if you set it). The editor for FTP projects works the same as in other projects: you can create and edit your files in the usual way. The main difference is the FTP log at the bottom of the page (where the console is usually located for other non-FTP projects).
\\nThe FTP log displays output related to the interaction with the FTP server. The screenshot below, for example, shows what happens when we create a new file called TestFile.txt. The file is created in the FTP server and when I write to it, the contents are transferred.
\\n![\\\"Demonstrating](\\\"./resources/images/FTPlog.png\\\")
Cloud9 IDE was built on top of the Node.js platform, and as such, you have full access to the node runtime. Currently, we support running both version v0.6.x and v0.8.x.
In this section, we'll walk you through the creation of a simple Hello World program. To get started, you'll first need to create a (GitHub or Mercurial) project. If you need a refresher on how to do this, please refer to Creating a New Workspace.
\\nOnce you're in Cloud9, create a new file called server.js. Type the following code in the file:
var http = require('http');\\nhttp.createServer(function (req, res) {\\n res.writeHead(200, {'Content-Type': 'text/plain'});\\n res.end('Hello World\\\\n');\\n}).listen(process.env.PORT, process.env.IP);This is a Node.js HTTP server. It returns a simple "Hello World" page every time you access the page. In short, you are creating an HTTP server with a callback function that is called for each request.
\\nIn the callback function, you create a response with a status code of 200 (indicating that the request was fulfilled successfully) and the message "Hello World". Finally, you specify which port and IP address the server runs on. When Cloud9 IDE runs servers, you set and retrieve the IP address and port number with the process.env.IP and process.env.PORT variables.
When you hit the button in the menu bar, the console will print out the following message:
To see your application in action, click on the link created for your project. You should see your "Hello World" application open up in a new browser tab:![\\\"Node.js](\\\"./resources/images/helloWorld.png\\\")
.
We have rudimentary support for nvm, that allows you only to switch between Node.js versions 0.6.21 and 0.8.x.
To use nvm, open the terminal and type:
# to switch to version 0.6.21\\nnvm use v0.67 \\n\\n# to switch to the latest 0.8.x\\nnvm use v0.8With Cloud9 IDE, you can run your PHP pages, without relying on a third-party system like Apache hosting. We run PHP version 5.3.3.
\\nYou can choose to run PHP scripts via the command line, by typing php, followed by the name of your PHP file. However, this is not a very common use case. Most likely, you'll be running your own server and hosting PHP files.
Here's a simple demonstration. First, create a PHP file called hello_world.php, and paste this code into it:
\\n<html>\\n <head>\\n <title>PHP Test</title>\\n </head>\\n <body>\\n <?php echo '<p>Hello World</p>'; ?> \\n </body>\\n</html>Next, open the Run & Debug panel, at the left of the IDE. From the Runtime dropdown, select Apache+PHP. Then, click on the button in the top menu bar.
The console should now spit out a message about how your Apache server is running, something similar to this:
\\nRunning Apache Process\\nTip: you can access long running processes, like a server, at 'http://php_hello.gjtorikian.c9.io'.Clicking on that link gets you to your PHP page. For a more in-depth workflow, see the article on running WordPress entirely on Cloud9.
\\nYou can configure your PHP installation by editing the php.ini located in the /home/ubuntu/workspace directory. Please note: in some cases php.ini is located somewhere else. Just create a simple PHP file running phpinfo() to find out where to look for php.ini.
Make sure to restart Apache after you have applied your changes
\\napachectl restartBitbucket is a code-hosting services that offers both git and mercurial support. Projects can be listed as private or public, absolutely free. For more information on Bitbucket, visit https://bitbucket.org.
\\nWe have integrated Bitbucket into the IDE to enable you to easily work on your public and private repositories. The following article explains how you can activate your Bitbucket account in Cloud9 IDE.
\\nYou can manage your add-on services from your user profile that you can find in the dashboard. When you have just signed in, click Your Account on the top of the left-side panel. Here, you can change the settings of your account. At the bottom, you'll see a list of add-on services that are integrated into Cloud9 IDE. Click activate on the Bitbucket button:
\\n![\\\"Add-on](\\\"./resources/images/addonServices.png\\\")
A new window will pop-up on your screen. This window asks you to give authorization permission for the Cloud9 IDE application to interact in various ways with Bitbucket:
\\n![\\\"Bitbucket](\\\"./resources/images/bitbucketAuthorization.png\\\")
To finalize the activation, click on Allow. Next, you're redirected to your account page, where you'll notice that your Bitbucket account is activated. You can deactivate Bitbucket by simply clicking deactivate, which may be useful when you want to link your Bitbucket account to another Cloud9 account.
\\nNow that you have activated Bitbucket, you can start to create and manage your projects!
\\nThere are several ways to manage Bitbucket projects in Cloud9 IDE:
\\nNew projects are created from the dashboard. In the left-side panel, click on the to add a new project:
A new window will pop-up in which you can change your settings to your preferences:
\\n
After you click CREATE, the project is listed in your dashboard. Select the project to see its Project Profile, where you can start editing: ![\\\"Start](\\\"./resources/icons/startEditing.png\\\"){kind=icon}
There are a couple of things you should do first, before you can use all of git's power. First, you'll want to add a remote to the project. From the Cloud9 IDE command line, you can execute the following commands:
\\ngit remote add [remote name] [remote url]remote url is the location of the project on Bitbucket; for example 'origin git@bitbucket.org:username/repository_name.git'. You'll have to create a Bitbucket project first in order to generate this URL. Adding a remote URL lets you freely push and pull your project.
Next, create a few new files inside your project. By default, you should already have a README.md. You can add these files to git with the following command:
\\ngit add [file1, file2, file3, ...]Finally, create a commit that you can push to your remote:
\\ngit commit -m 'added new files'Don't forget to push this commit out to Bitbucket:
\\ngit push [remote name] masterTa-da! Your project is developed on Cloud9, and stored in Bitbucket.
\\nYou can also create a project in Cloud9 IDE by cloning it from a URL. Once again, click on the , and select Clone from URL. A new window pops up, asking you:
You can find an examples of a Bitbucket URL on any of their repo description pages:
\\n![\\\"Bitbucket](\\\"./resources/images/bitbucketProjectURL.png\\\")
Paste the URL in the source field and click CHECKOUT. In the left-side panel, you'll see the project and its status turn into "Cloning in Progress". When this process is completed you can open the project and start editing it, just like any other project.
\\nWhen you provide Cloud9 IDE with your Bitbucket credentials, it provides a list of projects you haven't yet imported into the editor:
\\n![\\\"Bitbucket](\\\"./resources/images/bitbucketPendingWorkspaces.png\\\")
From this list, clicking on a project and selecting CLONE TO EDIT brings the repo into the IDE, just as if you cloned it from a URL.
\\n\\nYou have access to an incredibly powerful feature of Cloud9 that we like to call "running your own workspace."
\\nIf you own a server that you can SSH into, you can log into that machine with Cloud9 and work on your projects remotely. To put this into perspective, you could have an entire toolchain set up on this machine--say, make with gcc, or ant with Java--edit the files with Cloud9 IDE, and build your toolchain via the IDE's terminal. Here's a video demonstrating how you could instantly compile a C program using an SSH workspace and Cloud9:
In order to connect Cloud9 with a server you own, you'll need two things:
\\necho $OPENSHIFT_INTERNAL_IP and echo $OPENSHIFT_INTERNAL_PORT into the console. You can use this information to open any blocked connections.\\n\\nOnce you've got those requirements set up, here's how you can create an SSH workspace of your own:
\\nIn the Projects tab on the Dashboard, click on the next to MY PROJECTS and choose the option to Create a new project (see "Creating a New Project" if you need to review the steps to create a new project):
In the pop-up window that appears, select SSH for the project type:![\\\"SSH](\\\"./resources/images/SSHoptions.png\\\")
You don't need to fill out every option provided by the dialog. Let's review what they are:
\\nwhich node, to see the full path/) path. Otherwise, it'll be set to a relative path, and Cloud9 assumes that you want to start from the folder your SSH server leaves you after login (usually the home or default folder).Fill in your SSH details and click the Login Test to verify that the settings are correct. If the test succeeds, go ahead and click Create to create your SSH connection. You'll then see your project in the Dashboard under My Projects:\\n![\\\"New](\\\"./resources/images/newSshWorkspace.png\\\")
When your new SSH is selected, you will see three buttons: Start Editing, SSH settings, and Delete (on the far right). SSH settings gives you access to the settings you just filled in, as well as the login test. This is useful to use in case your login credentials have changed.
\\nTo get started with your SSH project, click on the Start Editing button. You'll instantly be taken to the editor, and have full access to your server's resources. As you can see in the video above, this means you can do exciting things like compiling C programs.
\\n\\nTo connect Cloud9 to a server via SSH, we first need to install a few dependencies on your system. \\nThis is done by an open-source installer which you can find here.
\\nUsually the installation should succeed without any issues, but on some systems you will need to install a few dependencies manually. See below for common dependency issues you might run into.
\\ncurl -O https://www.python.org/ftp/python/2.7.6/Python-2.7.6.tar.xz\\ntar xf Python-2.7.6.tar.xz\\ncd Python-2.7.6\\n./configure --prefix=/usr/local\\nmake && make altinstallTo get around this issue make sure glibc-static is installed on the machine.
GitHub is a code hosting service which offers you a lot of features to manage your public and private git repositories. For more information about GitHub and how to use it, visit https://github.com.
\\nWe have integrated GitHub into the IDE to enable you to easily work on your public and private Git repositories. The following article explains how you can activate your GitHub account in Cloud9 IDE.
\\nYou can manage your add-on services from your user profile that you can find in the dashboard. When you have just signed in, click Your Account on the top of the left-side panel. Here, you can change the settings of your account. At the bottom, you'll see a list of add-on services that are integrated into Cloud9 IDE. Click activate on the GitHub button:
\\n
A new window will pop-up on your screen. This window asks you to give authorization permission for the Cloud9 IDE application to interact in various ways with GitHub:
\\n![\\\"GitHub](\\\"./resources/images/githubAuthorization.png\\\")
To finalize the activation, click on Allow. Next, you're redirected to your account page, where you'll notice that your GitHub account is activated. You can deactivate GitHub by simply clicking deactivate, which may be useful when you want to link your GitHub account to another Cloud9 account.
\\nNow that you have activated GitHub, you can start to create and manage git projects!
\\nThere are several ways to manage GitHub projects in Cloud9 IDE:
\\nNew projects are created from the dashboard. In the left-side panel, click on the to add a new project:
A new window will pop-up in which you can change your settings to your preferences:
\\n
Select git as your project type. After you click CREATE, the project is listed in your dashboard. Select the project to see its Project Profile, where you can start editing:
There are a couple of things you should do first, before you can use all of git's power. First, you'll want to add a remote to the project. From the Cloud9 IDE command line, you can execute the following commands:
\\ngit remote add [remote name] [remote url]remote url is the location of the project on GitHub; for example 'git@github.com:/ajaxorg/node_chat'. You'll have to create a GitHub project first in order to generate this URL. Adding a remote URL lets you freely push and pull your project.
Next, create a few new files inside your project. By default, you should already have a README.md. You can add these files to git with the following command:
\\ngit add [file1, file2, file3, ...]Finally, create a commit that you can push to your remote:
\\ngit commit -m 'added new files'Don't forget to push this commit out to GitHub:
\\ngit push [remote name] masterTa-da! Your project is developed on Cloud9, and stored in GitHub.
\\nYou can also create a project in Cloud9 IDE by cloning it from a URL. Once again, click on the , and select Clone from URL. A new window pops up, asking you:
You can find an examples of a GitHub URL on any of their repo description pages:
\\n![\\\"GitHub](\\\"./resources/images/githubProjectURL.png\\\")
Paste the URL in the source field and click CHECKOUT. In the left-side panel, you'll see the project and its status turn into "Cloning in Progress". When this process is completed you can open the project and start editing it, just like any other project.
\\nWhen you provide Cloud9 IDE with your GitHub credentials, it provides a list of projects you haven't yet imported into the editor:
\\n![\\\"GitHub](\\\"./resources/images/githubPendingWorkspaces.png\\\")
From this list, clicking on a project and selecting CLONE TO EDIT brings the repo into the IDE, just as if you cloned it from a URL.
\\n\\nGitLab is open source Git management software used by more than 25.000 \\norganizations, see http://gitlab.org/.
\\nGitLab.com offers services for on-premise GitLab installations \\nand free private git repositoring on GitLab Cloud \\nwith unlimited repo's and collaborators.
\\nTo use your on-premise GitLab installation or GitLab Cloud please see \\nthe instructions for cloning from a url.
\\n\\nMySQL is the world's most widely used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.
\nCloud9 IDE does not support installing a MySQL database (yet). As a workaround you can choose to connect your project to a MySQL database hosted elsewhere. Xeround\noffers hosted MySQL instances and have a free tier available for getting started.
\nTest the connection using the following script:
<?php\n\n $database = new mysqli('instanceNo.db.xeround.com', 'username', 'password', 'databasename', 'port');\n\n if($database->connect_errno > 0){\n die ('Database Error' . $database->connect_error); \n }else{\n die ('Connected!');\n }\n ?>Courtesy of Roger Qui of Polycadamy. This guide is elaborately explained in a video tutorial
\n\nThe project bar is located towards the left of the Cloud9 IDE: ![\"The](\"./resources/images/project_bar.png\")
The buttons in the project bar allow you to reveal and hide panels for the IDE. In more detail:
\nClicking on any button expands its menu. Clicking on an expanded menu causes it to collapse, which gives you more room in the IDE to work with.
\n\nCloud9 IDE offers advanced tab features to make working with multiple files easy. By right-clicking on any tab, you'll open up the tab context menu:
\n![\"The](\"./resources/images/tab_context_menu.png\")
These feature include:
\nTo the left of the tab menu is another button that offers additional functions for tab navigation:![\"The](\"./resources/images/tab_button_menu.png\")
Tab sessions is a unique feature that is useful when dealing with projects that involve juggling between many tabs. Essentially, tab sessions lets you save the current state of the tabs. You can close your workspace, switch to a different branch, and instantly reload your previously opened files. You'll no longer need to work with opening and closing multiple files.
\nTo use tab sessions, select Save Tab Sessions from the tab button menu. Give it a unique name. When you're ready to restore your tab sessions, just select Load Tab Sessions.
\nIf you find that you've got too many tab sessions defined, you can always choose to delete them from the same tab menu.
\n\nThe status bar is designed to provide you with all sorts of information about your code--and additional functionality--without getting in the way of the IDE. It's quite tiny, and quite powerful, like a weight-lifting squirrel.
\nYou can find the status bar in the lower-right corner of the editor: ![\"The](\"./resources/icons/statusBarCollapsed.png\"){kind=icon}
. Keep in mind that the status bar is transparent, so it's able to camoflauge well with light or dark themes.
There's three pieces of crucial information available at all times: your current row, your current column, and, if you're highlighting characters, the status bar displays the number of bytes currently selected. If you're using Vim Mode, the status bar also tells you if you're in INSERT mode.
\nIf you click on the status bar, it expands into a menu that provides a smaller set of the full IDE preferences. These options only deal with the IDE editor:
\n| Preference Name | \nDescription | \n
|---|---|
| Show Invisibles | \nShows invisibles characters in the editor, like tabs and line breaks | \n
| Wraps Lines | \nWraps lines according to the line margin defined, or your browser's window. Otherwise, lines run off the current viewport. | \n
| Code Folding | \nWhen enabled, allows you to show or hide "blocks" of code | \n
| Full Line Selection | \nWhen highlighting lines, this option will highlight all ending whitespace, until the end of the editor window | \n
| Highlight Active Line | \nPresents a darker shade in the code editor to indicate which line you're currently on | \n
| Show Indent Guides | \nShows the indent guides in the editor, letting you see your code's nestings | \n
| Show Gutter | \nShows the gutter in the editor, which indicates line numbers, warnings, and errors | \n
| Highlight Selected Word | \nIf you highlight a word, this highlights all matching words in the editor | \n
| Auto-pair Quotes, Brackets, etc. | \nWhen enabled, typing ", (, or [ will actually make two characters appear. In addition, whenever you highlight a word and type one of these characters, it is surrounded by that character (e.g. words becomes "words") | \n
| Auto-hide Horizontal Scrollbar | \nhen this is enabled, this will hide the horizontal scroll bar in the editor. Note that this has no effect in Mac OS X 10.7 (Lion) and above, since all scrollbars, by default, auto-hide. | \n
| Font Size | \nChanges the font size of the code in the editor | \n
| Show Print Margin | \nShows (and defines) the number of characters possible in line, before it wraps | \n
| Soft Tabs | \nIndicates how many spaces a single tab represents | \n
| Mouse Scroll Speed | \nDefines the speed of the mouse scrolls | \n
MySQL is the world's most widely used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.
\nThis article explains our first iteration of MySQL support in Cloud9. It makes it super easy to install, start and stop a MySQL instance right in your workspace. The nice thing is that every workspace will run a separate database so your projects will never interfere with each other. You can control MySQL with the mysql-ctl command line tool run from the terminal:
# start MySQL. Will create an empty database on first start\n$ mysql-ctl start\n\n# stop MySQL\n$ mysql-ctl stop\n\n# run the MySQL interactive shell\n$ mysql-ctl cliYou can then connect to the database with following parameters:
\n| Option\n | Value\n | Comment\n |
|---|---|---|
Hostname | \n $IP | \n The same local IP as the application you run on Cloud9 | \n
Port | \n 3306 | \n The default MySQL port number | \n
User | \n $C9_USER | \n Your Cloud9 user name | \n
Password | \n - | \nNo password since you can only access the DB from within the workspace | \n
Database | \n c9 | \n The database name | \n
To import existing data into your database run following commands:
\nmysql-ctl cliYou are now in the MySQL environment and can start the import:
\nmysql> use c9\nmysql> source PATH_TO_SQL_FILE.sqlTo verify that everything got imported run:
\nmysql> show tables;Sometimes you run into issues when you run your project. Here you will find the most common issues and how to solve them.
\nThe most common reason for an error thrown by your app stating that a port or address is in use is the fact that some process is already running/listening on that port/address. You need to take a look for those and kill the processes conflicting with your app:
\n// Find the process\nlsof -i tcp:$PORTIf any relevant process is running you will get a list looking like this:
\nCOMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME\napache2 699 ubuntu 4u IPv6 83213152 0t0 TCP *:http-alt (LISTEN)You now can kill that proccess. Make sure you replace PID with the ID of the process.
\n// Kill the process\nkill -9 PIDFor the console wizards:
\nkill -9 $(lsof -i:$PORT -t)MongoDB is a scalable, high-performance, open source NoSQL database.
\nDocument-Oriented Storage
\nJSON-style documents with dynamic schemas offer simplicity and power.
Full Index Support
\nIndex on any attribute, just like you're used to.
Querying
\nRich, document-based queries.
In addition, MongoDB has many scalability features such as:
\nReplication, Auto-sharding, Map/Reduce and GridFS
\nMongoDB is preinstalled in your workspace. To run MongoDB, run the following below (passing the correct parameters to it). Mongodb data will be stored in the folder data.
$ mkdir data\n$ echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest \"$@\"' > mongod\n$ chmod a+x mongodYou can start mongodb by running the mongod script on your project root:
\n$ ./mongod
| Parameter | Description |\n| ------------------------------ | ----------------------------------------------------------------------------------------------- |\n| --dbpath=data | Because it defaults to /var/db which isn't accessible) |\n| --nojournal | Because mongodb usually pre-allocates 2 GB journal file (which exceeds Cloud9 disk space quota) |\n| --bind_ip=$IP | Because you can't bind to 0.0.0.0) |\n| --rest | Runs on default port 28017 |
You should use the host $IP instead of localhost as your driver connection url.
\ne.g. in Node, it is: process.env.IP
MongoDB has drivers for all supported runtimes. Following are the most commonly used drivers:
\nTo access a shell prompt for the above MongoDB run the following.
\n$ mongoCheck out docs.mongodb.org for details on how to use the shell
\n\nFor this tutorial, we'll show you how to create and run a CoffeeScript project, entirely within the Cloud9 IDE. To run any coffeescript project, you'll need to first make sure to install the coffeescript module via the Node Package Manager (npm). We're going to walk you through how to do that with a sample project.
First, create a new project. Then, in the console, enter the following command:
\ngit clone git://github.com/fjakobs/cloud9-coffeescript-example.gitThis is a sample CoffeeScript application written by one of our developers. After cloning the project, you'll find three different files in the project tree: server.js, app.coffee, and README.md.
\nThe README.md file contains instructions to install coffee-script using npm. We've integrated Node Package Manager into Cloud9 IDE to enable users to install Node programs. Thus, from the Cloud9 IDE command line, type the following command to install the Coffeescript module:
\nnpm install coffee-scriptNext, let's have a look at the server.js file. The first line is the require() function, which is used to load the coffee-script module that you have just installed. On the second line, we declare the CoffeeScript file that contains your application. In the last line, we specify the port the server is listening to. When projects run within Cloud9 IDE, you must retrieve the port information using process.env.PORT.
Now, let's look at what the CoffeeScript file does. It creates an HTTP server with a function that is called for each request. In the callback function, you create a response with a status code of 200 (indicating that the request was fulfilled successfully) and the message "Hello World". You use module.exports to enable the server.js file to use the code in the CoffeeScript file:
http = require \"http\"\n\nmodule.exports = http.createServer((req, res) ->\n res.writeHead 200, 'Content-Type': 'text/plain'\n res.end 'Hello World\\n'Next, run the server.js file and open the URL indicated in the console:
\n![\"Messages](\"./resources/images/consoleServerMessage.png\")
The result is:
\n![\"The](\"./resources/images/coffeescriptServer.png\")
To stop your application, go back to the editor and click on the ![\"Icon](\"./resources/icons/stop_button.png\"){kind=icon}
button in the Menu Bar.
Did you know that you can use Cloud9 IDE to work on your WordPress website? It's true, and incredibly easy. You can't edit your posts on WordPress using Cloud9, since they are stored in a database on your server. But you can edit pretty much every other aspect of your site.
\nTo start, you'll need to create a new FTP project. After that, enter your wp-content folder, find the theme you're using on your website, and start editing its style.
\nThanks to the preview button in the menu bar, you can also witness your changes as they happen, before committing them to your server.
\n\nPostgreSQL comes preinstalled on every Cloud9 workspace, yay.
\n$ sudo service postgresql start$ sudo sudo -u postgres psql \npsql (9.3.4, server 9.3.5)\nType \"help\" for help.\n\npostgres=# \\password\nEnter new password: \nEnter it again: \npostgres=# \\q$ sudo sudo -u postgres psql Make sure you have logged into the PostgreSQL terminal and then you can just run:
\n$ sudo sudo -u postgres psql \npostgres=# create database \"groceries\";$ sudo sudo -u postgres psql \npostgres=# \\listSince Cloud9 IDE is built on top of Node.js, we also leverage the module system NPM. In Cloud9, you can install any npm package either locally or globally. Note that due to security restrictions, modules installed globally can only be used in the project they were installed from. In other words, while you have access to any command line tools installed by the module, they are bound to the project, not your username. We run version 1.1.24 of npm.
\nTo demonstrate the power of NPM, we'll build and run a quick express server:
\nnpm install express, and wait for the npm install process to complete.var express = require('express'),\n app = express();\n\napp.use(express.logger());\n\napp.get('/', function(req, res){\n res.send('Hello World');\n});\n\napp.listen(process.env.PORT);\nconsole.log('Express server started on port %s', process.env.PORT);To launch your express server, click on the ![\"The](\"./resources/icons/runButton.png\"){kind=icon}
button in the menu bar.
Cloud9 supports the installation of Python packages for applications that need to go beyond the standard library set. Every workspace has version 0.6.10 of Python's easy_install package manager. For more information on this module, see the official easy_install documentation.
Let's try installing a package. First, type the following in the console:
\neasy_install markdownThis installs the markdown Python package to your workspace. You won't see the package installed in the directory tree, because it's kept deep within your project's the Python libs.
Next, create a new Python script, and add these lines of code:
\nimport markdown\n\nhtml = markdown.markdown(\"# HELLO THERE!\")\n\nprint htmlAfter clicking run, the console will correctly print out <h1>HELLO THERE!</h1>.
You have access to all of the functionality easy_install provides you. For example, you can open up the Python REPL and type the following to see a list of your installed packages:
>>> help('modules')Cloud9 workspaces come with redis pre-installed.
\nStart the server:
\nsudo service redis-server startConnect with the client:
\n./redis-cliSee http://redis.io/clients for drivers.
\n\nSQLite is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. SQLite is the most widely deployed SQL database engine in the world. The source code for SQLite is in the public domain.
\nYou can open the terminal and create a database in a file db_test.db as follows:
![\"Screenshot](\"./resources/images/sqlite3_simple_db.png\")
$ sqlite3 db_test.db\nSQLite version 3.6.20\nEnter \".help\" for instructions\nEnter SQL statements terminated with a \";\"\nsqlite> create table tbl1(one varchar(10), two smallint);\nsqlite> insert into tbl1 values('hello!',10);\nsqlite> insert into tbl1 values('goodbye', 20);\nsqlite> select * from tbl1;\nhello!|10\ngoodbye|20\nsqlite> CREATE TABLE tbl2 (\n ...> f1 varchar(30) primary key,\n ...> f2 text,\n ...> f3 real\n ...> );\nsqlite> .exitTo get to know sqlite commands, use the command: .help.
To exit sqlite, use the command: .exit.
SQLite has drivers for all supported runtimes.
\nFollowing are the most commonly used drivers:
\nIn your Gemfile, include the line:
gem 'sqlite3'and in configs/database.yml, make sure you use:
adapter: sqlite3\ndatabase: db/development.dbCloud9 IDE also supports the ability to run a Rails application. The rails command is only available on the terminal.
To run a rails application:
\ngem install railsrails new example -d mysqlconfigs/database.ymlrails s -b $IP -p $PORTThat's it! Your rails app will now be running.
\nDo not try to access the project through the IP address and port number rails returns to you--it won't work!
\nSetup MySQl - note your DB connect parameters
\nedit configs/database.yml
development:\n adapter: mysql2\n encoding: utf8\n database: c9\n username: <%=ENV['C9_USER']%>\n host: <%=ENV['IP']%>Cloud9 supports the installation of Ruby gems in your workspace using the RubyGems package manager. The current installed RubyGems version is 1.3.7. For more information on the gem command, see the official RubyGems documentation.
Let's try installing a gem. First, type the following in the console:
\ngem install progressbarThis installs the progressbar Ruby gem to your workspace. You won't see the gem installed in the directory tree, because it's kept deep within your project's the Ruby libs.
Next, create a new Ruby script, and add these lines of code:
\nrequire 'progressbar'\n\nbar = ProgressBar.new(\"Example progress\", 50)\ntotal = 0\nuntil total >= 100\n sleep(rand(2)/2.0)\n increment = (rand(6) + 3)\n bar.inc(increment)\n total += increment\nendAfter clicking run, the console will start printing out an ASCII progressbar.
\nYou have access to all of the functionality gem provides you. For example, you can open up the console and type gem query to see a list of your installed gems.
WordPress is web software you can use to create websites or blogs.\nYou can develop and host WordPress websites entirely on Cloud9 IDE
\nCreate a WordPress workspace from the WordPress template on your Cloud9 dashboard
\nIn order to run WordPress, you need a database to host your posts, articles, etc.
\nYou can use MySQL with our utility script mysql-ctl as explained in MySQL Setup
\nTo start MySQL server and create the required database, type in the terminal:
\nmysql-ctl startOpen index.php in your workspace root and click the Run button
You can check the generated config for you In wp-config.php (you don't need to change anything there)
\ndefine('DB_NAME', 'c9');\ndefine('DB_USER', getenv('C9_USER'));\ndefine('DB_PASSWORD', '');\ndefine('DB_HOST', getenv('IP'));\ndefine('WP_SITEURL', 'http://' . getenv('C9_PROJECT') . '.' . getenv('C9_USER') . '.c9.io');Cloud9 IDE provides several ways to run and debug your code. We'll explore each of them in this section of the documentation.
\nThe following information applies to all of the above programming languages.
\nRunning your code in Cloud9 is really easy. First, open the file you want to run. Usually, this file is going to be the main entry point to your app; for example, if you're creating a server, you'd want to run the file that actually instantiates that server.
\nThere are two ways to run your code: either through the Run Panel, or through the run button in the menu bar.
\nNext, click on the Run button in the project bar. You'll notice immediately that your active file is already available to run. Just double-click on the file, and you'll launch your app.
\nWhen you're ready to stop your app, click on the button in the menu bar at any time.
At the bottom of the run panel, you'll notice a few more options you can set. Filling these textboxes out creates a run scenario, which is like setting up some configurations for the way your code runs. These options are:
\nOf course, you can also save your run scenarios; just click on the add button at the top of the panel. When you're ready to run a scenario, click on its name in the Run panel list. To remove a run scenario, click on its name in the run panel list, and then click on the remove button.
\nThe run button in the menu bar acts as a sort of short cut to the Run panel. When clicked, the button automatically runs the currently active file. If you have a list of run scenarios already defined, the run button also presents a list of those:
\n![\"Run](\"./resources/images/run_debug_menu_button.png\")
Run in debug mode indicates that you want to run the current code through the debugger. Auto show & hide debug tools will reveal (or collapse) the debugging tools panel described below. You can also work with this presentation by going to , and configuring the debugger there.
\nEvery time you run a project, the console expands to reveal output from your program. If you're launching a server, Cloud9 provides you with a URL to access the project. Otherwise, any statements sent by your application's print statements (like console.log() for Javascript, print for Python, or puts for Ruby) are also shown here. For example:![\"Console](\"./resources/images/runOutput.png\")
Setting up a project to debug is done in very much the same way as running your code. The only difference is that you must click on the run settings icon in the Run panel ![\"Run](\"./resources/icons/runSettingsIcon.png\"){kind=icon}
and select Run in debug mode. Similarly, you can select Run in debug mode from the run button.
Initially, the only difference this will make is the expansion of the debugging toolbar to the right of the editor:![\"The](\"./resources/images/tool_bar.png\")
This toolbar, however, grants you the following capabilities:
\n| Toolbar Icon | \nDebugging Function | \nDescription | \n
|---|---|---|
![\"Debugging](\"./resources/icons/debug_navigation.png\"){kind=icon} | \n Debugging Navigation | \nThis is a set of tools you can use to move around your code while debugging. You can step into, over, and out of your code, or simply press play to run the process until the next breakpoint. | \n
![\"Icon](\"./resources/icons/callStackIcon.png\"){kind=icon} | \n Callstack | \nThis is a structured list of information about the sequences of your code--basically, which functions are calling what, and where you are in the current process. It also stores local variables and function arguments, if present. You can use this feature to check how your code is running:![\"Callstack](\"./resources/images/callStack.png\") | \n
![\"Icon](\"./resources/icons/interactiveIcon.png\"){kind=icon} | \n Interactive Mode | \nLets you evaluate a piece of code, such as expressions or the values and properties of variables. The text field allows you to type any code you want, in case you discover a way to fix you problem:\n![\"Interactive](\"./resources/images/interactiveMenu.png\") | \n
![\"Icon](\"./resources/icons/variablesIcon.png\"){kind=icon} | \n Variable Inspection | \nThis shows all the related variables (including functions) that are present in the current context:\n![\"Variable](\"./resources/images/variablesMenu.png\") | \n
![\"Icon](\"./resources/icons/breakpointsIcon.png\"){kind=icon} | \n Breakpoint List | \nAt any point during your coding or debugging session, you can click on the gutter to apply a breakpoint: ![\"Breakpoint](\"./resources/icons/breakpoint.png\"){kind=icon} . When debugging your code, the process pauses at your established breakpoints, so that you can inspect closely what's going on in a certain part of the code. You can click on the breakpoint list to view all the breakpoints in your workspace. If you click on the checkbox, you can enable or disable a breakpoint as well. You can also click on a breakpoint in the gutter to disable or enable it. | \n
While debugging, you also have the power of the live inspector. While hovering over a piece of code in the editor, you'll instantly get some floating text that describes the values of that variable, similar to Variable Inspection.![\"Live](\"./resources/images/debugLiveInspector.png\")
While using Cloud9 IDE, you have access to the Python runtime. Accessing the command is no different than the way you'd use Python on your computer; just open the command line and type python. Currently, we run version 2.6.6.
To run a Python program that you've created, you can either:
\npython, followed by the name of your program; for example python hello_world.pyAs a quick demonstration, open a new file, and paste this Python code into it:
\n#!/usr/bin/python\n\nprint \"Hello World!\";When you hit the button in the menu bar, the console will print out Hello World!.
Cloud9 IDE doesn't provide out-of-the-box support for the Go language, but with \na few quick steps you can set up Cloud9 to build and run apps in Go!
\nFirst, create a new Custom workspace and call it whatever you want:
\n![\"Create](\"./resources/images/createNewCustomWorkspace.png\")
After your new workspace is created, click the "start editing" button. At the \nbottom of your workspace you will see the Terminal. If you prefer to have it\nfullscreen, you can launch a terminal tab by pressing Alt-T, or from the menu: \n.
\nFrom the terminal you can install & setup everything on the underlying virtual \nenvironment that every workspace is provided with.
\nWhen you first enter your Terminal, you will be in your workspace root folder, \nwhich is a number such as ~/562166. Make a note of this directory name, as \nyou'll need it later.
Let's use your home directory to download the Go distribution; to get there, \nsimply enter the following in the Terminal:
\ncd ..To download the Go distribution enter the following:
\nwget https://go.googlecode.com/files/go1.1.1.linux-amd64.tar.gzAfter the download is complete, extract the archive:
\ntar -xzf go1.1.1.linux-amd64.tar.gzOnce the extraction is done, you will notice a new go directory in your home \ndirectory. Feel free to delete the archive file you downloaded.
The last step is to configure the environment so it can see the Go distribution \nas well as our workspace Go files. To do this, edit your bash configuration \nin the Terminal using vim (or emacs, nano, any simple editor will do):
\nvim ~/.bashrcAdd the following lines to your .bashrc file:
\n# setup go configuration \nexport GOROOT=$HOME/go \nexport PATH=$PATH:$GOROOT/bin \n\n# setup workspace t\nexport GOPATH=$HOME/562166 \nexport PATH=$PATH:$GOPATH/binUpdate the GOPATH line above to use the workspace directory you noted earlier \n(so don't use $HOME/562166).
After you save your .bashrc file, load the new settings:
\nsource ~/.bashrcThat's it! You should be good to Go (pun intended).
\nMany times your app returns errors which are hard to understand and even harder to resolve. This is where the Terminal Monitor comes in.\nThe following video gives a quick overview of the features and how the Terminal Monitor helps you write better apps.
\n\n\nIf you would like to propose additions or help which Terminal Monitor should provide, please send a message to support@c9.io
\n\nWhile using Cloud9 IDE, you have access to the Ruby runtime. Accessing the command is no different than the way you'd use Ruby on your computer; just open the command line and type ruby. Currently, the default version is 1.9.3.
To run a Ruby program that you've created, you can either:
\nruby, followed by the name of your program; for example ruby hello_world.rbAs a quick demonstration, open a new file, and paste this Ruby code into it:
\n#!/usr/bin/ruby\n\nputs 'Hello world'When you hit the button in the menu bar, the console will print out Hello world.
We have rudimentary support for rvm, that allows you only to switch between versions 1.8.7 and 1.9.3. We don't support rvm per-project or global gemsets.
To use rvm, open the terminal and type:
# to switch to version 1.8.7\nrvm use 1.8\nrvm use 1.8.7 \n\n# to switch to version 1.9.3\nrvm use 1.9\nrvm use 1.9.3However, if you like, you can install the "real" rvm by executing the following command in the terminal:
curl -L https://get.rvm.io | bash -s stableTo grab the latest rvm AND the latest Ruby version, type:
curl -L https://get.rvm.io | bash -s stable --rubyCloud9 supports three types of workspaces:
\nIn this article, we'll walk you through the creation of a new workspace and describe the choices you encounter.
\nThe first step for creating a new workspace is click the "CREATE NEW WORKSPACE" button in your Dashboard:
\n
At this point, you'll encounter two choices: Create a new workspace and Clone from URL. Here's what they mean:
\nAfter clicking on Create a new workspace, you're taken to the screen below:
\n
First, let's enter a workspace name.\nDepending on whether you have a Free of Premium account, you can choose to make it either Public (open to anyone with the URL), or Private (only accessible to you and people you share it with).
\nAfter this, choose the type of workspace you want to create:
\nsudo powers! This is the best choice for most people, and we've included some more info about it below.Make a choice for the type of workspace and press Create. That's it! You can now see your new workspace in the dashboard:
\n
Now, just click Start Editing to get started!
\nChoose this workspace type to start from scratch with a 'Custom' workspace, or simply pick a pre-configured environment like Node.js, WordPress, or Python/Django, and immediately start developing your app.\nThis way you don't need to spend valuable development time on system setup and maintenance, as we maintain it, and you control it.
\n
As it's powered by a full Linux Ubuntu environment, hosted workspaces allow you to install any package (sudo apt-get install package), run git commands from the console to push your changes to a GitHub repo or a Bitbucket git repo, etcetera.
The second option for creating a new workspace is to clone one from URL. The URL would be, for example, the URL of a GitHub workspace.
\nIn fact, let's clone a workspace. When you click on Clone from URL, you're taken to this screen:
\n![\"Options](\"./resources/images/cloneWorkspaceOptions.png\")
Paste the following GitHub URL in the textbox labeled Source URL: https://github.com/mattpardee/geekdots
\nIf you have a premium account, you can choose who has access to your workspace. For regular users, the new workspace will be public.
\nNow, check out the workspace. It will be created under My Workspaces. You can now start editing it!
\nNow that you know how to create a workspace, you should also learn how to delete one. Look at the far right side of your dashboard:
\n![\"Delete](\"./resources/images/deleteWorkspace.png\")
Clicking on the Delete button prompts the IDE to ask for confirmation:![\"Confirmation](\"./resources/images/deleteConfirmation.png\")
This is your last chance to change your mind. Once you have typed delete in the textbox and pressed the red button, your workspace will be gone forever from Cloud9. If you are sure you want to delete your workspace, go ahead and press the red button. Of course, if your workspace is hosted elsewhere, like on another git or FTP server, it still exists in those repositories.
\n\nIn this article, we'll show you how to set up an FTP project.
\nTo create an FTP project, go to the Dashboard and click on the next to MY PROJECTS. Choose the option to Create a new project (see "Creating a New Project" if you need to review the steps to create a new project):
In the pop-up window that appears, select FTP for the project type:
\n![\"FTP](\"./resources/images/FTPoptions.png\")
Let's review the options available for your FTP project:
\n/) path. Otherwise, it'll be set to a relative path, and Cloud9 assumes that you want to start from the folder your FTP server leaves you after login (home or default folder).Fill in your FTP details and click the Login Test to verify that the settings are correct. If the test succeeds, go ahead and click Create to create your FTP project. You'll then see your project in the Dashboard under My Projects:
\n![\"New](\"./resources/images/newFtpWorkspace.png\")
When your new FTP project is selected, you will see three buttons: Start Editing, FTP settings, and Delete (on the far right). FTP settings gives you access to the settings you just filled in, as well as the login test. This is useful to use in case your login credentials have changed.
\nTo get started with your FTP project, click on the Start Editing button. You'll be taken to the editor. Under Project Files, you should see the files from the FTP server in the directory you selected (either your home/default folder or the location indicated by the Initial Path, if you set it). The editor for FTP projects works the same as in other projects: you can create and edit your files in the usual way. The main difference is the FTP log at the bottom of the page (where the console is usually located for other non-FTP projects).
\nThe FTP log displays output related to the interaction with the FTP server. The screenshot below, for example, shows what happens when we create a new file called TestFile.txt. The file is created in the FTP server and when I write to it, the contents are transferred.
\n![\"Demonstrating](\"./resources/images/FTPlog.png\")
Cloud9 IDE was built on top of the Node.js platform, and as such, you have full access to the node runtime. Currently, we support running both version v0.6.x and v0.8.x.
In this section, we'll walk you through the creation of a simple Hello World program. To get started, you'll first need to create a (GitHub or Mercurial) project. If you need a refresher on how to do this, please refer to Creating a New Workspace.
\nOnce you're in Cloud9, create a new file called server.js. Type the following code in the file:
var http = require('http');\nhttp.createServer(function (req, res) {\n res.writeHead(200, {'Content-Type': 'text/plain'});\n res.end('Hello World\\n');\n}).listen(process.env.PORT, process.env.IP);This is a Node.js HTTP server. It returns a simple "Hello World" page every time you access the page. In short, you are creating an HTTP server with a callback function that is called for each request.
\nIn the callback function, you create a response with a status code of 200 (indicating that the request was fulfilled successfully) and the message "Hello World". Finally, you specify which port and IP address the server runs on. When Cloud9 IDE runs servers, you set and retrieve the IP address and port number with the process.env.IP and process.env.PORT variables.
When you hit the button in the menu bar, the console will print out the following message:
To see your application in action, click on the link created for your project. You should see your "Hello World" application open up in a new browser tab:![\"Node.js](\"./resources/images/helloWorld.png\")
.
We have rudimentary support for nvm, that allows you only to switch between Node.js versions 0.6.21 and 0.8.x.
To use nvm, open the terminal and type:
# to switch to version 0.6.21\nnvm use v0.67 \n\n# to switch to the latest 0.8.x\nnvm use v0.8With Cloud9 IDE, you can run your PHP pages, without relying on a third-party system like Apache hosting. We run PHP version 5.3.3.
\nYou can choose to run PHP scripts via the command line, by typing php, followed by the name of your PHP file. However, this is not a very common use case. Most likely, you'll be running your own server and hosting PHP files.
Here's a simple demonstration. First, create a PHP file called hello_world.php, and paste this code into it:
\n<html>\n <head>\n <title>PHP Test</title>\n </head>\n <body>\n <?php echo '<p>Hello World</p>'; ?> \n </body>\n</html>Next, open the Run & Debug panel, at the left of the IDE. From the Runtime dropdown, select Apache+PHP. Then, click on the button in the top menu bar.
The console should now spit out a message about how your Apache server is running, something similar to this:
\nRunning Apache Process\nTip: you can access long running processes, like a server, at 'http://php_hello.gjtorikian.c9.io'.Clicking on that link gets you to your PHP page. For a more in-depth workflow, see the article on running WordPress entirely on Cloud9.
\nYou can configure your PHP installation by editing the php.ini located in the /home/ubuntu/workspace directory. Please note: in some cases php.ini is located somewhere else. Just create a simple PHP file running phpinfo() to find out where to look for php.ini.
Make sure to restart Apache after you have applied your changes
\napachectl restartBitbucket is a code-hosting services that offers both git and mercurial support. Projects can be listed as private or public, absolutely free. For more information on Bitbucket, visit https://bitbucket.org.
\nWe have integrated Bitbucket into the IDE to enable you to easily work on your public and private repositories. The following article explains how you can activate your Bitbucket account in Cloud9 IDE.
\nYou can manage your add-on services from your user profile that you can find in the dashboard. When you have just signed in, click Your Account on the top of the left-side panel. Here, you can change the settings of your account. At the bottom, you'll see a list of add-on services that are integrated into Cloud9 IDE. Click activate on the Bitbucket button:
\n![\"Add-on](\"./resources/images/addonServices.png\")
A new window will pop-up on your screen. This window asks you to give authorization permission for the Cloud9 IDE application to interact in various ways with Bitbucket:
\n![\"Bitbucket](\"./resources/images/bitbucketAuthorization.png\")
To finalize the activation, click on Allow. Next, you're redirected to your account page, where you'll notice that your Bitbucket account is activated. You can deactivate Bitbucket by simply clicking deactivate, which may be useful when you want to link your Bitbucket account to another Cloud9 account.
\nNow that you have activated Bitbucket, you can start to create and manage your projects!
\nThere are several ways to manage Bitbucket projects in Cloud9 IDE:
\nNew projects are created from the dashboard. In the left-side panel, click on the to add a new project:
A new window will pop-up in which you can change your settings to your preferences:
\n
After you click CREATE, the project is listed in your dashboard. Select the project to see its Project Profile, where you can start editing: ![\"Start](\"./resources/icons/startEditing.png\"){kind=icon}
There are a couple of things you should do first, before you can use all of git's power. First, you'll want to add a remote to the project. From the Cloud9 IDE command line, you can execute the following commands:
\ngit remote add [remote name] [remote url]remote url is the location of the project on Bitbucket; for example 'origin git@bitbucket.org:username/repository_name.git'. You'll have to create a Bitbucket project first in order to generate this URL. Adding a remote URL lets you freely push and pull your project.
Next, create a few new files inside your project. By default, you should already have a README.md. You can add these files to git with the following command:
\ngit add [file1, file2, file3, ...]Finally, create a commit that you can push to your remote:
\ngit commit -m 'added new files'Don't forget to push this commit out to Bitbucket:
\ngit push [remote name] masterTa-da! Your project is developed on Cloud9, and stored in Bitbucket.
\nYou can also create a project in Cloud9 IDE by cloning it from a URL. Once again, click on the , and select Clone from URL. A new window pops up, asking you:
You can find an examples of a Bitbucket URL on any of their repo description pages:
\n![\"Bitbucket](\"./resources/images/bitbucketProjectURL.png\")
Paste the URL in the source field and click CHECKOUT. In the left-side panel, you'll see the project and its status turn into "Cloning in Progress". When this process is completed you can open the project and start editing it, just like any other project.
\nWhen you provide Cloud9 IDE with your Bitbucket credentials, it provides a list of projects you haven't yet imported into the editor:
\n![\"Bitbucket](\"./resources/images/bitbucketPendingWorkspaces.png\")
From this list, clicking on a project and selecting CLONE TO EDIT brings the repo into the IDE, just as if you cloned it from a URL.
\n\nYou have access to an incredibly powerful feature of Cloud9 that we like to call "running your own workspace."
\nIf you own a server that you can SSH into, you can log into that machine with Cloud9 and work on your projects remotely. To put this into perspective, you could have an entire toolchain set up on this machine--say, make with gcc, or ant with Java--edit the files with Cloud9 IDE, and build your toolchain via the IDE's terminal. Here's a video demonstrating how you could instantly compile a C program using an SSH workspace and Cloud9:
In order to connect Cloud9 with a server you own, you'll need two things:
\necho $OPENSHIFT_INTERNAL_IP and echo $OPENSHIFT_INTERNAL_PORT into the console. You can use this information to open any blocked connections.\n\nOnce you've got those requirements set up, here's how you can create an SSH workspace of your own:
\nIn the Projects tab on the Dashboard, click on the next to MY PROJECTS and choose the option to Create a new project (see "Creating a New Project" if you need to review the steps to create a new project):
In the pop-up window that appears, select SSH for the project type:![\"SSH](\"./resources/images/SSHoptions.png\")
You don't need to fill out every option provided by the dialog. Let's review what they are:
\nwhich node, to see the full path/) path. Otherwise, it'll be set to a relative path, and Cloud9 assumes that you want to start from the folder your SSH server leaves you after login (usually the home or default folder).Fill in your SSH details and click the Login Test to verify that the settings are correct. If the test succeeds, go ahead and click Create to create your SSH connection. You'll then see your project in the Dashboard under My Projects:\n![\"New](\"./resources/images/newSshWorkspace.png\")
When your new SSH is selected, you will see three buttons: Start Editing, SSH settings, and Delete (on the far right). SSH settings gives you access to the settings you just filled in, as well as the login test. This is useful to use in case your login credentials have changed.
\nTo get started with your SSH project, click on the Start Editing button. You'll instantly be taken to the editor, and have full access to your server's resources. As you can see in the video above, this means you can do exciting things like compiling C programs.
\n\nTo connect Cloud9 to a server via SSH, we first need to install a few dependencies on your system. \nThis is done by an open-source installer which you can find here.
\nUsually the installation should succeed without any issues, but on some systems you will need to install a few dependencies manually. See below for common dependency issues you might run into.
\ncurl -O https://www.python.org/ftp/python/2.7.6/Python-2.7.6.tar.xz\ntar xf Python-2.7.6.tar.xz\ncd Python-2.7.6\n./configure --prefix=/usr/local\nmake && make altinstallTo get around this issue make sure glibc-static is installed on the machine.
GitHub is a code hosting service which offers you a lot of features to manage your public and private git repositories. For more information about GitHub and how to use it, visit https://github.com.
\nWe have integrated GitHub into the IDE to enable you to easily work on your public and private Git repositories. The following article explains how you can activate your GitHub account in Cloud9 IDE.
\nYou can manage your add-on services from your user profile that you can find in the dashboard. When you have just signed in, click Your Account on the top of the left-side panel. Here, you can change the settings of your account. At the bottom, you'll see a list of add-on services that are integrated into Cloud9 IDE. Click activate on the GitHub button:
\n
A new window will pop-up on your screen. This window asks you to give authorization permission for the Cloud9 IDE application to interact in various ways with GitHub:
\n![\"GitHub](\"./resources/images/githubAuthorization.png\")
To finalize the activation, click on Allow. Next, you're redirected to your account page, where you'll notice that your GitHub account is activated. You can deactivate GitHub by simply clicking deactivate, which may be useful when you want to link your GitHub account to another Cloud9 account.
\nNow that you have activated GitHub, you can start to create and manage git projects!
\nThere are several ways to manage GitHub projects in Cloud9 IDE:
\nNew projects are created from the dashboard. In the left-side panel, click on the to add a new project:
A new window will pop-up in which you can change your settings to your preferences:
\n
Select git as your project type. After you click CREATE, the project is listed in your dashboard. Select the project to see its Project Profile, where you can start editing:
There are a couple of things you should do first, before you can use all of git's power. First, you'll want to add a remote to the project. From the Cloud9 IDE command line, you can execute the following commands:
\ngit remote add [remote name] [remote url]remote url is the location of the project on GitHub; for example 'git@github.com:/ajaxorg/node_chat'. You'll have to create a GitHub project first in order to generate this URL. Adding a remote URL lets you freely push and pull your project.
Next, create a few new files inside your project. By default, you should already have a README.md. You can add these files to git with the following command:
\ngit add [file1, file2, file3, ...]Finally, create a commit that you can push to your remote:
\ngit commit -m 'added new files'Don't forget to push this commit out to GitHub:
\ngit push [remote name] masterTa-da! Your project is developed on Cloud9, and stored in GitHub.
\nYou can also create a project in Cloud9 IDE by cloning it from a URL. Once again, click on the , and select Clone from URL. A new window pops up, asking you:
You can find an examples of a GitHub URL on any of their repo description pages:
\n![\"GitHub](\"./resources/images/githubProjectURL.png\")
Paste the URL in the source field and click CHECKOUT. In the left-side panel, you'll see the project and its status turn into "Cloning in Progress". When this process is completed you can open the project and start editing it, just like any other project.
\nWhen you provide Cloud9 IDE with your GitHub credentials, it provides a list of projects you haven't yet imported into the editor:
\n![\"GitHub](\"./resources/images/githubPendingWorkspaces.png\")
From this list, clicking on a project and selecting CLONE TO EDIT brings the repo into the IDE, just as if you cloned it from a URL.
\n\nGitLab is open source Git management software used by more than 25.000 \norganizations, see http://gitlab.org/.
\nGitLab.com offers services for on-premise GitLab installations \nand free private git repositoring on GitLab Cloud \nwith unlimited repo's and collaborators.
\nTo use your on-premise GitLab installation or GitLab Cloud please see \nthe instructions for cloning from a url.
\n\nCollaboration with Cloud9 IDE is an amazing feature that lets you do more than just share your projects with any other Cloud9 developer. You can grant someone else access to change files in your workspace, in realtime--or just let them view the workspace without any other rights. While you're collaborating, you can discuss the code through a built-in chat room.
-To invite someone to collaborate on a project with you, simply copy the URL in the browser and send it to a friend. You can also click on Share in the menu bar to get quick access to other ways to share, such as via e-mail, Twitter, or Facebook.
-Let's take a look at some of the additional features available while you collaborate.
-There are two terms used for people accessing your project: members and visitors. Members are individuals that have read and write access to your project--that means they can change any code; visitors only have read access. The Members panel lists all the collaborators in a project, both active and inactive:
-
If you are the owner of a project, you can click on anyone's username to grant (or revoke) write access:
-
If you're worried about the sanctity of your code after grant access to other developers, fear not. You can always take a look at a file revision history to view line-by-line changes made to your project over time.
-Any member or visitor can participate in group chat with each other. Developers can also choose to double-click on a person's username and engage in a private, instant-message-style conversation.
-When a collaborator changes a file you're also working on, Cloud9 detects it and asks you whether you'd like to use their changes, or your version. We're also simply giving you the option to merge both, using a three-way-merge algorithm to handle any conflicts. This is the same algorithm used by version control systems like git for merging branches.
-To make the experience even smoother you can choose "Always merge by default" and we'll never interrupt you about file changes again.
-Check out the video below to see this in action.
-The color picker is an awesome feature in Cloud9 IDE, designed to not only make color selections easier, but also, more harmonious. At its core, the color picker is a way to represent words (red, blue, e.t.c.), RGBA values (rgba(175, 3, 124, .6)), or hex values (#f00f00) into actual colors.
To enable the color picker, flip the preferences on in the Settings panel. You can use the color picker in CSS, SVG, HTML, or APF Skin files. All you have to do is hover over the value of a color definition, and it'll instantly highlight, like this: 
When the represented color is highlighted, click on it. You'll get a color square defining all the possible color arrangements. To select a color, you can click in the square, pick your own RGB or HSB values, or enter some hex code. Best of all, at the bottom of the window, you'll find a list of other colors found within the same document--just in case you want to achieve matching shades:
To set the value, just click anywhere outside of the color picker.
- -Sometimes you run into issues when you run your project. Here you will find the most common issues and how to solve them.
-The most common reason for an error thrown by your app stating that a port or address is in use is the fact that some process is already running/listening on that port/address. You need to take a look for those and kill the processes conflicting with your app:
-// Find the process
-lsof -i tcp:$PORTIf any relevant process is running you will get a list looking like this:
-COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
-apache2 699 ubuntu 4u IPv6 83213152 0t0 TCP *:http-alt (LISTEN)You now can kill that proccess. Make sure you replace PID with the ID of the process.
-// Kill the process
-kill -9 PIDFor the console wizards:
-kill -9 $(lsof -i:$PORT -t)The Console is at the bottom of the IDE. It's where you can enter command line input, view output from your program, and push and pull your files between your code repositories.
-The terminal can perform all Unix commands, and allows for path autocompletion by hitting Tab.
-For instance, you can use mercurial commands (hg) and git commands (git) to communicate with the system, and to push your code between repositories. Typing hg or git shows the complete list of commands that are available for these services. For more information about these commands, please check their respective documentation:
To use mercurial commands on the project you are working on, you must have a mercurial project set up; the same holds true for git. Follow these links to learn more about how to set up these project in Cloud9:
- -The output tab in the Console shows information whenever a user is running or debugging a program. The content is similar to the output of a desktop terminal:
The output tab also displays the error and additional information that can improve your coding quality. You can use the Console to output results from your running application, just like a regular terminal.
-As your process runs, you'll see a message similar to this one indicating that Cloud9 is running something in the background: 
If you hover over this message, you can opt to cancel the process by clicking on the button: 
Cloud9 supports three types of workspaces:
-"Hosted" is the best choice for most people, so in this short "Getting Started" article we'll only describe this option; for other options please read the full Creating a new workspace article.
-The first step for creating a new workspace is click the "CREATE NEW WORKSPACE" button in your Dashboard:
-
At this point, you'll encounter two choices: Create a new workspace and Clone from URL. -In this article we'll only describe the Create a New Workspace option, which allows you to create any of the previously mentioned types of workspaces (hosted, FTP, or SSH).
-After clicking on Create a new workspace, you're taken to the screen below:
-
First, let's enter a workspace name. -Depending on whether you have a Free of Premium account, you can choose to make it either Public (open to anyone with the URL), or Private (only accessible to you and people you share it with).
-After this, choose the type of workspace you want to create:
-sudo powers!Choose the "Hosted" workspace type to start from scratch with a 'Custom' workspace, or simply pick a pre-configured environment like Node.js, WordPress, or Python/Django, and immediately start developing your app. -This way you don't need to spend valuable development time on system setup and maintenance, as we maintain it, and you control it.
-
As it's powered by a full Linux Ubuntu environment, hosted workspaces allow you to install any package (sudo apt-get install package), run git commands from the console to push your changes to a GitHub repo or a Bitbucket git repo, etcetera.
Now press Create. That's it! You can now see your new workspace in the dashboard:
-
Now, just click Start Editing to get started!
-Next up, read how to run an application and set up a database.
- -For this tutorial, we'll show you how to create and run a CoffeeScript project, entirely within the Cloud9 IDE. To run any coffeescript project, you'll need to first make sure to install the coffeescript module via the Node Package Manager (npm). We're going to walk you through how to do that with a sample project.
First, create a new project. Then, in the console, enter the following command:
-git clone git://github.com/fjakobs/cloud9-coffeescript-example.gitThis is a sample CoffeeScript application written by one of our developers. After cloning the project, you'll find three different files in the project tree: server.js, app.coffee, and README.md.
-The README.md file contains instructions to install coffee-script using npm. We've integrated Node Package Manager into Cloud9 IDE to enable users to install Node programs. Thus, from the Cloud9 IDE command line, type the following command to install the Coffeescript module:
-npm install coffee-scriptNext, let's have a look at the server.js file. The first line is the require() function, which is used to load the coffee-script module that you have just installed. On the second line, we declare the CoffeeScript file that contains your application. In the last line, we specify the port the server is listening to. When projects run within Cloud9 IDE, you must retrieve the port information using process.env.PORT.
Now, let's look at what the CoffeeScript file does. It creates an HTTP server with a function that is called for each request. In the callback function, you create a response with a status code of 200 (indicating that the request was fulfilled successfully) and the message "Hello World". You use module.exports to enable the server.js file to use the code in the CoffeeScript file:
http = require "http"
-
-module.exports = http.createServer((req, res) ->
- res.writeHead 200, 'Content-Type': 'text/plain'
- res.end 'Hello World\n'Next, run the server.js file and open the URL indicated in the console:
-
The result is:
-
To stop your application, go back to the editor and click on the 
button in the Menu Bar.
Cloud9 supports three types of workspaces:
-In this article, we'll walk you through the creation of a new workspace and describe the choices you encounter.
-The first step for creating a new workspace is click the "CREATE NEW WORKSPACE" button in your Dashboard:
-
At this point, you'll encounter two choices: Create a new workspace and Clone from URL. Here's what they mean:
-After clicking on Create a new workspace, you're taken to the screen below:
-
First, let's enter a workspace name. -Depending on whether you have a Free of Premium account, you can choose to make it either Public (open to anyone with the URL), or Private (only accessible to you and people you share it with).
-After this, choose the type of workspace you want to create:
-sudo powers! This is the best choice for most people, and we've included some more info about it below.Make a choice for the type of workspace and press Create. That's it! You can now see your new workspace in the dashboard:
-
Now, just click Start Editing to get started!
-Choose this workspace type to start from scratch with a 'Custom' workspace, or simply pick a pre-configured environment like Node.js, WordPress, or Python/Django, and immediately start developing your app. -This way you don't need to spend valuable development time on system setup and maintenance, as we maintain it, and you control it.
-
As it's powered by a full Linux Ubuntu environment, hosted workspaces allow you to install any package (sudo apt-get install package), run git commands from the console to push your changes to a GitHub repo or a Bitbucket git repo, etcetera.
The second option for creating a new workspace is to clone one from URL. The URL would be, for example, the URL of a GitHub workspace.
-In fact, let's clone a workspace. When you click on Clone from URL, you're taken to this screen:
-
Paste the following GitHub URL in the textbox labeled Source URL: https://github.com/mattpardee/geekdots
-If you have a premium account, you can choose who has access to your workspace. For regular users, the new workspace will be public.
-Now, check out the workspace. It will be created under My Workspaces. You can now start editing it!
-Now that you know how to create a workspace, you should also learn how to delete one. Look at the far right side of your dashboard:
-
Clicking on the Delete button prompts the IDE to ask for confirmation:
This is your last chance to change your mind. Once you have typed delete in the textbox and pressed the red button, your workspace will be gone forever from Cloud9. If you are sure you want to delete your workspace, go ahead and press the red button. Of course, if your workspace is hosted elsewhere, like on another git or FTP server, it still exists in those repositories.
- -Luckily you're not limited to the default set of Runners in Cloud9. -You can simply define your own custom Runner, which is both simple and very powerful. -All you need to do is create a Runner file. -In this article we'll describe how to do this in just a few steps.
-In the Run panel (usually at the bottom of the UI), click the 'Runner' text input and choose 'New Runner'. -In the new Runner file that's now opened, you can configure your runner -using a simple JSON format. We'll show a basic example below -and then explain the different properties you can use.
-Let's start with a basic example: a runner for go files.
-{
- "cmd": ["go", "run", "$file", "$args"],
- "selector": "source.go",
- "info": "Your code is running :)"
-}This runner will use "go run" for any file that has a ".go" file extension. -If you add it, it'll override our default Go runner.
-As another example, let's save a new Node 0.11 configuration, including Harmony support. -Create a new Runner, add this code, and save it as 'Node 0.11.x.run':
-// This file overrides the built-in Node 0.11.x runner
-// For more information see http://docs.c9.io:8080/#!/api/run-method-run
-{
- "cmd": [
- "bash",
- "--login",
- "-c",
- "nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args"
- ],
- "debugger": "v8",
- "debugport": 15454,
- "info": "Your code is running at \\033[01;34m$url\\033[00m.\n\\033[01;31mImportant:\\033[00m use \\033[01;32mprocess.env.PORT\\033[00m as the port and \\033[01;32mprocess.env.IP\\033[00m as the host in your scripts!\n"
-}That's it! Your custom Runner should be available in the Run panel.
-Here's a list of all the variables you can use in your runners:
-$file_path The directory of the current file, e. g., /home/ubuntu/workspace/docs
$file The full path to the current file, e. g., /home/ubuntu/workspace/docs/Chapter1.txt.
$args Any arguments entered after the file name.
$file_name The name portion of the current file, e. g., Chapter1.txt.
$file_extension The extension portion of the current file, e. g., txt.
$file_base_name The name only portion of the current file, e. g., Document.
$packages The full path to the Packages folder.
$project The full path to the current project file.
$project_path The directory of the current project file.
$project_name The name portion of the current project file.
$project_extension The extension portion of the current project file.
$project_base_name The name only portion of the current project file.
$hostname The hostname of the workspace.
$hostname_path The hostname of the workspace together with the relative path of the project file.
$url The full url to access the workspace.
$port The port assigned to the workspace.
$ip The ip address to run a process against in the workspace.
After you have logged into Cloud9, you are placed into your account's dashboard. From here, you can edit your profile and manage workspaces you have access to.
-
In the top-left corner of the dashboard, your username is displayed. Within the user context, you can view your user profile by clicking on Your Account:
-
The user profile contains:
-The gravatar that is used for your profile is handled by gravatar.com. If you don't have a gravatar yet, Cloud9 IDE uses an uninspiring default.
-In the left panel, you'll find a list of various projects associated with your account. These are:
-Clicking on the 
next to MY PROJECTS lets you:
For more information on creating new workspaces, see this section of the documentation.
-You can always filter your project list by entering text in the text bar to find matching projects. If you need to update the list, click the refresh icon at the bottom of the panel: 
Cloud9 IDE offers many different ways to get your code from your editor to your -production server. To deploy your code, click on the Deploy button in the -Project Bar:
-
We offer tight integration with the following environments:
- -Following these links will provide you with more information on code deployment. -You can deploy your code to as many services and servers as you like. Keep in -mind that you'll already need an account at those hosting providers before you -can deploy your app to them!
-If you're comfortable with the command line, you can also deploy to several more -environments, such as:
- -This section will show you how to deploy your applications to Heroku, a cloud-based application platform. The integration with Cloud9 IDE makes your development process even more agile. If you don't have a Heroku account, visit their website to create one for free.
-To get started, create a simple Node.js application. If you don't have one yet, you can follow our tutorial on developing one.
-After you click on the Deploy button in the Project Bar, click the plus sign next to Deploy to add another deploy target. Choose Heroku as an option. After you have signed into your Heroku account, you can create a new deploy target or choose an existing one from your account:
-
Next, press Deploy to continue the process; the following window might appear:
-
Heroku Node.js apps are required to have a package.json file, much like with NPM. Cloud9 can generate a package.json file for you, containing metadata to share Heroku. The following lines represent what that file might looks like:
-{
- "name": "cloud9-heroku-example",
- "version": "0.0.1"
-}After you have a package.json file, you might see this dialog:
-
Sometimes, a Heroku app also requires a Procfile. The Procfile is needed to start the application in Heroku. You can just create a new file, add the line below, and save it as 'Procfile'. Don't add any file extensions.
-web: node web.jsTry the deploy button again. The console will directly output the following when the deployment is completed:
-
And just like that, you've deployed your project to Heroku.
- -This article will show you how to deploy your applications to Windows Azure. If you don't have an account yet, the Windows Azure process will help you create one. Keep in mind that Windows Azure is not free, though it does come with a free trial. Windows Azure projects can be deployed from any operating system.
-To get started, create a simple Node.js application. If you don't have one yet, you can follow our tutorial on developing one.
-After you click on the Deploy button in the Project Bar, click the plus sign next to Deploy to add another deploy target. Choose Windows Azure as an option. You'll be prompted with this dialog:
You must click on the Download Windows Azure Settings button before you can continue. If you don't have a Windows Azure account, here is where you can create one. If you do have an account, your browser will automatically download the required file.
-When that's finished, simply select the downloaded file from your computer, and upload it to Cloud9. You'll only have to do this process once. If you ever need to upload a new certificate, be sure to click Clear cert in the lower-right corner of this dialog.
-After the file has uploaded, click on Create new to create a new hosted service. A hosted service is the container in which your application is hosted when it is deployed to Windows Azure. For more information, see Overview of Creating a Hosted Service for Windows Azure.
-You can set a few configuration options such as the number of instances to use, its host OS, and where the data center is located. Selecting "Enable RDP" and providing a username and password enables remote desktop for your deployment.
-Your new Windows Azure server will appear in the Deploy list:
Go ahead and click on DEPLOY. If this is the first time you're trying to deploy this project to Windows Azure, you'll receive three prompts:
-A dialog will inform you of a missing web.config file. If you click Yes, Cloud9 will create a file called Web.cloud.config in your project. This file contains configuration information about your app.
-You'll be told about a missing csdef file. If you click Yes, Cloud9 will create a file called ServiceDefinition.csdef in your project. ServiceDefinition.csdef is a Windows Azure-specific files necessary for publishing your application For more information, see Overview of Creating a Hosted Service for Windows Azure.
-You'll be asked to select the instance size for this application. For this tutorial, just select Small, and then click Create. For more details about Windows Azure VM sizes, see How to Configure Virtual Machine Sizes.
-Your app will now deploy to a Windows Azure server! You can follow its progress in the Deploy panel, or by watching the messages in the console:
-
For more information on configuring your app on the Windows Azure website, see Deploying a Windows Azure App from Cloud9.
- -In the new version of Cloud9 we don't have support for deployment from the UI yet, but we're going to add those features soon.
-Until then, you can manually install various command-line tools into your workspace and deploy using the command line. -It should go without saying that this is for super 31337 developers that aren't afraid of the command line.
-Below is a list of some of the services we have tested and support deploying to. -All the commands need to be executed in the terminal unless stated otherwise.
-Heroku's toolbelt is installed by default in new VMs.
Now, you can use the heroku command for your projects, as described in the
-Heroku documentation.
If deploying to Heroku, you should probably be using a local instance of PostgresQL, or you may run into problems caused by different database interpretations of SQL.
-In the Console or a Terminal, type the -following:
-npm install azureNow, you can use the azure command from the Console/Terminal. For more
-information, read the official azure documentation.
To deploy to Azure sites from the command line, open the Terminal and type:
-cd ~/lib/azure-sites
-npm installThen, add the bin to your workspace's path:
-PATH=$PATH:$HOME/lib/azure-sites/binNow, you can use the azure command in the terminal.
For free and premium plans, follow the instructions on the -azure-cmdlet-node repository. This -project is maintained by Cloud9.
-First, setup Push to Deploy: Create a new App Engine application at -cloud.google.com/console, and then enable -Push-to-Deploy under 'App Engine' in the Application Settings page. Leave this -tab open to note the URL for your repo.
-Secondly, configure Cloud9. Run the following commands (making sure to replace -your email address, auth-token, and repo-url):
-echo "machine code.google.com login EMAIL password PASSWORD" >> ~/.netrc
-git remote add appengine REPOFinally, do a commit, and a push:
git commit -a -m "First commit"
-git push appengine master# Install rhc:
-gem install rhc
-rhc setup
-
-# After this you can use rhc to manage your account:
-
-# list apps:
-rhc apps
-# To show what you can do with apps do:
-rhc app help
-# You deploy via a git push
-git push <giturl> masterTo deploy to CloudFoundry from the command line in the Console -or a Terminal, type:
-cd ~
-wget https://github.com/cloudfoundry/vmc/zipball/master
-mv master cloudfoundry
-unzip cloudfoundry
-cd cloudfoundry-vmc-nnnn
-bundleIn the the Console or a Terminal, type:
-npm install jitsu@0.7.x -g
-mkdir node_modules
-mv ../lib/node_modules/jitsu node_modulesNow, you can run jitsu from the command line. For more information, see
-the official jitsu documentation.
npm install jitsu@0.7.x -gYou can now run jitsu from both the Console and the Terminal.
In the the Console or a Terminal, type:
-npm install modulus -gNow, you can run modulus from the command line. For more information, see
-the official modulus documentation.
Did you know that you can use Cloud9 IDE to work on your WordPress website? It's true, and incredibly easy. You can't edit your posts on WordPress using Cloud9, since they are stored in a database on your server. But you can edit pretty much every other aspect of your site.
-To start, you'll need to create a new FTP project. After that, enter your wp-content folder, find the theme you're using on your website, and start editing its style.
-Thanks to the preview button in the menu bar, you can also witness your changes as they happen, before committing them to your server.
- -Yes, Cloud9 supports FTP workspaces that allow you to edit your files directly on your FTP server. -Currently FTP workspaces still open in the old version of Cloud9, but soon we'll also support FTP workspaces with the new version of Cloud9.
-One thing that was removed for reliability reasons in the new version of Cloud9, is the ability to deploy over FTP from a regular workspace. -We're bringing back those features in a new format and with much higher reliability in the coming months.
-See Deploying via CLI.
-No, this is not supported by our hosting platform. It does currently allow access to the GMail servers though, so you can use that service during development.
-You can inspect your current quota usage with the df command in the Terminal:
-$ dfTo find which files and directories are consuming a lot of space, go to a directory such as your home directory, and run this command:
-$ du -m -d 1 -a | sort -nThis should give you a list of all members of that directory and how much space they use in megabytes.
-Alternatively, try du-c9 for seeing all files you added to your workspace and account for the quota.
You can sign into Cloud9 with your github or bitbucket account and set that up to use two-factor authentication. -We don't currently provide an option to directly setup your Cloud9 account for two-factor authentication.
-Try using port 8080 instead, which often solves this case.
-Applications won't start if another application is already listening to the same port. In order to fix it you first need to find out which process that is:
-$ netstat -nlp | grep $PORTThis will report the process id (PID) which you can then kill using
-$ sudo kill -9 <PID>Often apache is still running in the background. In that case you can kill it using
-$ sudo pkill apache2Either drag a local file directly from your desktop into the Cloud9 file tree, -or use the "File > Upload Local Files" menu item.
-Use "File > Download project". Currently, this will give you a .tar.gz file, which -ensures maximum portability. To open these files, you can use something like -WinRAR or 7-zip.
-Sometime you might want others to open a file or directory in the browser -without opening up the whole workspace. This can be done by starting a small -http server in that directory and make sure that the running application is public.
-To make the running application public you have to click the "sharing" button at -the top right and the check "public" for application.
-To run the server open a terminal and do
-$ cd /dir/i/want/to/share
-$ python3 -m http.server 8080By default the logs are in ~/lib/apache2/log
-No, this is currently not supported; see FAQ: General about SMTP access.
- -We recently discovered our web host is blocking connections to some Digital Ocean IP addresses because they suspect they are being used by Iranian users. They are legally forced to block them.
-Digital Ocean maintains a whitelist of droplet IP addresses which should not be blocked and our web host follows this list.
-Please raise a support ticket with Digital Ocean mentioning that you would like to have your droplet IP added to the whitelist. After this is complete you will be able to create your SSH workspace within 24 - 48 hours.
-Try executing the following command:
-yum install ncurses-devel or
-yum install glibc-static AngularJS lets you write client-side web -applications as if you had a smarter browser.
-Follow these steps to create an AngularJS application using the official project -template:
-rm -rf * .c9
-git clone https://github.com/angular/angular-seed.git .
-npm install
-mv package.json package.json.bak
-jq '.scripts.start="http-server -a $IP -p $PORT"' package.json.bak > package.jsonRun Project button in the top menu of the IDERun Project to get started. This doesn't
-limit the choice of the backend technology you might want to use.For Drupal there are some installation guides around which tell you to install PHP first, but that's not necessary with Cloud9. -You don't need to install MySQL either, it is already preinstalled in PHP workspaces. -Just make a new workspace, choose PHP, go to the Terminal, and execute the following:
-cd $HOME
-curl -O http://ftp.drupal.org/files/projects/drupal-7.30.tar.gz
-tar xvf drupal-7.30.tar.gz
-mv drupal-7.30/* workspace/
-mv drupal-7.30/.htaccess workspace/
-cd $HOME/workspace
-mysql-ctl install
-mysql-ctl start
-mysql-ctl statusOpen the file install.php in the file tree, and while opened, click on the "Run Project" button in the menu bar on top of the IDE. -An URL will be shown at the bottom of the page, something like "https://drupal-c9-lcipriani.c9.io/", but with your username and workspace name in it.
-Copy the url in a new browser tab and you will see the install page of Drupal
-You can now proceed with the installer
-
Now be careful inserting the correct values for the database. You need to change the values as follows:
-user: yourusername
-database: c9
-host: 127.0.0.1Open the Advanced Options in the database settings page as shown in the screenshot:
-
Now fill the form with the correct site information:
-
Continue the setup and enjoy your website!
-
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
-To get started with an Express app, first create a workspace and choose either the Node.js type, or a Custom workspace type for a clean workspace. Open the new workspace (or an existing one) to follow the instructions below.
-First we'll install the Express project generator and generate an application stub:
-$ npm install -g express-generator
-$ express -f .
-$ npm installYou might want to take a look at package.json and update the application name from the default workspace to something more fitting.
Now you have a fully configured express application already. You can run it from the terminal using:
-$ bin/wwwNow if you click the Preview button in the top menu in the IDE, and choose "Preview with Web Server", this will open the Preview window for your running app.
-In order to make life easier you can create a run configuration for express.
-Run -> Run Configurations -> Manage ...Add New ConfigExpress as name, bin/www as the command and Node 0.10.x as the runner.Set As Default. If you do so then clicking the run button will always run the app and not the currently opened file.The finished run configuration should look something like this
-
Ghost is a simple, powerful publishing platform that -allows you to share your story with the world.
-Create a Ghost blog as follows:
-Run the following commands in the Terminal:
- $ curl -L https://ghost.org/zip/ghost-latest.zip -o ghost.zip
- $ unzip -uo ghost.zip -d .
- $ rm ghost.zip
- $ npm install --productionAdapt the config.js file to the Cloud9 environment. Change the following keys:
config: {
- development: {
- url: 'https://' + process.env.C9_HOSTNAME,
- },
- server: {
- host: process.env.IP,
- port: process.env.PORT
- }
- }Run Ghost by typing npm start in the console or by opening index.js and
-hitting the run button.
Change the URL to /ghost and create your admin user to login to the Ghost admin interface
Ionic is an open source front-end framework for developing hybrid mobile apps with HTML5.
-Create a Ionic app as follows:
-Run the following commands in the Terminal:
- $ npm install -g cordova ionic
- $ ionic start myApp sidemenu
- $ cd myApp
- $ ionic serve $PORTClick the "Preview" button in the top menu in the IDE, and choose "Preview with Web Server". This will open the Preview window for your running app.
-Jekyll is a great static site generator, also used by github pages. You simply need to install the Ruby gem and then make sure you pass the right port to the serve command.
$ gem install jekyll
-$ jekyll new my-awesome-site
-$ cd my-awesome-site
-$ jekyll serve --port $PORTJoomla is a popular open source CMS. -Installing Joomla is very straightforward, but there are just a few quirks to keep in mind, which we describe below.
-Download and Unzip Joomla from the Terminal. You can find the latest version on the Joomla website
- wget http://joomlacode.org/gf/download/frsrelease/19665/160049/Joomla_3.3.3-Stable-Full_Package.zip
- unzip Joomla*.zip
- rm Joomla*.zipJoomla requires a MySQL database to connect to. MySQL is pre-installed in your workspace, so just execute these commands:
-mysql-ctl install
-mysql-ctl start... and then note the credentials to use in the configuration of Joomla later on.
-To run the Joomla installer, open index.php and run it with the "Run" (or "Run Project") button at the top of the IDE. -Next, click the URL that's displayed in the Run panel, which looks something like https://joomla-c9-username.c9.io/installation/index.php#. -This will open up the Preview window with the installer.
-Now, here comes the quirky part: the installer will not work properly if it's loaded over HTTPS, as the Cloud9 Preview window does by default. -So, in order to make the Joomla installer work, do the following:
-
(or copy & load the URL in a browser tab)Now you should be able you to get through the installer successfully.
-The main Configuration screen should look like this:
-
Enter whatever values you'd like here.
-The second quirky and important thing to keep in mind in the Database section, is to use Host Name "0.0.0.0" instead of "localhost".
-So use values like shown in the screenshot below:
-
Use whatever settings you'd like in the final installation screen, and after it completes, have Joomla remove the Installation folder for safety.
-That's it, you're done and your Joomla setup should run fully on Cloud9!
- -Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.
-To get started with a Koa app, first create a workspace and choose either the Node.js type, or a Custom workspace type for a clean workspace.
-Koa.Js makes use of the new generator feature in javascript ECMA 6.
-This feature is support in Node from 0.11 and up by toggling the --harmony flag.
-By default Cloud9 runs Node v0.10.x or v0.8.x, depending on your setup, so we first need activate Node version 0.11.x.
Open a Terminal, or using the pre-existing one at the bottom and execute the following in your Terminal:
-nvm use 0.11Next, we need to install Koa itself:
-npm install koaNow we can create a simple Koa.Js server. -Create a server.js file in your root folder with this code:
-var koa = require('koa');
-var app = koa();
-
-app.use(function *(){
- this.body = '<h1>Hello from Koa.Js</h1>';
-});
-
-app.listen(process.env.PORT);If you now press the Run button on top of the IDE, you will see some errors, as the runner/debugger defaults to 'Node (default)', which is Node version 0.10.x or 0.8.x.
-Luckily all you need is to create a Runner file so Cloud9 can run Node 11.x in harmony mode and thereby support generators.
-In the Run panel below, click the 'Runner' text input and choose 'New Runner'. -In the new Runner file that's opened, save the following code as 'Node 0.11.x.run':
-// This file overrides the built-in Node 0.11.x runner
-// For more information see http://docs.c9.io:8080/#!/api/run-method-run
-{
- "cmd": [
- "bash",
- "--login",
- "-c",
- "nvm use 0.11 > /dev/null; node --harmony ${debug?--nocrankshaft --nolazy --debug-brk=15454} '$file' $args"
- ],
- "debugger": "v8",
- "debugport": 15454,
- "info": "Your code is running at \\033[01;34m$url\\033[00m.\n\\033[01;31mImportant:\\033[00m use \\033[01;32mprocess.env.PORT\\033[00m as the port and \\033[01;32mprocess.env.IP\\033[00m as the host in your scripts!\n"
-}Let's run server.js with this new configuration; in the Run panel on the bottom, choose your new 'Node 0.11.x' Runner, and press Run again.
-You Koa.Js server should now be up and running.
-Now if you click the Preview button in the top menu in the IDE, and choose "Preview with Web Server", this will open the Preview window for your running app.
-(Credits go to Tom at http://kyorcode.blogspot.nl/2014/08/running-koajs-in-cloud9.html)
- -For Laravel there are some installation guides around which tell you to install PHP first, but that's not necessary with Cloud9. -Just make a new workspace, choose PHP, go to the Terminal, and execute the following:
-rm README.md php.ini hello-world.php
-composer create-project laravel/laravel ./laravel --prefer-dist
-shopt -s dotglob
-mv laravel/* ./
-rm -rf laravelAs lavarel is serving its content from the public directory we need to modify the apache config:
sudo vi /etc/apache2/sites-enabled/001-cloud9.confThen do the following:
-// Change this line
-DocumentRoot /home/ubuntu/workspace
-
-// To following
-DocumentRoot /home/ubuntu/workspace/publicRun the project with the "Run Project" button in the menu bar on top of the IDE. -If you click the URL that appears in the Run panel below (in the shape of 'https://laravel-c9-username.c9.io/'), you can preview your new Laravel app.
-
Meteor is an open-source platform for building web apps.
-Create a Meteor app as follows:
-Run the following commands in the Terminal:
- curl https://install.meteor.com/ | sh
- meteor create ./my_cool_app
- cd my_cool_app/
- meteor --port $IP:$PORTClick the Preview button in the top menu in the IDE, and choose "Preview with Web Server". This will open the Preview window for your running app.
-Symfony is one of the leading PHP Webframeworks. It is Open-Source and built on top of the Symfony Components.
-Install the Intl extension for PHP that is required in most of the Symfony2 projects
- sudo apt-get install php5-intlSet a valid PHP timezone
- echo 'date.timezone = UTC' | sudo tee --append /etc/php5/apache2/php.iniStarting MySQL-Server
- sudo mysql-ctl install
- sudo mysql-ctl startOpen your Terminal and execute the following to create a new Symfony-Project -You need the first line only if you used the PHP Project type for your workspace.
- rm README.md php.ini hello-world.php
- composer create-project symfony/framework-standard-edition symfony/ "2.5.*"
- mv symfony/{*,.*} ./
- rm -rf symfonyThe create-project composer command will ask for a few parameters, the only one you need to pay special attention is the database-host parameter.
-There is a IP address checking in the web/app_dev.php file. To disable this check please remove the following lines
- // This check prevents access to debug front controllers that are deployed by accident to production servers.
- // Feel free to remove this, extend it, or make something more sophisticated.
- if (isset($_SERVER['HTTP_CLIENT_IP'])
- || isset($_SERVER['HTTP_X_FORWARDED_FOR'])
- || !in_array(@$_SERVER['REMOTE_ADDR'], array('127.0.0.1', 'fe80::1', '::1'))
- ) {
- header('HTTP/1.0 403 Forbidden');
- exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');
- }After that add a new run configuration in Menu Run > Run Configurations > New Run Configuration. Select Apache http (PHP, HTML) as a Runner and web/app_dev.php as Command.
-That's it after you hit Run your server will start up and you can access your new Symfony project.
In this article, we'll show you how to set up an FTP project.
-To create an FTP project, go to the Dashboard and click on the next to MY PROJECTS. Choose the option to Create a new project (see "Creating a New Project" if you need to review the steps to create a new project):
In the pop-up window that appears, select FTP for the project type:
-
Let's review the options available for your FTP project:
-/) path. Otherwise, it'll be set to a relative path, and Cloud9 assumes that you want to start from the folder your FTP server leaves you after login (home or default folder).Fill in your FTP details and click the Login Test to verify that the settings are correct. If the test succeeds, go ahead and click Create to create your FTP project. You'll then see your project in the Dashboard under My Projects:
-
When your new FTP project is selected, you will see three buttons: Start Editing, FTP settings, and Delete (on the far right). FTP settings gives you access to the settings you just filled in, as well as the login test. This is useful to use in case your login credentials have changed.
-To get started with your FTP project, click on the Start Editing button. You'll be taken to the editor. Under Project Files, you should see the files from the FTP server in the directory you selected (either your home/default folder or the location indicated by the Initial Path, if you set it). The editor for FTP projects works the same as in other projects: you can create and edit your files in the usual way. The main difference is the FTP log at the bottom of the page (where the console is usually located for other non-FTP projects).
-The FTP log displays output related to the interaction with the FTP server. The screenshot below, for example, shows what happens when we create a new file called TestFile.txt. The file is created in the FTP server and when I write to it, the contents are transferred.
-
When you're working with git repositories, it's helpful to know who made a commit to a particular piece of code. As it turns out, git has a feature called git blame that we've integrated directly into Cloud9 IDE.
By using git blame, you'll be able to instantly discover who edited certain lines of code, when they edited it, and what their commit message at the time was. Clicking on a git commit also highlights other lines of code changed at the same time. To launch the git blame feature, open a file and navigate to .
Let's say you're working a large project containing many files, and you kind-of sort-of know the name of a file that you want to open up. Goto File is our feature to help you quickly and easily jump to any file in your workspace, without the need to search through different directories. Simply hit Cmd-E (or Ctrl-E on Unix/Windows) and away you go:
Goto File offers filtering for any portion of a filename, including directories. Search for the beginning, middle, or end of a file path, or even just an extension, like .js, and Goto File with instantly present the results to you. Clicking on a name in the list opens the file right up. Goto File does not support case-insensitive, wildcard (*, ?), or regular expression (., +) searching.
Goto Definition takes the same concept and applies it to files. You can easily navigate between classes and members defined in your files. By entering text, you can filter your class' member results. Finally, as you navigate through your file, Cloud9 IDE will jump to the relevant portion of the code:
-
Another feature that's available is the capability to "jump to definition." If your cursor is on a variable or function name, you can tap F12 (or type jumptodef in the console) to instantly scroll the editor to the member's definition.
Cloud9 IDE can be thought of as being divided into the following components:
-
Throughout the documentation, we'll refer to these sections by name. We can identify several distinct areas in the editor:
-ls or mkdir). It also displays output provided by your program's print statements (like console.log()), as well as providing an area for search resultsThe Project Bar, Tool Bar, and Console are powerful features, so their documentation is provided separately. We'll talk about the rest of the editor below:
-Remember: nearly every UI element can be collapsed, in order to provided a more harmonious coding experience. For example, clicking on the buttons in the upper left of the editor allows you to hide the panels and top menu bar:
In this section, you can find the usual menus for creating and saving files, changing your view, applying a new theme for the editor, and switching between windows.
-In the middle of the menu bar you'll find the debug button: 
. This is used for running and debugging your code. For more information, see the section on "Running and Debugging Your Code"..
The preview button 
provides you with a look of what the currently active file would look like in the browser. For text files, this is usually just the raw text, but certain files, like HTML or XML, render as the actual markup.
The autosave button indicates the status of your current saves: 
. Files are saved automatically by Cloud9 IDE, and every revision is made available for you to browse through. For more information, see the section on revisions and saving.
On the far right of the menu, near the Cloud9 IDE logo, there are two more icons: one to return to the dashboard, and one to return to the Cloud9 IDE homepage.
-This is where most of the action happens. Every file you open appears here as a tab. You can open a new file easily by clicking on the 
button to the right of the last tab. Cloud9 IDE offers syntax highlighting for over two dozen programming languages.
The code editor supports a large number of keyboard shortcuts to increase your productivity. For an up-to-date list of these within the IDE, simply go to .
-If you hover over to the upper-right corner, you can activate zen-mode, which is a full screen coding environment.
-At the lower-right corner, you can find the status bar.
- -There are many different ways to configure the IDE. Below is a list of the options available, and what they do.
-This section controls the overall IDE behavior:
-| Preference Name | -Description | -
|---|---|
| Enable UI Animations | -Enables or disables fluid animations for various UI elements, such as the Project Bar | -
| Animate Scrolling | -Enables or disables fluid animations when scrolling through code (such as for goto line) | -
| Enable Auto-Save | -If enabled, automatically saves your files on every change | -
| On Save, Strip Whitespace | -When saving a file, you can remove all extraneous whitespace from your code lines | -
| Reveal Active File in Project Tree | -Enabling this jumps the project tree to the active file whenever a tab changes to a different file | -
| Warn Before Exiting | -Prevents accidental data loss by showing a dialog asking if you really want to leave Cloud9 IDE when closing your browser | -
| Node.js Runtime | -Defines the default runtime for your Node.js code. "Auto" is based on whatever is in the package.json file, while "Default" reverts to Node 0.6.x. | -
| Keybindings | -Allows you to choose which operating system to use for keyboard shortcuts | -
This section controls language analysis options:
-| Preference Name | -Description | -
|---|---|
| Enable Hints and Warnings Rules | -Presents information about your code in the gutter | -
| Highlight Variable Instances | -Highlights variable instances in your code | -
| Mark Undeclared Variables | -Provides warnings if a variable is being used and has not been declared yet | -
| Mark Unused Function Arguments | -Provides a strikethrough for arguments in a function that are not being used | -
| Warning Level | -Specifies the minimum level of information severity you want provided in the gutter | -
This section controls language analysis options:
-| Preference Name | -Description | -
|---|---|
| Auto-pair Quotes, Brackets, etc. | -When enabled, typing ", (, or [ will actually make two characters appear. In addition, whenever you highlight a word and type one of these characters, it is surrounded by that character (e.g. words becomes "words") | -
| Full Line Selection | -When highlighting lines, this option will highlight all ending whitespace, until the end of the editor window | -
| Highlight Active Line | -Presents a darker shade in the code editor to indicate which line you're currently on | -
| Highlight Gutter Line | -Presents a darker shade in the gutter which line you're currently on | -
| Show Invisible Characters | -Shows invisibles characters in the editor, like tabs and line breaks | -
| Show Indent Guides | -Shows the indent guides in the editor, letting you see your code's nestings | -
| Show Gutter | -Shows the gutter in the editor, which indicates line numbers, warnings, and errors | -
| Highlight Selected Word | -If you highlight a word, this highlights all matching words in the editor | -
| Auto-hide Horizontal Scroll | -When this is enabled, this will hide the horizontal scroll bar in the editor. Note that this has no effect in Mac OS X 10.7 (Lion) and above, since all scrollbars, by default, auto-hide. | -
| Vim Mode | -When enabled, allows you to use vim keybindings in the IDE | -
| Code Folding | -When enabled, allows you to show or hide "blocks" of code | -
| Fade Fold Widgets | -When enabled, fades the folding widgets in the gutter | -
| Font Size | -Changes the font size of the code in the editor | -
| Show Print Margin | -Shows (and defines) the number of characters possible in line, before it wraps | -
| Soft Tabs | -Indicates how many spaces a single tab represents | -
| Mouse Scroll Speed | -Defines the speed of the mouse scrolls | -
| Newline Mode | -Specifies the newline mode for the IDE | -
This section controls the behavior for the terminal:
-| Preference Name | -Description | -
|---|---|
| Scrollback | -Sets the scrollback buffer for the terminal | -
| Font Family | -Sets the font for the terminal | -
| Font Size | -Sets the font size for the terminal | -
| Blinking Cursor | -Specifies whether or not you want the cursor to blink | -
This section controls the various tools that are available in the IDE:
-| Preference Name | -Description | -
|---|---|
| Enable Color Picker | -Makes the color picker available for use | -
| Preserve Empty Lines | -When enabled, the editor keeps any new lines without text | -
| Keep Array Indention | -When enabled, tabs and newlines in arrays are preserved. For example, the follow array would remain as-is with this option:
-
- var o = [{
- a: b
- }, {
- c: d
- }];
-
- |
-
| JSLint Strict Whitespace | -If selected, all brackets are preceded by a space. For example, if(x){ becomes if (x) {, and function(arg){ becomes function (arg) { |
-
| Braces | -These options control how braces are handled in the IDE:
-
|
-
-
Welcome to the official Cloud9 IDE documentation! Here, you'll find articles and tutorials to help you use the Cloud9 platform. These include everything from setting up a workspace, to learning how to run, debug, and deploy your code.
- - -Have a look at the "Getting Started" section on the left for an introduction into the basics of Cloud9. -For instance, read up on how to:
- -If you're interested in troubleshooting specific aspects of the IDE, need help setting up an account, or just want to chat with our support team, please visit the Support pages.
-Remember: All of our documentation content is open-sourced on GitHub, just like our amazing IDE.
-See something that's not documented here? Simply add it to the documentation with a Pull Request, or send an e-mail to docs@c9.io, and we'll get it in.
-Here's a list of the last five recently updated topics:
- - -Since Cloud9 IDE is built on top of Node.js, we also leverage the module system NPM. In Cloud9, you can install any npm package either locally or globally. Note that due to security restrictions, modules installed globally can only be used in the project they were installed from. In other words, while you have access to any command line tools installed by the module, they are bound to the project, not your username. We run version 1.1.24 of npm.
-To demonstrate the power of NPM, we'll build and run a quick express server:
-npm install express, and wait for the npm install process to complete.var express = require('express'),
- app = express();
-
-app.use(express.logger());
-
-app.get('/', function(req, res){
- res.send('Hello World');
-});
-
-app.listen(process.env.PORT);
-console.log('Express server started on port %s', process.env.PORT);To launch your express server, click on the 
button in the menu bar.
Cloud9 supports the installation of Python packages for applications that need to go beyond the standard library set. Every workspace has version 0.6.10 of Python's easy_install package manager. For more information on this module, see the official easy_install documentation.
Let's try installing a package. First, type the following in the console:
-easy_install markdownThis installs the markdown Python package to your workspace. You won't see the package installed in the directory tree, because it's kept deep within your project's the Python libs.
Next, create a new Python script, and add these lines of code:
-import markdown
-
-html = markdown.markdown("# HELLO THERE!")
-
-print htmlAfter clicking run, the console will correctly print out <h1>HELLO THERE!</h1>.
You have access to all of the functionality easy_install provides you. For example, you can open up the Python REPL and type the following to see a list of your installed packages:
>>> help('modules')Cloud9 supports the installation of Ruby gems in your workspace using the RubyGems package manager. The current installed RubyGems version is 1.3.7. For more information on the gem command, see the official RubyGems documentation.
Let's try installing a gem. First, type the following in the console:
-gem install progressbarThis installs the progressbar Ruby gem to your workspace. You won't see the gem installed in the directory tree, because it's kept deep within your project's the Ruby libs.
Next, create a new Ruby script, and add these lines of code:
-require 'progressbar'
-
-bar = ProgressBar.new("Example progress", 50)
-total = 0
-until total >= 100
- sleep(rand(2)/2.0)
- increment = (rand(6) + 3)
- bar.inc(increment)
- total += increment
-endAfter clicking run, the console will start printing out an ASCII progressbar.
-You have access to all of the functionality gem provides you. For example, you can open up the console and type gem query to see a list of your installed gems.
Nearly every action in Cloud9 has a corresponding command associated with it. On top of that, every command also has a keybinding that can be used to effortlessly execute the command.
-Below is a list of every single command and keybinding used by Cloud9. Have fun being efficient!
-| Command Name | -Keybinding | -
|---|---|
Abortclicommand |
- ˄-C | -
AddCursorAbove |
- ˄-⌥-Up | -
AddCursorAboveSkipCurrent |
- ˄-⌥-⇧-Up | -
AddCursorBelow |
- ˄-⌥-Down | -
AddCursorBelowSkipCurrent |
- ˄-⌥-⇧-Down | -
Backspace |
- ˄-⌫ | -
Beautify |
- ⌘-⇧-B | -
Clearcut |
- ⎋ | -
Closeallbutme |
- ⌥-˄-W | -
Closealltabs |
- ⌥-⇧-W | -
Closetab |
- ⌥-W | -
Complete |
- ˄-Space | -
Copy |
- ⌘-C | -
Copylinesdown |
- ⌘-⌥-Down | -
Copylinesup |
- ⌘-⌥-Up | -
Cut |
- ⌘-X | -
Del |
- Delete | -
DuplicateSelection |
- ⌘-⇧-D | -
Escapeconsole |
- ⎋ | -
EvalInteractive |
- ⌘-Return | -
Find |
- ⌘-F | -
Findnext |
- ⌘-G | -
Findprevious |
- ⌘-⇧-G | -
Fold |
- ⌘-⌥-L | -
Foldall |
- ⌘-⌥-0 | -
Golinedown |
- Down | -
Golineup |
- Up | -
Gotoend |
- ⌘-End | -
Gotofile |
- ⌘-E | -
Gotoleft |
- Left | -
Gotoline |
- ⌘-L | -
Gotolineend |
- ⌘-Right | -
Gotolinestart |
- ⌘-Left | -
Gotopagedown |
- PageDown | -
Gotoright |
- Right | -
Gotostart |
- ⌘-Home | -
Gototableft |
- ⌘-[ | -
Gototabright |
- ⌘-] | -
Gotowordleft |
- ⌥-Left | -
Gotowordright |
- ⌥-Right | -
Indent |
- Tab | -
Jumptomatching |
- ˄-⇧-P | -
Largerfont |
- ˄-⇧-. | -
Movelinesdown |
- ⌥-Down | -
Movelinesup |
- ⌥-Up | -
Movetableft |
- ⌘-⌥-[ | -
Movetabright |
- ⌘-⌥-] | -
Newfile |
- ⌥-⇧-N | -
Newfiletemplate |
- ⌥-˄-N | -
Newfolder |
- ⌥-˄-⇧-N | -
Nexttab |
- ⌥-Tab | -
Openfilepanel |
- ⇧-⌘-U | -
Opensettingspanel |
- ⌘-, | -
Opentreepanel |
- ⌘-U | -
Outdent |
- ⇧-Tab | -
Outline |
- ⌘-⇧-E | -
Paste |
- ⌘-V | -
Previoustab |
- ⌥-⇧-Tab | -
Quicksave |
- ⌘-S | -
Quickwatch |
- ⌥-Q | -
Redo |
- ⌘-⇧-Z | -
Removeline |
- ⌘-D | -
Removetolineend |
- ˄-K | -
Removetolinestart |
- ⌘-⌫ | -
Removewordleft |
- ⌥-⌫ | -
Removewordright |
- ⌥-Delete | -
RenameVar |
- ⌥-⌘-R | -
Replace |
- ⌥-⌘-F | -
Replaymacro |
- ⌘-˄-R | -
Resume |
- F8 | -
Revealtab |
- ⇧-⌘-L | -
Reverttosaved |
- ˄-⇧-Q | -
Revisionpanel |
- ⌘-B | -
Run |
- F5 | -
Saveas |
- ⌘-⇧-S | -
Savetabsession |
- ⇧-˄-S | -
Searchinfiles |
- ⇧-⌘-F | -
SelectMoreAfter |
- ˄-⌥-Right | -
SelectMoreBefore |
- ˄-⌥-Left | -
SelectNextAfter |
- ˄-⌥-⇧-Right | -
SelectNextBefore |
- ˄-⌥-⇧-Left | -
Selectall |
- ⌘-A | -
Selectdown |
- ⇧-Down | -
Selectleft |
- ⇧-Left | -
Selectright |
- ⇧-Right | -
Selecttoend |
- ⌘-⇧-Down | -
Selecttolineend |
- ⌘-⇧-Right | -
Selecttolinestart |
- ⌘-⇧-Left | -
Selecttostart |
- ⌘-⇧-Up | -
Selectup |
- ⇧-Up | -
Selectwordleft |
- ⌥-⇧-Left | -
Selectwordright |
- ⌥-⇧-Right | -
Smallerfont |
- ˄-⇧-, | -
SplitIntoLines |
- ˄-⇧-L | -
Stepinto |
- F11 | -
Stepout |
- ⇧-F11 | -
Stepover |
- F10 | -
Stop |
- ⇧-F5 | -
Switchconsole |
- ⇧-⎋ | -
Tab0 |
- ⌘-0 | -
Tab1 |
- ⌘-1 | -
Tab2 |
- ⌘-2 | -
Tab3 |
- ⌘-3 | -
Tab4 |
- ⌘-4 | -
Tab5 |
- ⌘-5 | -
Tab6 |
- ⌘-6 | -
Tab7 |
- ⌘-7 | -
Tab8 |
- ⌘-8 | -
Tab9 |
- ⌘-9 | -
ToggleTabs |
- ˄-M | -
Togglecomment |
- ⌘-/ | -
Toggleconsole |
- ˄-⎋ | -
Togglerecording |
- ⌘-⇧-R | -
Tolowercase |
- ˄-⇧-U | -
Touppercase |
- ˄-U | -
Transposeletters |
- ˄-T | -
Undo |
- ⌘-Z | -
Unfold |
- ⌘-⌥-⇧-L | -
Unfoldall |
- ⌘-⌥-⇧-0 | -
Zen |
- ⌥-Z | -
Zenslow |
- ⇧-⌥-Z | -
| Command Name | -Keybinding | -
|---|---|
Abortclicommand |
- Ctrl-C | -
AddCursorAbove |
- Ctrl-Alt-Up | -
AddCursorAboveSkipCurrent |
- Ctrl-Alt-Shift-Up | -
AddCursorBelow |
- Ctrl-Alt-Down | -
AddCursorBelowSkipCurrent |
- Ctrl-Alt-Shift-Down | -
Backspace |
- Command-Backspace | -
Beautify |
- Shift-Ctrl-B | -
Clearcut |
- ESC | -
Closeallbutme |
- Ctrl-Alt-W | -
Closealltabs |
- Ctrl-Shift-W | -
Closetab |
- Ctrl-W | -
Complete |
- Ctrl-Space | -
Copy |
- Ctrl-C | -
Copylinesdown |
- Alt-Shift-Down | -
Copylinesup |
- Alt-Shift-Up | -
Cut |
- Ctrl-X | -
Del |
- Delete | -
DuplicateSelection |
- Ctrl-Shift-D | -
Escapeconsole |
- Esc | -
EvalInteractive |
- Ctrl-Return | -
Find |
- Ctrl-F | -
Findnext |
- Ctrl-K | -
Findprevious |
- Ctrl-Shift-K | -
Fold |
- Alt-L | -
Foldall |
- Alt-0 | -
Golinedown |
- Down | -
Golineup |
- Up | -
Gotoend |
- Ctrl-End | -
Gotofile |
- Ctrl-E | -
Gotoleft |
- Left | -
Gotoline |
- Ctrl-G | -
Gotolineend |
- Alt-Right | -
Gotolinestart |
- Alt-Left | -
Gotopagedown |
- PageDown | -
Gotoright |
- Right | -
Gotostart |
- Ctrl-Home | -
Gototableft |
- Ctrl-[ | -
Gototabright |
- Ctrl-] | -
Gotowordleft |
- Ctrl-Left | -
Gotowordright |
- Ctrl-Right | -
Indent |
- Tab | -
Jumptomatching |
- Ctrl-P | -
Largerfont |
- Ctrl-Shift-. | -
Movelinesdown |
- Alt-Down | -
Movelinesup |
- Alt-Up | -
Movetableft |
- Ctrl-Alt[ | -
Movetabright |
- Ctrl-Alt-] | -
Newfile |
- Ctrl-N | -
Newfiletemplate |
- Ctrl-Alt-N | -
Newfolder |
- Ctrl-N | -
Nexttab |
- Ctrl-Tab | -
Openfilepanel |
- Shift-Ctrl-U | -
Opensettingspanel |
- Ctrl-, | -
Opentreepanel |
- Ctrl-U | -
Outdent |
- Shift-Tab | -
Outline |
- Ctrl-Shift-E | -
Paste |
- Ctrl-V | -
Previoustab |
- Ctrl-Shift-Tab | -
Quicksave |
- Ctrl-S | -
Quickwatch |
- Alt-Q | -
Redo |
- Ctrl-Shift-Z | -
Removeline |
- Ctrl-D | -
Removetolineend |
- Alt-Delete | -
Removetolinestart |
- Alt-Backspace | -
Removewordleft |
- Ctrl-Backspace | -
Removewordright |
- Ctrl-Delete | -
RenameVar |
- Ctrl-Alt-R | -
Replace |
- Alt-Shift-F | -
Replaymacro |
- Alt-R | -
Resume |
- F8 | -
Revealtab |
- Ctrl-Shift-L | -
Reverttosaved |
- Ctrl-Shift-Q | -
Revisionpanel |
- Ctrl-B | -
Run |
- F5 | -
Saveas |
- Ctrl-Shift-S | -
Savetabsession |
- Shift-Ctrl-S | -
Searchinfiles |
- Ctrl-Shift-F | -
SelectMoreAfter |
- Ctrl-Alt-Right | -
SelectMoreBefore |
- Ctrl-Alt-Left | -
SelectNextAfter |
- Ctrl-Alt-Shift-Right | -
SelectNextBefore |
- Ctrl-Alt-Shift-Left | -
Selectall |
- Ctrl-A | -
Selectdown |
- Shift-Down | -
Selectleft |
- Shift-Left | -
Selectright |
- Shift-Right | -
Selecttoend |
- Ctrl-Shift-End | -
Selecttolineend |
- Alt-Shift-Right | -
Selecttolinestart |
- Alt-Shift-Left | -
Selecttostart |
- Ctrl-Shift-Home | -
Selectup |
- Shift-Up | -
Selectwordleft |
- Ctrl-Shift-Left | -
Selectwordright |
- Ctrl-Shift-Right | -
Smallerfont |
- Ctrl-Shift-, | -
SplitIntoLines |
- Ctrl-Shift-L | -
Stepinto |
- F11 | -
Stepout |
- Shift-F11 | -
Stepover |
- F10 | -
Stop |
- Shift-F5 | -
Switchconsole |
- Shift-Esc | -
Tab0 |
- Ctrl-0 | -
Tab1 |
- Ctrl-1 | -
Tab2 |
- Ctrl-2 | -
Tab3 |
- Ctrl-3 | -
Tab4 |
- Ctrl-4 | -
Tab5 |
- Ctrl-5 | -
Tab6 |
- Ctrl-6 | -
Tab7 |
- Ctrl-7 | -
Tab8 |
- Ctrl-8 | -
Tab9 |
- Ctrl-9 | -
ToggleTabs |
- Ctrl-M | -
Togglecomment |
- Ctrl-/ | -
Toggleconsole |
- F6 | -
Togglerecording |
- Alt-Shift-R | -
Tolowercase |
- Ctrl-Shift-U | -
Touppercase |
- Ctrl-U | -
Transposeletters |
- Ctrl-T | -
Undo |
- Ctrl-Z | -
Unfold |
- Alt-Shift-L | -
Unfoldall |
- Alt-Shift-0 | -
Zen |
- Alt-Z | -
Zenslow |
- Shift-Alt-Z | -
For JavaScript files, Cloud9 provides analysis using a combination of our own analysis tools, as well as JSHint (specifically for Javascript code). Our language analysis can't detect if your program is correct, fast, or has memory leaks, but it can save you time by spotting things like undeclared variables, syntax errors, or other preventable typos.
-When Cloud9 detects an issue with your code, an icon appears in the gutter for the offending lines of code. There are three types of identifiers available for your code:
-
): these are non-critical, non-dangerous updates about your code
): these are potentially incorrect pieces of code
): these are incorrect lines of code that will almost certainly throw a runtime error when you try to run your scriptIf you hover over any of these icons in the gutter, you'll get a pop-up that presents some information as to what, exactly, the problem is. For example, suppose we have a variable declared, called fs, that is never used:
Notice also that fs has a strikethrough, to provide further visual clues that something is not quite right.
If you're concerned with the level of information that's listed in the gutter, you can always configure its "strictness" in the IDE preferences. For example, you could choose to hide every icon that isn't a warning or an error.
-JSHint provides additional configuration options that Cloud9 incorporates on a per-file basis. Typically, you declare these options as comments at the very top of a file, like this:
-/*jshint curly:true, debug:true */For a full list of the JSHint configutation options, please check the documentation page describing them.
- -Multiple cursors is one of the most useful features available in the Cloud9 editor. You can use multiple cursors to perform tasks like rename several variables or members at once, break up lists separated by commas, or insert the same text in multiple locations.
-
Multiple selections can be copied and pasted, and you can insert or remove entire lines in several locations.
-There are several ways to get access to mutliple cursors:
-One of the best capabilities is the ability to instantly select the next instance of your currently highlighted section. This is especially useful for refactoring several parts of the code at once. To do this, press Ctrl-Alt, followed by the right (or left) arrow key to navigate around in the code.
- -The project bar is located towards the left of the Cloud9 IDE: 
The buttons in the project bar allow you to reveal and hide panels for the IDE. In more detail:
-Clicking on any button expands its menu. Clicking on an expanded menu causes it to collapse, which gives you more room in the IDE to work with.
- -Every time you save a file on Cloud9, a diff of any changes made to it is saved by the server. Over time, you can view these file revisions as content is added and removed from your files. You can also restore a file to any previously saved state; you'll never have to worry about losing your work ever again!
-To access file revisions, you can either go to , or type Cmd-B on Mac or Ctrl-B on Linux/Windows. This will pop open the Revisions History panel. Red lines indicate lines that were removed; green lines indicate lines that were either added or changed.
At the bottom of the panel, there's a checkbox for showing all of a file's changes. Files changes that occur relatively soon to one another--say, a few seconds--are grouped by the revisions panel as one "change." If you prefer to see every single change as an individual entry, enable the Show all file changes checkbox.
-To restore a file to a previous revision, simply click the revisions button for that entry: 
On Hosted and SSH workspaces, Cloud9 provides two ways to run your application:
-First, open the file you want to run.
-Next, click on the Run button in the top menu bar in the IDE.
-
The Run button acts as a sort of shortcut to the Run panel, which will appear by default in the bottom of the IDE when you run a file. -This automatically runs the currently active file, and it will guess which Runner to use based on the extension of the file.
-When you're ready to stop your app, click on the Stop Button button in the menu bar at any time, or from the Run panel below.
-
On the Run panel, you'll notice a few more options you can set. -Filling these textboxes out creates a Run Configuration.
-For some default runners like Node.js, it's an option to Run in debug mode, which indicates that you want to run the current code through the debugger. -This will reveal (or collapse) the debugging tools panel described in Running and Debugging your code.
-The built-in Terminal provides access to all underlying system commands, including your Runners such as Node.js.
-Simply open up a Terminal from the "+" sign, or use CMD+T (Mac) / Control+T (Windows), and then execute the command you need to run your app, e.g. node server.js.
To find out where your application is running you can do two things:
-You have access to an incredibly powerful feature of Cloud9 that we like to call "running your own workspace."
-If you own a server that you can SSH into, you can log into that machine with Cloud9 and work on your projects remotely. To put this into perspective, you could have an entire toolchain set up on this machine--say, make with gcc, or ant with Java--edit the files with Cloud9 IDE, and build your toolchain via the IDE's terminal. Here's a video demonstrating how you could instantly compile a C program using an SSH workspace and Cloud9:
In order to connect Cloud9 with a server you own, you'll need two things:
-echo $OPENSHIFT_INTERNAL_IP and echo $OPENSHIFT_INTERNAL_PORT into the console. You can use this information to open any blocked connections.
-
-Once you've got those requirements set up, here's how you can create an SSH workspace of your own:
-In the Projects tab on the Dashboard, click on the next to MY PROJECTS and choose the option to Create a new project (see "Creating a New Project" if you need to review the steps to create a new project):
In the pop-up window that appears, select SSH for the project type:
You don't need to fill out every option provided by the dialog. Let's review what they are:
-which node, to see the full path/) path. Otherwise, it'll be set to a relative path, and Cloud9 assumes that you want to start from the folder your SSH server leaves you after login (usually the home or default folder).Fill in your SSH details and click the Login Test to verify that the settings are correct. If the test succeeds, go ahead and click Create to create your SSH connection. You'll then see your project in the Dashboard under My Projects:
-
When your new SSH is selected, you will see three buttons: Start Editing, SSH settings, and Delete (on the far right). SSH settings gives you access to the settings you just filled in, as well as the login test. This is useful to use in case your login credentials have changed.
-To get started with your SSH project, click on the Start Editing button. You'll instantly be taken to the editor, and have full access to your server's resources. As you can see in the video above, this means you can do exciting things like compiling C programs.
- -Cloud9 IDE also supports the ability to run a Rails application. The rails command is only available on the terminal.
To run a rails application:
-gem install railsrails new example -d mysqlconfigs/database.ymlrails s -b $IP -p $PORTThat's it! Your rails app will now be running.
-Do not try to access the project through the IP address and port number rails returns to you--it won't work!
-Setup MySQl - note your DB connect parameters
-edit configs/database.yml
development:
- adapter: mysql2
- encoding: utf8
- database: c9
- username: <%=ENV['C9_USER']%>
- host: <%=ENV['IP']%>Cloud9 IDE provides several ways to run and debug your code. We'll explore each of them in this section of the documentation.
-The following information applies to all of the above programming languages.
-Running your code in Cloud9 is really easy. First, open the file you want to run. Usually, this file is going to be the main entry point to your app; for example, if you're creating a server, you'd want to run the file that actually instantiates that server.
-There are two ways to run your code: either through the Run Panel, or through the run button in the menu bar.
-Next, click on the Run button in the project bar. You'll notice immediately that your active file is already available to run. Just double-click on the file, and you'll launch your app.
-When you're ready to stop your app, click on the button in the menu bar at any time.
At the bottom of the run panel, you'll notice a few more options you can set. Filling these textboxes out creates a run scenario, which is like setting up some configurations for the way your code runs. These options are:
-Of course, you can also save your run scenarios; just click on the add button at the top of the panel. When you're ready to run a scenario, click on its name in the Run panel list. To remove a run scenario, click on its name in the run panel list, and then click on the remove button.
-The run button in the menu bar acts as a sort of short cut to the Run panel. When clicked, the button automatically runs the currently active file. If you have a list of run scenarios already defined, the run button also presents a list of those:
-
Run in debug mode indicates that you want to run the current code through the debugger. Auto show & hide debug tools will reveal (or collapse) the debugging tools panel described below. You can also work with this presentation by going to , and configuring the debugger there.
-Every time you run a project, the console expands to reveal output from your program. If you're launching a server, Cloud9 provides you with a URL to access the project. Otherwise, any statements sent by your application's print statements (like console.log() for Javascript, print for Python, or puts for Ruby) are also shown here. For example:
Setting up a project to debug is done in very much the same way as running your code. The only difference is that you must click on the run settings icon in the Run panel 
and select Run in debug mode. Similarly, you can select Run in debug mode from the run button.
Initially, the only difference this will make is the expansion of the debugging toolbar to the right of the editor:
This toolbar, however, grants you the following capabilities:
-| Toolbar Icon | -Debugging Function | -Description | -
|---|---|---|
 |
- Debugging Navigation | -This is a set of tools you can use to move around your code while debugging. You can step into, over, and out of your code, or simply press play to run the process until the next breakpoint. | -
 |
- Callstack | -This is a structured list of information about the sequences of your code--basically, which functions are calling what, and where you are in the current process. It also stores local variables and function arguments, if present. You can use this feature to check how your code is running: |
-
 |
- Interactive Mode | -Lets you evaluate a piece of code, such as expressions or the values and properties of variables. The text field allows you to type any code you want, in case you discover a way to fix you problem:
- |
-
 |
- Variable Inspection | -This shows all the related variables (including functions) that are present in the current context:
- |
-
 |
- Breakpoint List | -At any point during your coding or debugging session, you can click on the gutter to apply a breakpoint:  . When debugging your code, the process pauses at your established breakpoints, so that you can inspect closely what's going on in a certain part of the code. You can click on the breakpoint list to view all the breakpoints in your workspace. If you click on the checkbox, you can enable or disable a breakpoint as well. You can also click on a breakpoint in the gutter to disable or enable it. |
-
While debugging, you also have the power of the live inspector. While hovering over a piece of code in the editor, you'll instantly get some floating text that describes the values of that variable, similar to Variable Inspection.
WordPress is web software you can use to create websites or blogs. -You can develop and host WordPress websites entirely on Cloud9 IDE
-Create a WordPress workspace from the WordPress template on your Cloud9 dashboard
-In order to run WordPress, you need a database to host your posts, articles, etc.
-You can use MySQL with our utility script mysql-ctl as explained in MySQL Setup
-To start MySQL server and create the required database, type in the terminal:
-mysql-ctl startOpen index.php in your workspace root and click the Run button
You can check the generated config for you In wp-config.php (you don't need to change anything there)
-define('DB_NAME', 'c9');
-define('DB_USER', getenv('C9_USER'));
-define('DB_PASSWORD', '');
-define('DB_HOST', getenv('IP'));
-define('WP_SITEURL', 'http://' . getenv('C9_PROJECT') . '.' . getenv('C9_USER') . '.c9.io');Aside from Goto File and Goto Definition, Cloud9 also offers more traditional search functionality. There are three types of search modes available: quicksearch, search and replace, and find in files.
-Quicksearch can be activated by hitting Cmd-F on a Mac, or Ctrl-F on a Unix/Windows machine. As you type in the quicksearch bar, the IDE instantly shifts to the next available result. This is a great way to quickly search around in your code without hassle.
Quicksearch offers the following options:
-Building on the features of quicksearch, search and replace allows you to replace segments of code in your file. You can again continue to use regular expressions, keeping in mind the groupings are prefixed with a dollar sign, i.e. $1.
Replacing offers two more options:
-In order to search across a set of files, you'll want to use the Find in Files feature. Here, you can search of a string or regular expression, within your entire workspace or a single directory. You can also filter based on extensions, like *.js or *.rb.
Find in files offers some of the same search options as quicksearch:
-One more feature of find in files is the ability to render search results either in the console or the IDE. You can fold results to keep them out of the way, or, edited the file if you're working down a list:
Bitbucket is a code-hosting services that offers both git and mercurial support. Projects can be listed as private or public, absolutely free. For more information on Bitbucket, visit https://bitbucket.org.
-We have integrated Bitbucket into the IDE to enable you to easily work on your public and private repositories. The following article explains how you can activate your Bitbucket account in Cloud9 IDE.
-You can manage your add-on services from your user profile that you can find in the dashboard. When you have just signed in, click Your Account on the top of the left-side panel. Here, you can change the settings of your account. At the bottom, you'll see a list of add-on services that are integrated into Cloud9 IDE. Click activate on the Bitbucket button:
-
A new window will pop-up on your screen. This window asks you to give authorization permission for the Cloud9 IDE application to interact in various ways with Bitbucket:
-
To finalize the activation, click on Allow. Next, you're redirected to your account page, where you'll notice that your Bitbucket account is activated. You can deactivate Bitbucket by simply clicking deactivate, which may be useful when you want to link your Bitbucket account to another Cloud9 account.
-Now that you have activated Bitbucket, you can start to create and manage your projects!
-There are several ways to manage Bitbucket projects in Cloud9 IDE:
-New projects are created from the dashboard. In the left-side panel, click on the to add a new project:
A new window will pop-up in which you can change your settings to your preferences:
-
After you click CREATE, the project is listed in your dashboard. Select the project to see its Project Profile, where you can start editing: 
There are a couple of things you should do first, before you can use all of git's power. First, you'll want to add a remote to the project. From the Cloud9 IDE command line, you can execute the following commands:
-git remote add [remote name] [remote url]remote url is the location of the project on Bitbucket; for example 'origin git@bitbucket.org:username/repository_name.git'. You'll have to create a Bitbucket project first in order to generate this URL. Adding a remote URL lets you freely push and pull your project.
Next, create a few new files inside your project. By default, you should already have a README.md. You can add these files to git with the following command:
-git add [file1, file2, file3, ...]Finally, create a commit that you can push to your remote:
-git commit -m 'added new files'Don't forget to push this commit out to Bitbucket:
-git push [remote name] masterTa-da! Your project is developed on Cloud9, and stored in Bitbucket.
-You can also create a project in Cloud9 IDE by cloning it from a URL. Once again, click on the , and select Clone from URL. A new window pops up, asking you:
You can find an examples of a Bitbucket URL on any of their repo description pages:
-
Paste the URL in the source field and click CHECKOUT. In the left-side panel, you'll see the project and its status turn into "Cloning in Progress". When this process is completed you can open the project and start editing it, just like any other project.
-When you provide Cloud9 IDE with your Bitbucket credentials, it provides a list of projects you haven't yet imported into the editor:
-
From this list, clicking on a project and selecting CLONE TO EDIT brings the repo into the IDE, just as if you cloned it from a URL.
- -GitHub is a code hosting service which offers you a lot of features to manage your public and private git repositories. For more information about GitHub and how to use it, visit https://github.com.
-We have integrated GitHub into the IDE to enable you to easily work on your public and private Git repositories. The following article explains how you can activate your GitHub account in Cloud9 IDE.
-You can manage your add-on services from your user profile that you can find in the dashboard. When you have just signed in, click Your Account on the top of the left-side panel. Here, you can change the settings of your account. At the bottom, you'll see a list of add-on services that are integrated into Cloud9 IDE. Click activate on the GitHub button:
-
A new window will pop-up on your screen. This window asks you to give authorization permission for the Cloud9 IDE application to interact in various ways with GitHub:
-
To finalize the activation, click on Allow. Next, you're redirected to your account page, where you'll notice that your GitHub account is activated. You can deactivate GitHub by simply clicking deactivate, which may be useful when you want to link your GitHub account to another Cloud9 account.
-Now that you have activated GitHub, you can start to create and manage git projects!
-There are several ways to manage GitHub projects in Cloud9 IDE:
-New projects are created from the dashboard. In the left-side panel, click on the to add a new project:
A new window will pop-up in which you can change your settings to your preferences:
-
Select git as your project type. After you click CREATE, the project is listed in your dashboard. Select the project to see its Project Profile, where you can start editing:
There are a couple of things you should do first, before you can use all of git's power. First, you'll want to add a remote to the project. From the Cloud9 IDE command line, you can execute the following commands:
-git remote add [remote name] [remote url]remote url is the location of the project on GitHub; for example 'git@github.com:/ajaxorg/node_chat'. You'll have to create a GitHub project first in order to generate this URL. Adding a remote URL lets you freely push and pull your project.
Next, create a few new files inside your project. By default, you should already have a README.md. You can add these files to git with the following command:
-git add [file1, file2, file3, ...]Finally, create a commit that you can push to your remote:
-git commit -m 'added new files'Don't forget to push this commit out to GitHub:
-git push [remote name] masterTa-da! Your project is developed on Cloud9, and stored in GitHub.
-You can also create a project in Cloud9 IDE by cloning it from a URL. Once again, click on the , and select Clone from URL. A new window pops up, asking you:
You can find an examples of a GitHub URL on any of their repo description pages:
-
Paste the URL in the source field and click CHECKOUT. In the left-side panel, you'll see the project and its status turn into "Cloning in Progress". When this process is completed you can open the project and start editing it, just like any other project.
-When you provide Cloud9 IDE with your GitHub credentials, it provides a list of projects you haven't yet imported into the editor:
-
From this list, clicking on a project and selecting CLONE TO EDIT brings the repo into the IDE, just as if you cloned it from a URL.
- -GitLab is open source Git management software used by more than 25.000 -organizations, see http://gitlab.org/.
-GitLab.com offers services for on-premise GitLab installations -and free private git repositoring on GitLab Cloud -with unlimited repo's and collaborators.
-To use your on-premise GitLab installation or GitLab Cloud please see -the instructions for cloning from a url.
- -MySQL is the world's most widely used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.
-Cloud9 IDE does not support installing a MySQL database (yet). As a workaround you can choose to connect your project to a MySQL database hosted elsewhere. Xeround -offers hosted MySQL instances and have a free tier available for getting started.
-Test the connection using the following script:
<?php
-
- $database = new mysqli('instanceNo.db.xeround.com', 'username', 'password', 'databasename', 'port');
-
- if($database->connect_errno > 0){
- die ('Database Error' . $database->connect_error);
- }else{
- die ('Connected!');
- }
- ?>Courtesy of Roger Qui of Polycadamy. This guide is elaborately explained in a video tutorial
- -MongoDB is a scalable, high-performance, open source NoSQL database.
-Document-Oriented Storage
-JSON-style documents with dynamic schemas offer simplicity and power.
Full Index Support
-Index on any attribute, just like you're used to.
Querying
-Rich, document-based queries.
In addition, MongoDB has many scalability features such as:
-Replication, Auto-sharding, Map/Reduce and GridFS
-MongoDB is preinstalled in your workspace. To run MongoDB, run the following below (passing the correct parameters to it). Mongodb data will be stored in the folder data.
$ mkdir data
-$ echo 'mongod --bind_ip=$IP --dbpath=data --nojournal --rest "$@"' > mongod
-$ chmod a+x mongodYou can start mongodb by running the mongod script on your project root:
-$ ./mongod
| Parameter | Description |
-| ------------------------------ | ----------------------------------------------------------------------------------------------- |
-| --dbpath=data | Because it defaults to /var/db which isn't accessible) |
-| --nojournal | Because mongodb usually pre-allocates 2 GB journal file (which exceeds Cloud9 disk space quota) |
-| --bind_ip=$IP | Because you can't bind to 0.0.0.0) |
-| --rest | Runs on default port 28017 |
You should use the host $IP instead of localhost as your driver connection url.
-e.g. in Node, it is: process.env.IP
MongoDB has drivers for all supported runtimes. Following are the most commonly used drivers:
-To access a shell prompt for the above MongoDB run the following.
-$ mongoCheck out docs.mongodb.org for details on how to use the shell
- -MySQL is the world's most widely used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.
-This article explains our first iteration of MySQL support in Cloud9. It makes it super easy to install, start and stop a MySQL instance right in your workspace. The nice thing is that every workspace will run a separate database so your projects will never interfere with each other. You can control MySQL with the mysql-ctl command line tool run from the terminal:
# start MySQL. Will create an empty database on first start
-$ mysql-ctl start
-
-# stop MySQL
-$ mysql-ctl stop
-
-# run the MySQL interactive shell
-$ mysql-ctl cliYou can then connect to the database with following parameters:
-| Option - | Value - | Comment - |
|---|---|---|
Hostname |
- $IP |
- The same local IP as the application you run on Cloud9 | -
Port |
- 3306 |
- The default MySQL port number | -
User |
- $C9_USER |
- Your Cloud9 user name | -
Password |
- - | -No password since you can only access the DB from within the workspace | -
Database |
- c9 |
- The database name | -
To import existing data into your database run following commands:
-mysql-ctl cliYou are now in the MySQL environment and can start the import:
-mysql> use c9
-mysql> source PATH_TO_SQL_FILE.sqlTo verify that everything got imported run:
-mysql> show tables;PostgreSQL comes preinstalled on every Cloud9 workspace, yay.
-$ sudo service postgresql start$ sudo sudo -u postgres psql
-psql (9.3.4, server 9.3.5)
-Type "help" for help.
-
-postgres=# \password
-Enter new password:
-Enter it again:
-postgres=# \q$ sudo sudo -u postgres psql Make sure you have logged into the PostgreSQL terminal and then you can just run:
-$ sudo sudo -u postgres psql
-postgres=# create database "groceries";$ sudo sudo -u postgres psql
-postgres=# \listCloud9 workspaces come with redis pre-installed.
-Start the server:
-sudo service redis-server startConnect with the client:
-./redis-cliSee http://redis.io/clients for drivers.
- -SQLite is a software library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. SQLite is the most widely deployed SQL database engine in the world. The source code for SQLite is in the public domain.
-You can open the terminal and create a database in a file db_test.db as follows:
$ sqlite3 db_test.db
-SQLite version 3.6.20
-Enter ".help" for instructions
-Enter SQL statements terminated with a ";"
-sqlite> create table tbl1(one varchar(10), two smallint);
-sqlite> insert into tbl1 values('hello!',10);
-sqlite> insert into tbl1 values('goodbye', 20);
-sqlite> select * from tbl1;
-hello!|10
-goodbye|20
-sqlite> CREATE TABLE tbl2 (
- ...> f1 varchar(30) primary key,
- ...> f2 text,
- ...> f3 real
- ...> );
-sqlite> .exitTo get to know sqlite commands, use the command: .help.
To exit sqlite, use the command: .exit.
SQLite has drivers for all supported runtimes.
-Following are the most commonly used drivers:
-In your Gemfile, include the line:
gem 'sqlite3'and in configs/database.yml, make sure you use:
adapter: sqlite3
-database: db/development.dbFrom the Terminal, run the following command:
-$ mysql-ctl installThe output will be:
-MySQL 5.5 database added. Please make note of these credentials:
-
-Root User: username
-Database Name: c9Now you can connect to the database using the ip 127.0.0.1 and the default port 3306. -You can also test it using our tool from the Terminal:
-$ mysql-ctl cli
-Welcome to the MySQL monitor. Commands end with ; or \g.
-Your MySQL connection id is 24
-Server version: 5.5.37-0ubuntu0.14.04.1 (Ubuntu)
-
-Copyright (c) 2000, 2014, Oracle and/or its affiliates. All rights reserved.
-
-Oracle is a registered trademark of Oracle Corporation and/or its
-affiliates. Other names may be trademarks of their respective
-owners.
-
-Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
-
-mysql> show databases;
-+--------------------+
-| Database |
-+--------------------+
-| information_schema |
-| c9 |
-| mysql |
-| performance_schema |
-+--------------------+
-4 rows in set (0.15 sec)From the Terminal, run the following command:
-$ mongod --bind_ip=$IP --nojournalThe output will include:
-...
-waiting for connections on port 27017Now you can open the mongo shell in a new Terminal, running following command:
-$ mongoTo stop the MongoDB instance press Control+C in the Terminal where mongod is running.
-Now have a look at the currently used database:
$ mongo
-mongo> db
-testAs you develop your application, often you just want to quickly demo your work-in-progress to a colleague, customer, or friend. -Or you want to pull in a fellow dev to debug an issue, or to pair program.
-Cloud9 enables you to do just these things, easily: share your entire development environment, the running application, or just a preview of your running application. -Here we describe how to access these options, and how to use each.
-The best place to start sharing is from the dedicated "Share" dialog. -Access it via the "Share" button on the right top of the IDE, or via the menu in Window > Share...
-
Here's what you see when you pull up the Share dialog:
-
Links to share
-If you enable the "Public" checkbox for an option, it will make the URL accessible for anyone with the URL. -For public workspaces all these URLs are public by default, but for private workspaces you have to enable them manually.
-Who has access
-This section refers to people you have specifically granted access to your entire development environment. -(R) gives Read access only to that person: the ability to open and view files, and to run your code. -(RW) or "Read/Write" also gives that person the ability to write to files.
-Invite people
-This section enables you to invite people to your workspace and immediately set if they have just "Read" or "Read+Write" rights. -You can invite people by their email address or Cloud9 username. -You can also choose whether or not send an automatic email to that person that they've been invited to your workspace.
-Cloud9's Collaboration features allow you to share your entire development environment so you can work on code together, much like working on a document in Google Docs. -You'll actually be able to see each other's cursor as you type, run your app, share the Terminal(s), and talk in the group chat. -See the screenshot below for what this looks like:
-
In order to share your entire development environment, do one of the following:
-If someone asks for either Read or Read+Write access to your workspace, you can accept or deny them from the Collaboration panel on the right.
-If you Run your application the result can be shared by copying the URL from the dialog. -This URL can only be viewed if it's made Public by checking the "Public" checkbox next to the "Application" in the "Links to share" section.
-People who have full read access to your workspace (as defined in the "Who has access") can view this URL whether it's public or not.
-If you Preview a file in your application, it can be shared by copying the URL from the dialog. -This URL can only be viewed if it's made Public by checking the "Public" checkbox next to the "Preview" in the "Links to share" section.
-People who have full read access to your workspace (as defined in the "Who has access") can view this URL whether it's public or not.
-To connect Cloud9 to a server via SSH, we first need to install a few dependencies on your system. -This is done by an open-source installer which you can find here.
-Usually the installation should succeed without any issues, but on some systems you will need to install a few dependencies manually. See below for common dependency issues you might run into.
-curl -O https://www.python.org/ftp/python/2.7.6/Python-2.7.6.tar.xz
-tar xf Python-2.7.6.tar.xz
-cd Python-2.7.6
-./configure --prefix=/usr/local
-make && make altinstallTo get around this issue make sure glibc-static is installed on the machine.
The status bar is designed to provide you with all sorts of information about your code--and additional functionality--without getting in the way of the IDE. It's quite tiny, and quite powerful, like a weight-lifting squirrel.
-You can find the status bar in the lower-right corner of the editor: 
. Keep in mind that the status bar is transparent, so it's able to camoflauge well with light or dark themes.
There's three pieces of crucial information available at all times: your current row, your current column, and, if you're highlighting characters, the status bar displays the number of bytes currently selected. If you're using Vim Mode, the status bar also tells you if you're in INSERT mode.
-If you click on the status bar, it expands into a menu that provides a smaller set of the full IDE preferences. These options only deal with the IDE editor:
-| Preference Name | -Description | -
|---|---|
| Show Invisibles | -Shows invisibles characters in the editor, like tabs and line breaks | -
| Wraps Lines | -Wraps lines according to the line margin defined, or your browser's window. Otherwise, lines run off the current viewport. | -
| Code Folding | -When enabled, allows you to show or hide "blocks" of code | -
| Full Line Selection | -When highlighting lines, this option will highlight all ending whitespace, until the end of the editor window | -
| Highlight Active Line | -Presents a darker shade in the code editor to indicate which line you're currently on | -
| Show Indent Guides | -Shows the indent guides in the editor, letting you see your code's nestings | -
| Show Gutter | -Shows the gutter in the editor, which indicates line numbers, warnings, and errors | -
| Highlight Selected Word | -If you highlight a word, this highlights all matching words in the editor | -
| Auto-pair Quotes, Brackets, etc. | -When enabled, typing ", (, or [ will actually make two characters appear. In addition, whenever you highlight a word and type one of these characters, it is surrounded by that character (e.g. words becomes "words") | -
| Auto-hide Horizontal Scrollbar | -hen this is enabled, this will hide the horizontal scroll bar in the editor. Note that this has no effect in Mac OS X 10.7 (Lion) and above, since all scrollbars, by default, auto-hide. | -
| Font Size | -Changes the font size of the code in the editor | -
| Show Print Margin | -Shows (and defines) the number of characters possible in line, before it wraps | -
| Soft Tabs | -Indicates how many spaces a single tab represents | -
| Mouse Scroll Speed | -Defines the speed of the mouse scrolls | -
Cloud9 IDE has varying levels of support for different programming languages. -Usually you will at least have Syntax Highlighting in the editor and the ability -to run apps from the Terminal.
-Cloud9 IDE develops and builds on Ace, an -editor for writing code online. Cloud9's Ace editor currently supports -highlighting for about 100 programming languages, and any changes made to Ace are -reflected back into Cloud9 IDE.
-The list of supported languages is growing, and you can get the full list from -the menu. Feel free to create an issue in the Ace repository -for new requests, or add your own syntax highlighting mode.
-See Syntax Highlighting & Themes for more -info.
- - - - - - - - - - - - - -The Run panel currently supports running the following by default:
-If you'd like to run any other language, simply create a new "Runner".
-You can also do so from the Terminal.
-Each workspace is an Ubuntu VM with the standard tools like bash, make,
-gcc, vim, java SDK or perl pre-installed.
Cloud9 IDE develops and builds on Ace, an editor for writing code online. Ace supports over two dozen different themes for highlighting your code, and any changes made to Ace are reflected back into Cloud9 IDE.
-You can change your current theme by going to , and selecting from one of the many options. By hovering over the menu items, you'll be able to get a preview of the theme. To activate a theme you like, just click on its name.
-The IDE contains the following themes:
-By default, files are highlighted based on their file extension. You can change this by going to , and selecting a different context. This forces a single file to use a different highlighter.
-We support highlighting for at least the following languages, and many more:
-We are always adding new themes and new languages to support, so check the menu often! Since we use Ace to provide syntax highlighting, feel free to log an issue there for new requests.
- -Cloud9 IDE offers advanced tab features to make working with multiple files easy. By right-clicking on any tab, you'll open up the tab context menu:
-
These feature include:
-To the left of the tab menu is another button that offers additional functions for tab navigation:
Tab sessions is a unique feature that is useful when dealing with projects that involve juggling between many tabs. Essentially, tab sessions lets you save the current state of the tabs. You can close your workspace, switch to a different branch, and instantly reload your previously opened files. You'll no longer need to work with opening and closing multiple files.
-To use tab sessions, select Save Tab Sessions from the tab button menu. Give it a unique name. When you're ready to restore your tab sessions, just select Load Tab Sessions.
-If you find that you've got too many tab sessions defined, you can always choose to delete them from the same tab menu.
- -The terminal provides you with a TTY interface for direct access to the machine that Cloud9 is running on. If you're running your own workspace, this is the server you've SSH'ed into. If you're using the hosted Cloud9 platform, this is the server your code runs on.
-sudo, are restricted, you can completely destroy your workspace, by doing something like rm -rf. Use your power wisely!
-
-To create a new terminal, go to , or simply type Alt-T on the keyboard. The terminal has the following capabilities:
-
Many times your app returns errors which are hard to understand and even harder to resolve. This is where the Terminal Monitor comes in. -The following video gives a quick overview of the features and how the Terminal Monitor helps you write better apps.
- - -If you would like to propose additions or help which Terminal Monitor should provide, please send a message to support@c9.io
- -The editor is the most important element of any IDE; that's why Cloud9 developed ACE. ACE is a high-performance code editor for the web that supports over 40 different languages, over two dozen themes, and can still work faithfully on large documents (at last count, four million lines of code was the upper limit). It also contains a bevy of features you'd expect from traditional desktop editors. Among these include:
-Cloud9 IDE allows you to easily add files to your curent workspace at any time. You can drag and drop files from your computer directly into the Project Files pane, and the IDE will add them to your project. Google Chrome users can also drag entire folders into the IDE.
-If a file transfer is halted for some reason--say, if you lose your internet connection--the upload resumes once the connection returns. As the files transfer, the IDE lets you know the current status of the overall transfer, as well as the status of each file being uploaded:
-
You can also get an exact copy of your workspace to save on your computer. By going into , you will be provided with a Zip file containing the entirety of your project.
- -Cloud9 IDE doesn't provide out-of-the-box support for the Go language, but with -a few quick steps you can set up Cloud9 to build and run apps in Go!
-First, create a new Custom workspace and call it whatever you want:
-
After your new workspace is created, click the "start editing" button. At the -bottom of your workspace you will see the Terminal. If you prefer to have it -fullscreen, you can launch a terminal tab by pressing Alt-T, or from the menu: -.
-From the terminal you can install & setup everything on the underlying virtual -environment that every workspace is provided with.
-When you first enter your Terminal, you will be in your workspace root folder,
-which is a number such as ~/562166. Make a note of this directory name, as
-you'll need it later.
Let's use your home directory to download the Go distribution; to get there, -simply enter the following in the Terminal:
-cd ..To download the Go distribution enter the following:
-wget https://go.googlecode.com/files/go1.1.1.linux-amd64.tar.gzAfter the download is complete, extract the archive:
-tar -xzf go1.1.1.linux-amd64.tar.gzOnce the extraction is done, you will notice a new go directory in your home
-directory. Feel free to delete the archive file you downloaded.
The last step is to configure the environment so it can see the Go distribution -as well as our workspace Go files. To do this, edit your bash configuration -in the Terminal using vim (or emacs, nano, any simple editor will do):
-vim ~/.bashrcAdd the following lines to your .bashrc file:
-# setup go configuration
-export GOROOT=$HOME/go
-export PATH=$PATH:$GOROOT/bin
-
-# setup workspace t
-export GOPATH=$HOME/562166
-export PATH=$PATH:$GOPATH/binUpdate the GOPATH line above to use the workspace directory you noted earlier
-(so don't use $HOME/562166).
After you save your .bashrc file, load the new settings:
-source ~/.bashrcThat's it! You should be good to Go (pun intended).
-While using Cloud9 IDE, you have access to the Python runtime. Accessing the command is no different than the way you'd use Python on your computer; just open the command line and type python. Currently, we run version 2.6.6.
To run a Python program that you've created, you can either:
-python, followed by the name of your program; for example python hello_world.pyAs a quick demonstration, open a new file, and paste this Python code into it:
-#!/usr/bin/python
-
-print "Hello World!";When you hit the button in the menu bar, the console will print out Hello World!.
While using Cloud9 IDE, you have access to the Ruby runtime. Accessing the command is no different than the way you'd use Ruby on your computer; just open the command line and type ruby. Currently, the default version is 1.9.3.
To run a Ruby program that you've created, you can either:
-ruby, followed by the name of your program; for example ruby hello_world.rbAs a quick demonstration, open a new file, and paste this Ruby code into it:
-#!/usr/bin/ruby
-
-puts 'Hello world'When you hit the button in the menu bar, the console will print out Hello world.
We have rudimentary support for rvm, that allows you only to switch between versions 1.8.7 and 1.9.3. We don't support rvm per-project or global gemsets.
To use rvm, open the terminal and type:
# to switch to version 1.8.7
-rvm use 1.8
-rvm use 1.8.7
-
-# to switch to version 1.9.3
-rvm use 1.9
-rvm use 1.9.3However, if you like, you can install the "real" rvm by executing the following command in the terminal:
curl -L https://get.rvm.io | bash -s stableTo grab the latest rvm AND the latest Ruby version, type:
curl -L https://get.rvm.io | bash -s stable --rubyCloud9 IDE was built on top of the Node.js platform, and as such, you have full access to the node runtime. Currently, we support running both version v0.6.x and v0.8.x.
In this section, we'll walk you through the creation of a simple Hello World program. To get started, you'll first need to create a (GitHub or Mercurial) project. If you need a refresher on how to do this, please refer to Creating a New Workspace.
-Once you're in Cloud9, create a new file called server.js. Type the following code in the file:
var http = require('http');
-http.createServer(function (req, res) {
- res.writeHead(200, {'Content-Type': 'text/plain'});
- res.end('Hello World\n');
-}).listen(process.env.PORT, process.env.IP);This is a Node.js HTTP server. It returns a simple "Hello World" page every time you access the page. In short, you are creating an HTTP server with a callback function that is called for each request.
-In the callback function, you create a response with a status code of 200 (indicating that the request was fulfilled successfully) and the message "Hello World". Finally, you specify which port and IP address the server runs on. When Cloud9 IDE runs servers, you set and retrieve the IP address and port number with the process.env.IP and process.env.PORT variables.
When you hit the button in the menu bar, the console will print out the following message:
To see your application in action, click on the link created for your project. You should see your "Hello World" application open up in a new browser tab:
.
We have rudimentary support for nvm, that allows you only to switch between Node.js versions 0.6.21 and 0.8.x.
To use nvm, open the terminal and type:
# to switch to version 0.6.21
-nvm use v0.67
-
-# to switch to the latest 0.8.x
-nvm use v0.8Zen mode is a full screen coding environment designed to make you more productive. It essentially removes all the additional UI elements in Cloud9 IDE, and places you in a harmonious relationship with your code.
-To activate zen mode, simply hover over the upper right corner of the code editor, and click the icon that appears. Keep in mind that you'll need to have a file open before you can launch zen mode. You can resize your window by holding and dragging the left or right border.
-To get out of zen mode, hover over the same corner and click the same icon.
-You can also enter and exit zen mode via keyboard shortcuts, command line, or from the menu bar at .
- -| Parameter + | Description + |
|---|---|
| --dbpath=data | +Because it defaults to /var/db which isn't accessible) | +
| --nojournal | +Because mongodb usually pre-allocates 2 GB journal file (which exceeds Cloud9 disk space quota) | +
| --bind_ip=$IP | +Because you can't bind to 0.0.0.0) | +
| --rest | +Runs on default port 28017 | +
| `Hostname` | `$IP` | -The same local IP as the application you run on Cloud9 | +The environment variable 'IP' (type in a terminal: echo $IP) | |||||||||||||||||||||||
| `Port` | @@ -50,12 +50,12 @@ You can then connect to the database with following parameters:||||||||||||||||||||||||||
| `User` | `$C9_USER` | -Your Cloud9 user name | +Your Cloud9 user name (again an environment variable) | |||||||||||||||||||||||
| `Password` | -- | -No password since you can only access the DB from within the workspace | +` |
+ No password (empty string); access is restricted to the the workspace | ||||||||||||||||||||||
| `Database` | @@ -80,6 +80,86 @@ You are now in the MySQL environment and can start the import: To verify that everything got imported run: mysql> show tables; + +Some useful CLI commands (please note the semicolon at the end of most of them): +
| Command + | Description + |
|---|---|
| `help` | +`list all mysql commands` | +
| `show databases;` | +`list the available databases` | +
| `use c9` | +`select/use database c9` | +
| `show tables;` | +`list the tables of the current database` | +
| `exit` | +`close the mysql command line tool` | +
| `select * from mysql.user;` | +`show all records/columns from system table user` | +
| Option + | Value + | Comment + |
|---|---|---|
| `Hostname` | +`$IP` | +The same local IP as the application you run on Cloud9 | +
| `Port` | +`6379` | +The default Redis port number | +
| `Password` | +`` | +No password since you can only access the DB from within the workspace | +