July 14, 2015 · Backend Laravel XHP HHVM Ubuntu Vagrant VirtualBox

How to setup dev environment for Laravel 5 + HHVM 3.8.0 + XHP 2.2 with Ubuntu 14.04 + Vagrant + Virtualbox

If you like how ReactJS, and you're happen to be working in PHP environment, you will definitely love Facebook XHP! XHP brings some advantages as an UI library, and with HHVM in the back of it, it brings your PHP setup to the next level. Facebook just announce XHP-JS few days ago, which make things even more exicting. We're not getting into that now though, but its a cool things to know!

For now, I'd like to share how I setup my VM so I can play around with Laravel 5 and XHP.

Prerequisite: Vagrant and VirtualBox

First thing that we need to do is install our VM, we use Oracle VM VirtualBox. Go ahead to their download page and follow the installation guide.

Second thing that you need to do before we start is to install Vagrant. Vagrant will help us to make our development setup easier.

If you done with both of VirtualBox and Vagrant, lets get started.

1. Install and configure Vagrant

I use Ubuntu 14.04 LTS. You can chose other type of box here in Vagranbox.es, or you can also install it manually in Virtualbox.

> vagrant box add Ubuntu14 https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/14.04/ubuntu-14.04-amd64.box

After its successfully download and register the box, go to your working directory, and setup your local vagrant.

> mkdir ~/Work
> cd ~/Work
> vagrant init Ubuntu14

This will create Vagrantfile in your working directory. Go open and edit the file.

# -*- mode: ruby -*-
# vi: set ft=ruby :

# All Vagrant configuration is done below. The "2" in Vagrant.configure
# configures the configuration version (we support older styles for
# backwards compatibility). Please don't change it unless you know what
# you're doing.
Vagrant.configure(2) do |config|  
  # what box that we want to use
  config.vm.box = "Ubuntu14"
  config.vm.box_url = "https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/14.04/ubuntu-14.04-amd64.box"

  # th ip address and port
  config.vm.network "forwarded_port", guest: 80, host: 8080
  config.vm.network "private_network", ip: "192.168.33.10"

  # to allow you use your local ssh agent
  config.ssh.forward_agent = true

  # which folder that we want to mount in the VM.
  config.vm.synced_folder ".", "/vagrant", disabled: false, type: "nfs"

  # configure the VM machine hardware
  config.vm.provider :virtualbox do |vb|
    # Use VBoxManage to customize the VM. For example to change memory:
    vb.customize ["modifyvm", :id, "--memory",  "8192"]
    vb.customize ["modifyvm", :id, "--acpi",    "on"]
    vb.customize ["modifyvm", :id, "--ioapic",  "off"]
    vb.customize ["modifyvm", :id, "--cpus",    "1"]
  end
end  

If you done with the setup, go run the config now:

> vagrant up

2. Install Nginx and HHVM

First, lets prepare our setup. We need to be able to add-apt-repository.

> sudo apt-get install software-properties-common

Now, we can start adding apt-repository and installs the packages

> sudo apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0x5a16e7281be7a449
> sudo add-apt-repository "deb http://dl.hhvm.com/ubuntu $(lsb_release -sc) main"
> sudo apt-get update
> sudo apt-get install hhvm
> sudo apt-get install nginx

Configure your HHVM and Nginx Configuration by running the following:

> sudo /usr/share/hhvm/install_fastcgi.sh

Your Nginx and HHVM should be ready now! Confirm the installation:

> php -v
HipHop VM 3.8.0 (rel)  
Compiler: tags/HHVM-3.8.0-0-gbb32f8d645b28561d8491870c44730b9b3f08d35  
Repo schema: 74bee5d310450724cfd49245fd6c2e1e4323b10a  

3. Install Laravel 5

Installing Laravel is pretty easy, first thing you need to do is install Composer, since Laravel utilize composer a lot.

> curl -sS https://getcomposer.org/installer | php
> sudo mv composer.phar /usr/local/bin/composer

To install Laravel, you just need to run the following:

> cd /vagrant
> composer create-project laravel/laravel laravel

If you got the following error:

> Fatal error: unexpected St13runtime_error: locale::facet::_S_create_c_locale name not valid

Don't freak out, all you need to do is setup your locale. Open the locale config:

> sudo nano /etc/default/locale

..and set it with the following:

LANG="en_US.UTF-8"  
LANGUAGE="en_US:en"  
LC_CTYPE="en_US.UTF-8"  
LC_ALL="en_US.UTF-8"  

Try the composer install again, it should be working fine now.

4. Configuring Nginx

Lets add some configuration in Nginx to expose our Laravel setup. Let's say the domain is laravel.dev

> sudo nano /etc/nginx/sites-available/laravel.dev
server {  
    listen 80;

    root /vagrant/laravel/public;
    index index.html index.htm index.php;

    server_name laravel.dev;

    access_log /var/log/nginx/laravel.dev-access.log;
    error_log  /var/log/nginx/laravel.dev-error.log error;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { log_not_found off; access_log off; }
    location = /robots.txt  { log_not_found off; access_log off; }

    error_page 404 /index.php;      

    include hhvm.conf;

    # Deny .htaccess file access
    location ~ /\.ht {
        deny all;
    }
}
> ln -s /etc/nginx/sites-available/laravel.dev /etc/nginx/sites-enabled/laravel.dev
> sudo service nginx reload

To make it available from your host machine, edit your hosts setup and add the combination of VM ip address and your domain dev.

> sudo vim /etc/hosts
...
192.168.33.10  laravel.dev  

If you need to have an advance domain setup (e.g. with lots subdomain), you might want to use dnsmasq instead.

Now, go to your browser and browse to http://laravel.dev. Voila! You should get the laravel landing page.

5. XHP

To make XHP syntax available, heres what we do; In your VM, do the following:

> cd /vagrant/laravel
> composer require facebook/xhp-lib

Also we need to enable th HHVM setup in our local, this by adding .hhconfig file in your working directory.

> touch /vagrant/laravel/.hhconfig

Now, lets start using XHP. First, lets rename the default welcome template, removing the blade name.

> mv ~/Work/laravel/resources/views/welcome.blade.php ~/Work/laravel/resources/views/welcome.php 

Then, lets move the internal style inside the welcome.php and put it inside new file in ~/larave/public/welcome.css.

And finaly, with XHP, we can write something like this in the template:

<?hh  
class :welcome extends :x:element {  
  public function render() {
    $head =
      <head>
        <title>Laravel</title>
        <link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css" />
        <link href="/welcome.css" rel="stylesheet" type="text/css" />
      </head>;

    return
      <x:doctype>
        <html>
          {$head}
          <body>
            {$this->getChildren()}
          </body>
        </html>
      </x:doctype>;
  }
}

echo  
  <welcome>
    <div class="container">
      <div class="content">
        <div class="title">Laravel 5 + XHP</div>
      </div>
    </div>
  </welcome>;

To produces this:

Done!! Pretty cool syntax, eh! We can start playing around now!

Comments powered by Disqus