Using Codio - Cloud-driven IDE

Codio in Web development

I have used Codio in web development for six months now. For a comparison other IDE's which I have used are Visual Studio from version 2005 to 2013, Aptana Studio 3, Dream Weaver and NetBeans 6. Visual Studio is my main IDE because I'm using it everyday at work. Forever I think it's not the best tool for Web development. Aptana is the one closest to Codio in feature-wise.

Why Visual Studio is not best Web development IDE?

This is really a matter of opinion, but I don't like the project files and solution files which are mandatory to use Visual Studio. When I'm doing web development, all I want to see is plain .js and .html files (maybe some css sometimes...).

Previewing project is another huge thing. Even though Visual Studio has done great job improving web servers in VS, but I still think hosting own service is just an extra step which I don't want to have in development. 

Third thing is that, if you have done your project with Visual Studio, you are depended from IDE. Well you can edit files directly with some other IDE or text editor, but the infrastructure (testing, deployment, used VS plugins, etc.) are linked to one computer, one Visual Studio version and maybe even into one Visual Studio installation. Even though you can put all those settings into version control, but still how easy it is to setup new development environment? Also if you have multiple devices, you have to sync your settings between machines (keyboard settings etc.).

I think web is mobile, so why wouldn't your development environment be a mobile?

All these things are driving me towards a cloud hosted IDE.

OK, let's get started!

When you login into Codio, first thing you see is a Dashboard.

Codio dashboard

Dashboard allows you to quickly open recent projects or launch a new project. Also your name is mentioned three times in dashboard, so you wont forget it! Lets start up by creating a new project

New project
At new project screen, you can select which kind of template you want to use, or maybe preload some code from GIT. I choose "Empty" template.

Codio IDE basic view
Here you can see a basic view of Codio IDE. I'm currently using dark theme, but there are lots of different themes available. On a left side there is a "solution tree" which shows available files and right side is dedicated to source files. On top there is a regular menu toolbar. I will now create a new Javascript file.

Added new Javascript file
Now I have a new javascript file, which has appeared at left-side file tree. File automatically opens in IDE also. As you can see from picture, auto completion is supported at Javascript. Well lets see whats my regular work routine with Codio.

Working with Codio

This is what I see after logging into Codio and selecting a project.

One of my projects in Codio
After some hard coding I'm ready to preview what I have done (or usually i just have a automatically reloading window open in another monitor, but anyhow)
Preview "window" can be opened inside IDE or in another browser tab (or even in another browser). On top of the page, there is a URL which can be copied and shared with friends. If you are sharing development URL directly, you also have to give your development user account to your friend, but only if you are using private projects! Public projects can be shared without any accounts, by just sending your personal development URL to someone else.

 When you are ready to deploy. Click "Tools menu" and select "Deployment" or just press ALT + F9. Yes, shortcuts are also supported in Codio.

When you have deployed your site, you will get a nice message about success/failure of your deployment.

Disclaimer: The opinions expressed herein are my own personal opinions. I don't work for Codio and my blog is not sponsored by Codio.


  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Online Training from India. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.
    JavaScript Online Training from India

  2. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as

    updated one, keep blogging…Azure Online Course