Changing apache2 document root in ubuntu 14.x

Having the default Apache document root to /etc/www can be sometimes annoying because of permissions. I strongly recommend to use a folder into your home folder.

For the sake of this post, I will use the folder Sites (that I created under my personal folder /home/shprink/Sites/).

PS: The Apache version used for this post is: 2.4.10 (Ubuntu), you can see yours using apache2 -v command.

Changing apache2 document root

The default document root is set in the 000-default.conf file that is under /etc/apache2/sites-available folder.

$ cd /etc/apache2/sites-available
$ sudo nano 000-default.conf

While the file is opened change DocumentRoot /var/www/ with your new folder e.g DocumentRoot /home/shprink/Sites/

Set the right Apache configuration

The configuration of the /etc/www folder is under /etc/apache2/apache2.conf. Edit this file to add the configuration of your new document root.

$ sudo nano /etc/apache2/apache2.conf

Copy the following:

<Directory /var/www/>
       Options Indexes FollowSymLinks
       AllowOverride None
       Require all granted

and change the directory path:

<Directory /home/shprink/Sites/>
       Options Indexes FollowSymLinks
       AllowOverride None
       Require all granted

Restart Apache

$ sudo service apache2 restart

Set the right permission

All of your document root parent folders must be executable by everyone. To know if it is the case you can use the utility namei that list the permissions along each component of the path:

$ namei -m /home/shprink/Sites/
f: /home/shprink/Sites/
 drwxr-xr-x /
 drwxr-xr-x home
 drwx------ shprink
 drwx------ Sites

Here as you can see that shprink and Sites permissions are not set properly.

Open http://localhost/ in your browser, you should get the following message:

You don’t have permission to access / on this server.

Open the apache error log to see the exact error code e.g AH00035. It might help you to get more information.

$ sudo tail -f /var/log/apache2/error.log
[Mon Apr 06 09:04:26.518260 2015] [core:error] [pid 22139] (13)Permission denied: [client] AH00035: access to / denied (filesystem path '/home/shprink/Sites') because search permissions are missing on a component of the path

To fix the permission problem for good, using chmod +755 should be enough.

$ chmod +755 /home/shprink/
$ chmod +755 /home/shprink/Sites/

Re run namei to make sure everything is ok.

$ namei -m ~/Sites/
f: /home/shprink/Sites/
 drwxr-xr-x /
 drwxr-xr-x home
 drwxr-xr-x shprink
 drwxr-xr-x Sites

Now opening http://localhost/ should work as expected. If you are having trouble please leave a comment.

How to setup name-based Virtual Hosts on Ubuntu 13.10 and Apache 2.4.6

Let’s imagine you have a project named myvhost-www within the folder /var/www. If you want to access it through your browser the URL would be http://localhost/myvhost-www/

Would not it be better to use the URL To do so you will need to use a name-based Virtual Host.

With name-based virtual hosting, the server relies on the client to report the hostname as part of the HTTP headers. Using this technique, many different hosts can share the same IP address (which is the case for your personal computer).

Step 1: Create a Virtual Host configuration file

Create the file myvhost.conf within /etc/apache2/sites-available folder.

The configuration file MUST have a .conf extension
$ cd /etc/apache2/sites-available
# create an empty file
$ sudo touch myvhost.conf
# Edit it
$ sudo vi myvhost.conf

Within this file insert the following content:

<VirtualHost *:80>
        DocumentRoot "/var/www/myvhost-www"
Inside each block, you will need at minimum a ServerName directive to designate which host is served and a DocumentRoot directive to show where in the filesystem the content for that host lives. In the normal case where any and all IP addresses on the server should be used, you can use * as the argument to NameVirtualHost (In this usual case, this will be “*:80”).

Step 2: Enable the Virtual Host

# Enabling site myvhost
$ sudo a2ensite myvhost.conf

# To activate the new configuration, you need to run:
$ sudo service apache2 reload

If you go check on the sites-enabled folder you will see that your new virtual host is enabled and point to the file we created previously.

$ cd /etc/apache2/sites-enabled
$ ll
lrwxrwxrwx 1 root root   31 Mar  8 18:47 myvhost.conf -> ../sites-available/myvhost.conf

Step 3: Register the Virtual Host to the hosts file

The hosts file is a computer file used by an operating system to map hostnames to IP addresses.

