In some of my earlier blog posts, I outlined the process of setting up a local development environment which involves installing and configuring up a web-server with PHP. This process can become second nature, and is the preferred approach for many developers, but utilizing a web-based IDE is a new option that has many surprising benefits.

Web IDEs have been around for a few years, but only recently with the improvement in browser capabilities, more sophisticated editor capabilities, and the integration of virtual machines, have them become a viable option. For years I watched from afar, and scoffed at being able to do any real development in such an environment, but after a recent round of testing, I have come away impressed!

Read on to find out the many benefits and a walk-through of getting a powerful Grav development environment setup for free!

Benefits of a Cloud IDE

Developing with a web-based or cloud IDE actually has some very tangible benefits:

• The key benefit these services offer is the ability to have your development environment anywhere and everywhere. If you have an Internet connection, you can easily access your setup.
• The ability to quickly serve and host your dynamic code (PHP/Python/Ruby/NodeJS/etc) with a development virtual machine.
• Development virtual machine means full control over server setup
• Easily share your code and progress with others.
• Modern IDE features such as syntax highlighting, code completion, multiple cursors, tabs, etc.
• Integrated versions and history to quickly recover from mistakes.
• Simple build mechanisms if you require them.
• Integration with 3rd party services such as GitHub, BitBucket, DropBox, GoogleDrive, etc.
• Quickly and easily provision new workspaces for multiple projects even with differing server requirements.

Such power and capabilities with pretty much instant setup, mean that a cloud IDE is a fantastic alternative from traditional development paradigms. It's also even more compelling if you are using an OS that is not does not come with many of these web development requirements without jumping through the many hoops of installation and configuration.

I'm looking at you Windows!

Even better, it actually makes using a super-cheap ChromeBook a solid option as a dedicated development machine. where you might of thought you were limited to just consuming content on the Internet, you can now actually create it!

Take your Pick!

It seems in the last couple of years a new cloud IDE is released weekly. There are many to choose from, and I've tried a bunch, but most of them still don't really have the complete package that is required for an enjoyable development environment. My top picks are Cloud9, Codeanywhere, and Koding:

Cloud9

Cloud9 is one of the leaders in this field, and that's not surprising when you consider the powerful editor is based on Ace which is a fantastic open source project in it's own right.

The overall UI of Cloud9 has a very professional and full-featured IDE feel with lots of useful slide out panels. The editor can be split horizontally and vertically and you can easily drag editor tabs to arrange them just as you would in a desktop IDE. Cloud9 also offers a huge set of options that let you configure everything from the color and style of the IDE to how the IDE functions. Really an impressive setup for a web-based solution!

You can preview your site in a browser tab, or even live-preview markdown files which makes it a fantastic option for Grav! There is also integration with Sauce Labs which allows you to show browser windows in a variety of of devices, which makes it great for cross-platform testing.

Other great features include a persistent development virtual machine (based on Ubunutu Linux) that come pre-provisioned with almost everything you could need and even comes setup so that Apache runs under your user account user/group (ubuntu in this case) so that there are no permissions issues with Grav writing caches/logs/etc. The bottom panel gives quick access to a very nice and full featured terminal with color support, as well as a quick access tab to the Apache & PHP Running process with current log output.

There are too many other great features to mention here, but some of those include the powerful collaboration features (think Google Docs but for development), Powerful Image editing, FTP/SFTP support, VIM keyboard bindings, and Emmet support.

Combined with all this great functionality is the flexible pricing structure that provides a real every-day usable solution even with the basic Free plan. You have to step up to at least the Small plan at $19/month to get the much coveted always-on feature that lets you leave your virtual machine running even when your not in the IDE. Color me impressed, Cloud9 has all the bases covered!

Codeanywhere

Codeanywhere is a solid contender in the cloud IDE landscape. The overall UI looks quite similar to Cloud9 but doesn't have quite as many panel and configuration options. This simpler approach may appeal to some users who are not used to using full-fledged IDEs.

