We hope you find this tutorial helpful. In addition to guides like this one, we provide simple cloud infrastructure for developers. Learn more →

How To Install and Configure Codiad, a Web-Based IDE, on an Ubuntu VPS

Posted Mar 25, 2014 24k views Applications Ubuntu


While most developers have a preferred development environment and have specific tools and processes that are familiar, this can sometimes break down when not in your usual location. Luckily, there are projects like Codiad that can help you develop your projects from anywhere with web access.

Codiad is a complete IDE (integrated development environment) that can be accessed through any web browser. You can work on multiple projects in many different languages and even get access to live previews for web based projects. The IDE include file management, auto-syntax highlighting, and a great plugin system to extend the feature set.

In this guide, we'll discuss how to get Codiad up and running on an Ubuntu 12.04 VPS instance.

Install PHP and Apache

Since the project is basically a self-contained web directory, we'll need to set up a web server and PHP processing in order to get this running.

Let's start by installing the components. Let's update our package database and then install the needed packages. We will also install git because we will need this later:

sudo apt-get update
sudo apt-get install apache2 php5 libapache2-mod-php5 php5-mcrypt git

After the software has been installed, we'll need to edit some values. First, let's open a file and tell the Apache web server that we want to prefer PHP files to HTML when getting a directory listing:

sudo nano /etc/apache2/mods-enabled/dir.conf

Delete the index.php line from the middle of the DirectoryIndex and move it to the front, like this:

<IfModule mod_dir.c>

          DirectoryIndex index.php index.html index.cgi index.pl index.xhtml index.htm


Save and close the file.

Configure the Apache Virtual Hosts

Now, we'll need to modify our Virtual Hosts file so that we can add a location for our IDE files. Open the default Virtual Hosts file now with root privileges:

sudo nano /etc/apache2/sites-available/default

Within the VirtualHost section, outside of any other Directory section, we'll want to add an additional Directory section that contains information about the project we're setting up.

We will be placing our Codiad directory in our home directory, so that we will have easy access to our files, so use your username instead of demouser in the following config. We're going to create an alias and then create rules for the directory:

    . . .
    <Directory /var/www/>
            Options Indexes FollowSymLinks MultiViews
            AllowOverride None
            Order allow,deny
            allow from all

    Alias /codiad /home/demouser/Codiad
    <Directory "/home/demouser/Codiad">
            Options -Indexes FollowSymLinks MultiViews
            AllowOverride All
            Order allow,deny
            allow from all

    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    . . .

Save and close the file when you are finished.

Restart Apache when you are finished:

sudo service apache2 restart

Download and Configure Project Files

Now, we need to get the actual Codiad files. We will put the folder in our home directory. We can get the project from their GitHub page.

First, switch to your home directory, and then clone the project:

cd ~
git clone https://github.com/Codiad/Codiad.git

This will create a directory called Codiad in your home directory. Enter that directory now:

cd Codiad

Here, copy the example configuration file into production:

cp config.example.php config.php

Currently, all of the files within this directory are owned by our regular user (demouser in this example). The group owner is also our user group. We need to transfer the group ownership of a few select pieces to our web server user.

We can do this by typing:

sudo chown :www-data config.php workspace/ plugins/ themes/ data/

This will allow our web server to write to a few resources, which is necessary for the correct functionality of the app.

Password Protect the IDE Interface

Since we needed to allow write permissions to certain folders and files, we can add an extra layer of security by setting up some password protection. We can do this by creating a password file outside of our app directory, and then using this to authorize users.

Let's create the password file within the Apache configuration directory. We will call it codiad.passwd. We can add our username and create this file by typing:

sudo htpasswd -c /etc/apache2/codiad.passwd username

You will be asked to select and confirm a password for the user authorization. The utility then hashes your password and enters it into the file. We can see it by typing:

cat /etc/apache2/codiad.passwd


Let's lock this down so that only root and the web server have access to this file:

sudo chown root:www-data /etc/apache2/codiad.passwd
sudo chmod 0640 /etc/apache2/codiad.passwd

Now, let's create an .htaccess file within our app directory that will reference this file for authorization purposes.

cd ~/Codiad
nano .htaccess

Inside this file, we need to reference the password file that we created and then give a message for the password prompt. It's probably best not to give too much specific information about the service living behind the prompt:

AuthUserFile /etc/apache2/codiad.passwd
AuthGroupFile /dev/null
AuthName "Authentication required.  Please enter credentials"
AuthType Basic
Require valid-user

Save and close the file when you are finished.

Now, let's restart Apache again just to be safe:

sudo service apache2 restart

Using Codiad

Our configuration is now complete and our IDE should be available. To reach your new IDE, you'll need to visit your server's domain name or IP address followed by /codiad in your web browser:


You will be presented with an authentication request. This is the Apache level authentication that we set up using the password file and the .htaccess file:

Apache authentication request

Enter the credentials that you configured. Afterwards, you'll be taken to the initial setup screen:

Codiad initial setup

From here, we can set up a Codiad user account, and start a project. For the "Folder Name or Absolute Path", it is best just to pick a name that matches your project name. Click on the "Install" button when you are finished.

You will be taken to a login screen where you should enter the account details you just created:

Codiad login

You will now see your basic IDE interface:

Codiad IDE interface

Exploring the Interface

Let's get to know the interface a little bit.

On the left-hand side, we have our projects side-bar. The top portion shows our root project directory and any files and folders that we may have created or moved to that folder:

Codiad Project files

You can access the menu to create files and folders and manipulate properties by right-clicking on the project folder, or any other items in this pane:

Codiad context menu

The bottom shows the projects pane, which lists all of our available projects. You can create new projects by clicking the "+" button and you can switch between projects by double-clicking each.

If you create a new project, you can actually pull an entire project directly from a publicly accessible git repository:

Codiad pull from git

In the main portion of the window is the editor itself. You can see your code here and have some options for formatting and syntax highlighting. Double-click on files in the left sidebar to open them in the editor:

Codiad editor example

Along the bottom, you can choose the editor settings, split the window to view multiple files simultaneously, and adjust syntax.

On the right-hand side, we have a pull-tab that extends out into an administration sidebar:

Codiad administration panel

This is where you can go to manage your projects and users, update Codiad, install plugins, change, your password, etc. This is even the interface you need to save your files.

If you'd like to leave this interface open, you can click the two arrows in the upper-left corner of the panel. This will change it to a lock symbol, which will keep the panel open, allowing you to easily access settings and save options.


You should now be up and running with your new browser-based IDE. Codiad has many different extensions that can enhance the functionality of the editor. For instance, there is a simplified terminal interface to manage files, and a collaborative extension to allow you to share your projects with other members of your team.

Explore the interface and see if the added flexibility can help you work from anywhere.

By Justin Ellingwood


Creative Commons License