$ sudo vi /etc/hosts

Add the following line to this file:
Entries in the hosts file will have precedence over DNS by default which means that even if domain name exist it will not attempt to look up the record in DNS.

Step 4: Enable mod_rewrite

mod_rewrite provides a way to modify incoming URL requests, dynamically, based on regular expression rules. This allows you to map arbitrary URLs onto your internal URL structure in any way you like.

sudo a2enmod rewrite

You have now configured a Virtual Host and are able to point to and see the same content as on http://localhost/myvhost-www/


How to install Node.js, CoffeeScript, LESS and Uglify-js on Ubuntu

Node.js Evented I/O for V8 javascript

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Node.js allow basically to run server side JavaScript.


sudo apt-get update
# python-software-properties is needed to use add-apt-repository
sudo apt-get install python-software-properties python g++ make
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get install nodejs


Node.js interpreter is available using nodejs -i

nodejs -i
> var foo = 'bar'
> console.log(foo)

For convenience and because dependencies may use node command instead of nodejs, a symbolic link is necessary to avoid having this error:

/usr/bin/env: node: No such file or directory

Add Node symbolic link

sudo ln -s /usr/bin/nodejs /usr/bin/node

NPM Node Packaged Modules

NPM is Node.js package manager. We will use it to install CoffeeScript, Less and Uglify-js during this tutorial.


sudo apt-get install npm

Basic commands

# Any package can be installed by using
npm install
# Display the package list globally installed
npm list -g

CoffeeScript Little language that compiles into JavaScript

The CoffeeScript compiler is itself written in CoffeeScript, using the Jison parser generator. The command-line version of coffee is available as a Node.js utility. The core compiler however, does not depend on Node, and can be run in any JavaScript environment, or in the browser.

CoffeeScript simplify the way to create great JavaScript code.


Leave off the -g if you don’t wish to install globally.

# -g specify that you want to install it globally 
# (otherwise it will install it within a local node_modules folder)
sudo npm install -g coffee-script
npm http GET
npm http 304
/usr/bin/coffee -> /usr/lib/node_modules/coffee-script/bin/coffee
/usr/bin/cake -> /usr/lib/node_modules/coffee-script/bin/cake
coffee-script@1.6.2 /usr/lib/node_modules/coffee-script


CoffeeScript interpreter is available using coffee -i

coffee -i
coffee> foo = 'bar'
coffee> console.log foo

LESS The dynamic stylesheet language

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).


sudo npm install -g less
npm http GET
npm http 200
npm http GET
npm http 200
/usr/bin/lessc -> /usr/lib/node_modules/less/bin/lessc
less@1.3.3 /usr/lib/node_modules/less


Less does not have an interpreter. To test it we will create a LESS file and compile it into CSS.

echo "@foo: 25px; #foobar{font-size: @foo};" > style.less 
sudo lessc ./style.less ./style.css
cat style.css 
#foobar {
  font-size: 25px;

Uglify-js JavaScript minification

UglifyJS is a JavaScript parser, minifier, compressor or beautifier toolkit.


sudo npm install -g uglify-js
npm http GET
npm http 304
npm http GET
npm http 200
npm http GET
npm http GET
npm http GET
npm http 200
npm http GET
npm http 200
npm http 200
npm http GET
npm http 200
npm http 200
npm http GET
npm http 200
npm http GET
npm http GET
npm http 200
npm http GET
npm http 200
npm http GET
npm http 200
npm http 200
/usr/bin/uglifyjs -> /usr/lib/node_modules/uglify-js/bin/uglifyjs


Uglify-js does not have an interpreter. To test it we will create a .js file and create a minified version .min.js from it.

touch test.js
echo "var foo = function(prefix){return prefix + ' World'}; console.log(foo('Hello'));" > test.js
# Make sure your code works
node test.js 
# it works!
Hello World
# creates the test.min.js from test.js
# -m, --mangle   :Mangle names/pass mangler options.
# -c, --compress :Enable compressor/pass compressor options.
uglifyjs test.js -mc -o test.min.js
node test.min.js
# it still works!
Hello World
# Display test.min.js content to check out the result of the minification
cat test.min.js
# The compression is not too obvious but
# it removed spaces and renamed the prefix variable
var foo=function(o){return o+" World"};console.log(foo("Hello"));