Overall the editor is quite configurable and the tabs can be dragged around and rearranged into multiple columns and rows. There are some predefined layouts, but not as much control or flexibility as Cloud9. You can customize the editor color scheme, but there's only a very limited number of themes available. Overall, there are quite a few settings to provide customization of the IDE including powerful linting options and keyboard shortcuts.

The VMs, or DevBoxes as they are called in Codeanywhere lingo, are very similar to Cloud9s, providing a full Ubuntu-based system that can be customized and modified to suit your needs.

A couple of the standout features are the really nice Revisions capability which allows you to easily see all changes you have made to any file. This means you can easily roll back to a previous version if you make a mistake. Also the editor has a nice Minimap that is very reminiscent of the one in Sublime Text 3. Another useful features is the great integrations with Git, SSH, SFTP, FTP, Google Drive, DropBox and S3 containers.

Pricing-wise, Codeanywhere's Free plan is quite usable. Upgrading to the $7/month Freelancer package adds increased limits and more capabilities including always-on. In general the pricing is more economical than Cloud9, so if you don't need all the features, Codeanywhere is a solid solution that gets the job done with minimal fuss.

Koding

Koding takes a bit of a different approach to both Cloud9 and Codeanywhere with a more minimal and focused solution. There's a distinct lack of side panels and extra toolbars of any kind. The benefit of this is that the whole UI is very focused and clutter-free, which ensures you only see what you need, and nothing more. You can add and remove columns and rows but you cannot drag tabs between these panels which is a bit of a pain. Also there is no browser tab, but you can see your site live by going to your assigned URL or custom domain.

There are not as many customization options, but it does have all the essential editor preferences including a good set of editor themes. The simpler UI ensures that you can quickly understand all the capabilities and this leads to a very simple and easy to use system.

One of the unique features that Koding provides, is a direct integration in a discussion system that allows you to quickly get help using Koding. However, as Koding is so easy to understand, I'm not sure how much you will even need this!

Regarding performance, once the VM has started up, things run very quickly with the whole UI having a desktop-like responsiveness. The VM itself is CRAZY FAST!!, absolutely no complaints there, it is definitely the fastest of the bunch.

The Free version comes with 1VM but supports multiple workspaces. The VM will timeout and shutdown automatically after 60 minutes of inactivity. This is a bit annoying because it does take a minute or so to restart. Cloud9 and Codeanywhere do not have this issue, you can leave the IDE up for hours or days, and it will just work instantly upon your return. The $10/month Hobbyist plan provides the always-on VM that should get around this particular issue.

Overall Koding is a great option, and one that might appeal to users who feel a bit overwhelmed with the more traditional IDE look provided by Cloud9 and Codeanywhere.

Setting up Grav

The process for getting Grav up and running on each of the IDEs I have mentioned is similar but subtlety different for each service. Below are the steps you can follow to setup the full-featured Blog Site Skeleton on your own:

Cloud9

1. From your Dashboard click the green Create New Workspace button in the top left, then click Create a New Workspace from the dropdown options.

2. Give your workspace a useful name such as grav, Leave the Hosting set to Hosted and click the PHP stack option. Then click the green Create button.

3. Withing a few seconds you should see your new workspace listed under the My Projects section. Select it and click the green Start Editing button to bring up the IDE.

4. Your IDE will initialize and you will see three files in the workspace: hello-world.php, php.ini, and a README.md.

5. There is one requirement needed for Grav to function. In the bash terminal window below, type:

   $ sudo apt-get update
   $ sudo apt-get install php5-curl
   $ sudo sevice apache2 restart

   Enter Y when prompted to install the required packages.

6. Now we can download and install the Grav Blog skeleton itself:

   $ wget https://github.com/getgrav/grav-skeleton-blog-site/releases/download/1.0.1/grav-skeleton-blog-site-v1.0.1.zip
   $ unzip grav-skeleton-blog-site-v1.0.1.zip
   $ mv grav-skeleton-blog-site blog-site
   $ cd blog-site

7. Start Apache & PHP by click the Run Project toolbar button. This will spawn a new window at the bottom of the IDE with information and logs.

8. Click Preview and then Preview Running Application in the toolbar to bring up a browser. This will show you a listing of your current ~/workspace folder in a new browser tab. Simply click on the blog-site folder and your browser window should load with Grav running as expected.

Codeanywhere

1. From the File menu select Add, then choose DevBox

2. Select PHP from the Codeanywhere Stacks popup and click the green Next button.

3. Ensure the default Ubuntu option is choosen, and pick a suitable name, such as grav. Then click the green Create button.

4. There are a couple of housekeeping tasks we need to perform before we go much further. First we want to modify the Apache2 envvars so that it runs under our current user. If you have never used vi, I suggest you quickly read-up on the essentials.

   $ sudo vi /etc/apache2/envvars

   Scroll down the file and modify the user/group information:

   export APACHE_RUN_USER=cabox
   export APACHE_RUN_GROUP=cabox

   Save the file and restart Apache2:

   $ sudo service apache2 restart

5. Then we need to install some missing php modules:

   $ sudo apt-get update
   $ sudo apt-get install php5-curl openssl
   $ sudo sevice apache2 restart

6. Now we can download and install the Grav Blog skeleton itself:

   $ wget https://github.com/getgrav/grav-skeleton-blog-site/releases/download/1.0.1/grav-skeleton-blog-site-v1.0.1.zip
   $ unzip grav-skeleton-blog-site-v1.0.1.zip
   $ mv grav-skeleton-blog-site blog-site
   $ cd blog-site

7. Start the box, by right-clicking the grav DevBox and clicking Run Project. This will show you a listing of your current ~/workspace folder in a new browser tab. Simply click on the blog-site folder and your browser window should load with Grav running as expected.

Koding

1. In the IDE click the + sign on the right of the Your VMs section of the sidebar. Then click Create a Koding VM. This will create a default VM, you just need to Turn it On to start it up. This will take a minute or two.

2. When the IDE comes up, you can create a new workspace by clicking on Workspaces under the default koding-vm-0 VM. Enter the name grav for the workspace name. This whould bring up a new Terminal window and you should be left in ~/Workspaces/grav.

3. There are a couple of housekeeping tasks we need to perform before we go much further. First we want to modify the Apache2 envvars so that it runs under our current user. If you have never used vi, I suggest you quickly read-up on the essentials.

   $ ls -l

   Will output something like this:

   -rw-r--r--  1 joeblow joeblow  871 Apr 23 21:56 README.md

   You will need to use whatever user/group you see here in the next step:

   $ sudo vi /etc/apache2/envvars

   Scroll down the file and modify the user/group information:

   export APACHE_RUN_USER=joeblow
   export APACHE_RUN_GROUP=joeblow

   Save the file and restart Apache2:

   $ sudo service apache2 restart

4. Then we need to install some missing php modules:

   $ sudo apt-get update
   $ sudo apt-get install php5-curl php5-gd
   $ sudo sevice apache2 restart

5. Now we can download and install the Grav Blog skeleton itself:

   $ wget https://github.com/getgrav/grav-skeleton-blog-site/releases/download/1.0.1/grav-skeleton-blog-site-v1.0.1.zip
   $ unzip grav-skeleton-blog-site-v1.0.1.zip
   $ mv grav-skeleton-blog-site blog-site
   $ cd ~/Web
   $ ln -s ~/Workspaces/grav/blog-site

6. Koding doesn't have a built-in browser, so you need to click on the little option button on the right of the koding-vm-0 VM in the sidebar. In the General tab you will see a link for Assigned URL, simply click this link and you will launch a new browser tab with the very pretty default Workspace examples. Simply append /blog-site to the URL and you should see your site.