Getting Ionic framework up and running on Ubuntu 14.04

Ionic is a framework for hybrid or progressive mobile app development. Throw in electron and you can get a desktop app too!

Note that this will only deal with android app development, there are likely many more steps involved with iOS.

We need the following software setup –

  • NodeJS – ionic is build using node.
  • Android SDK – to build the android application.
  • Cordova – provides access to phone APIs regardless of platform.
  • Ionic – the framework
  • Bower – manage javascript libraries within the Ionic application
  • Gulp – build scripts for your angular app.

Installing NodeJS

There are multiple ways to install node, we are going to use nvm as it is the most powerful and flexible. It takes a little longer to set up though. Follow the previous link for the long version, here’s the short of it:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh
mkdir ~/.nvm/versions
source ~/.profile
nvm ls-remote
nvm install 0.11.13
nvm use 0.11.13
node -v

Each version of node you install has its own libraries. Some extra nvm commands:

nvm ls
nvm alias default 0.11.13
nvm use default
0    0  * * Sun root     certbot -q renew

Installing the Android SDK

You can install Android studio, but here we will just install the SDK. Firstly get the SDK downloading by going to https://developer.android.com/sdk/index.html#Other and clicking the Linux link – something like android-sdk_r24.3.3-linux.tgz. It’s a pretty big download.

While that’s happening let’s get the latest version of Java provided by Oracle.

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-cache search oracle-java
sudo apt-get install oracle-java7-installer

Now back to the Android SDK – I like to install it to /opt so:

sudo tar zxfv android-sdk_r24.3.3-linux.tgz -C /opt
sudo chown sam:sam /opt/android-sdk-linux -R
/opt/android-sdk-linux/tools/android

The Android SDK Manager will open, and a bunch of libs will be selected but not installed. Install them.

Once that is done you will want to create an Android Virtual Device (AVD) which is used as an emulator. In the SDK manager go Tools -> Manage AVDS , then Create. I created a Nexus 5 named nexus-5 using Google APIs – API Level 22 as the target, Google APIs ARM as a CPU/ABI and HVGA as a skin.

Now export the tool paths in .bashrc:

echo "export PATH=\${PATH}:/opt/android-sdk-linux/platform-tools:/opt/android-sdk-linux/tools" | tee -a ~/.bashrc
source ~/.bashrc

You should be able to run adb from anywhere now.

Installing Ionic, Bower, Gulp & Cordova

To install the following we use npm, the NodeJS package manager.

Bower helps organise javascript libraries used by our application and Gulp helps build the application.

npm install -g ionic bower gulp gulp-util cordova

Getting started with Ionic

Head over to http://ionicframework.com/getting-started and follow along:

ionic start myApp tabs 
cd myApp
npm install
bower install
ionic platform add android 
ionic build android 
ionic emulate android 
ionic serve 
ionic run android

Setting up Varnish for Drupal on CentOS 6

Varnish has an offical repository so let’s add it to Yum as outlined on https://www.varnish-cache.org/installation/redhat

sudo rpm --nosignature -i http://repo.varnish-cache.org/redhat/varnish-3.0/el6/noarch/varnish-release/varnish-release-3.0-1.el6.noarch.rpm
sudo yum install varnish

Set Varnish to start on system boot

sudo chkconfig varnish on

Setup DAEMON_OPTS in /etc/sysconfig/varnish, something like below. It will be commented out by default:

DAEMON_OPTS="-a :80 \
-T localhost:8080 \
-u varnish -g varnish \
-s malloc,256m"

Edit the default.vcl file. We use the following for Drupal, which Four Kitchens kindly made available.

# https://fourkitchens.atlassian.net/wiki/display/TECH/Configure+Varnish+3+for+Drupal+7

# This is a basic VCL configuration file for varnish.  See the vcl(7)
# man page for details on VCL syntax and semantics.

# TODO: Update internal subnet ACL and security.

# Define the internal network subnet.
# These are used below to allow internal access to certain files while not
# allowing access from the public internet.
# acl internal {
#  "192.10.0.0"/24;
# }

# Default backend definition.  Set this to point to your content
# server.
#
backend default {
  .host = "127.0.0.1";
  .port = "8080";
}

# Respond to incoming requests.
sub vcl_recv {
  # Use anonymous, cached pages if all backends are down.
  if (!req.backend.healthy) {
    unset req.http.Cookie;
  }

  # Allow the backend to serve up stale content if it is responding slowly.
  set req.grace = 6h;

  # Pipe these paths directly to Apache for streaming.
  #if (req.url ~ "^/admin/content/backup_migrate/export") {
  #  return (pipe);
  #}

  if (req.restarts == 0) {
    if (req.http.x-forwarded-for) {
      set req.http.X-Forwarded-For = req.http.X-Forwarded-For + ", " + client.ip;
    }
    else {
      set req.http.X-Forwarded-For = client.ip;
    }
  }

  # For global redirect
  if (req.url ~ "node\?page=[0-9]+$") {
    set req.url = regsub(req.url, "node(\?page=[0-9]+$)", "\1");
    return (lookup);
  }

  # Do not cache these paths.
  if (req.url ~ "^/status\.php$" ||
      req.url ~ "^/update\.php$" ||
      req.url ~ "^/admin$" ||
      req.url ~ "^/admin/.*$" ||
      req.url ~ "^/flag/.*$" ||
      req.url ~ "^.*/ajax/.*$" ||
      req.url ~ "^.*/ahah/.*$") {
       return (pass);
  }

  # Do not allow outside access to cron.php or install.php.
  #if (req.url ~ "^/(cron|install)\.php$" && !client.ip ~ internal) {
    # Have Varnish throw the error directly.
  #  error 404 "Page not found.";
    # Use a custom error page that you've defined in Drupal at the path "404".
    # set req.url = "/404";
  #}

  # Always cache the following file types for all users. This list of extensions
  # appears twice, once here and again in vcl_fetch so make sure you edit both
  # and keep them equal.
  if (req.url ~ "(?i)\.(pdf|asc|dat|txt|doc|xls|ppt|tgz|csv|png|gif|jpeg|jpg|ico|swf|css|js)(\?.*)?$") {
    unset req.http.Cookie;
  }

  # Remove all cookies that Drupal doesn't need to know about. We explicitly 
  # list the ones that Drupal does need, the SESS and NO_CACHE. If, after 
  # running this code we find that either of these two cookies remains, we 
  # will pass as the page cannot be cached.
  if (req.http.Cookie) {
    # 1. Append a semi-colon to the front of the cookie string.
    # 2. Remove all spaces that appear after semi-colons.
    # 3. Match the cookies we want to keep, adding the space we removed 
    #    previously back. (\1) is first matching group in the regsuball.
    # 4. Remove all other cookies, identifying them by the fact that they have
    #    no space after the preceding semi-colon.
    # 5. Remove all spaces and semi-colons from the beginning and end of the 
    #    cookie string. 
    set req.http.Cookie = ";" + req.http.Cookie;
    set req.http.Cookie = regsuball(req.http.Cookie, "; +", ";");    
    set req.http.Cookie = regsuball(req.http.Cookie, ";(SESS[a-z0-9]+|SSESS[a-z0-9]+|NO_CACHE)=", "; \1=");
    set req.http.Cookie = regsuball(req.http.Cookie, ";[^ ][^;]*", "");
    set req.http.Cookie = regsuball(req.http.Cookie, "^[; ]+|[; ]+$", "");

    if (req.http.Cookie == "") {
      # If there are no remaining cookies, remove the cookie header. If there
      # aren't any cookie headers, Varnish's default behavior will be to cache
      # the page.
      unset req.http.Cookie;
    }
    else {
      # If there is any cookies left (a session or NO_CACHE cookie), do not
      # cache the page. Pass it on to Apache directly.
      return (pass);
    }
  }
}

# Set a header to track a cache HIT/MISS.
sub vcl_deliver {
  if (obj.hits > 0) {
    set resp.http.X-Varnish-Cache = "HIT";
  }
  else {
    set resp.http.X-Varnish-Cache = "MISS";
  }
}

# Code determining what to do when serving items from the Apache servers.
# beresp == Back-end response from the web server.
sub vcl_fetch {
  # We need this to cache 404s, 301s, 500s. Otherwise, depending on backend but 
  # definitely in Drupal's case these responses are not cacheable by default.
  if (beresp.status == 404 || beresp.status == 301 || beresp.status == 500) {
    set beresp.ttl = 10m;
  }

  # Don't allow static files to set cookies. 
  # (?i) denotes case insensitive in PCRE (perl compatible regular expressions).
  # This list of extensions appears twice, once here and again in vcl_recv so 
  # make sure you edit both and keep them equal.
  if (req.url ~ "(?i)\.(pdf|asc|dat|txt|doc|xls|ppt|tgz|csv|png|gif|jpeg|jpg|ico|swf|css|js)(\?.*)?$") {
    unset beresp.http.set-cookie;
  }

  # Allow items to be stale if needed.
  set beresp.grace = 6h;
}

# In the event of an error, show friendlier messages.
sub vcl_error {
  # Redirect to some other URL in the case of a homepage failure.
  #if (req.url ~ "^/?$") {
  #  set obj.status = 302;
  #  set obj.http.Location = "http://backup.example.com/";
  #}
    <h1 class="title">Page Unavailable</h1>
    <p>The page you requested is temporarily unavailable.</p>
    <p>We're redirecting you to the <a href="/">homepage</a> in 5 seconds.</p>
    <div class="error">(Error "} + obj.status + " " + obj.response + {")</div>
  </div>
</body>
</html>
"};
  return (deliver);
}

#
# Below is a commented-out copy of the default VCL logic.  If you
# redefine any of these subroutines, the built-in logic will be
# appended to your code.
# sub vcl_recv {
#     if (req.restarts == 0) {
#   if (req.http.x-forwarded-for) {
#       set req.http.X-Forwarded-For =
#       req.http.X-Forwarded-For + ", " + client.ip;
#   } else {
#       set req.http.X-Forwarded-For = client.ip;
#   }
#     }
#     if (req.request != "GET" &&
#       req.request != "HEAD" &&
#       req.request != "PUT" &&
#       req.request != "POST" &&
#       req.request != "TRACE" &&
#       req.request != "OPTIONS" &&
#       req.request != "DELETE") {
#         /* Non-RFC2616 or CONNECT which is weird. */
#         return (pipe);
#     }
#     if (req.request != "GET" && req.request != "HEAD") {
#         /* We only deal with GET and HEAD by default */
#         return (pass);
#     }
#     if (req.http.Authorization || req.http.Cookie) {
#         /* Not cacheable by default */
#         return (pass);
#     }
#     return (lookup);
# }
#
# sub vcl_pipe {
#     # Note that only the first request to the backend will have
#     # X-Forwarded-For set.  If you use X-Forwarded-For and want to
#     # have it set for all requests, make sure to have:
#     # set bereq.http.connection = "close";
#     # here.  It is not set by default as it might break some broken web
#     # applications, like IIS with NTLM authentication.
#     return (pipe);
# }
#
# sub vcl_pass {
#     return (pass);
# }
#
# sub vcl_hash {
#     hash_data(req.url);
#     if (req.http.host) {
#         hash_data(req.http.host);
#     } else {
#         hash_data(server.ip);
#     }
#     return (hash);
# }
#
# sub vcl_hit {
#     return (deliver);
# }
#
# sub vcl_miss {
#     return (fetch);
# }
#
# sub vcl_fetch {
#     if (beresp.ttl <= 0s ||
#         beresp.http.Set-Cookie ||
#         beresp.http.Vary == "*") {
#       /*
#        * Mark as "Hit-For-Pass" for the next 2 minutes
#        */
#       set beresp.ttl = 120 s;
#       return (hit_for_pass);
#     }
#     return (deliver);
# }
#
# sub vcl_deliver {
#     return (deliver);
# }
#
# sub vcl_error {
#     set obj.http.Content-Type = "text/html; charset=utf-8";
#     set obj.http.Retry-After = "5";
#     synthetic {"
# <?xml version="1.0" encoding="utf-8"?>
# <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
#  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
# <html>
#   <head>
#     <title>"} + obj.status + " " + obj.response + {"</title>
#   </head>
#   <body>
#     <h1>Error "} + obj.status + " " + obj.response + {"</h1>
#     <p>"} + obj.response + {"</p>
#     <h3>Guru Meditation:</h3>
#     <p>XID: "} + req.xid + {"</p>
#     <hr>
#     <p>Varnish cache server</p>
#   </body>
# </html>
# "};
#     return (deliver);
# }
#
# sub vcl_init {
#   return (ok);
# }
#
# sub vcl_fini {
#   return (ok);
# }

Now update your web server to serve from port 8080, and restart the server and varnish.

Download and enable the drupal varnish module:

drush dl varnish; drush en varnish -y;

Add something like the following to settings.php:

// Varnish config.
$conf['cache_backends'][] = 'sites/all/modules/contrib/varnish/varnish.cache.inc';
$conf['cache_class_cache_page'] = 'VarnishCache';
$conf['page_cache_invoke_hooks'] = FALSE;

Hopefully the site is now using Varnish, you can get some good stats using the varnishlog and varnishstat programs that are included with Varnish.

Setting up memcached with Drupal 7 on Centos 6

Firstly get access to RPMForge repositories. Next install memcached:

sudo yum install memcached
sudo service memcached start
memcached -h

Check memcache stats:

echo "stats settings" | nc localhost 11211
watch "echo stats | nc 127.0.0.1 11211"

Configure memcache:

sudo vi /etc/sysconfig/memcached

Configuration details for memcache can be found here

Install the PECL memcached extension for PHP

sudo pecl install memcache
echo "extension=memcache.so" | sudo tee -a /etc/php.ini
sudo service httpd graceful
php -i | grep memcache

Install the memcache drupal module and configure the website via settings.php

https://drupal.org/project/memcache

drush dl memcache

You don’t need to enable the module unless you want a stats UI.

Edit your site’s settings.php, adding something like the following:

$conf['cache_backends'][] = 'sites/all/modules/contrib/memcache/memcache.inc';
// The 'cache_form' bin must be assigned no non-volatile storage.
$conf['cache_class_cache_form'] = 'DrupalDatabaseCache';
$conf['cache_default_class'] = 'MemCacheDrupal';
$conf['memcache_key_prefix'] = 'something_unique';

Truncate the cache table, clear the cache and check that the cache table stays empty when you load some pages. Check the memcache stats and see that data is going into the cache.

Hopefully it’s working now!

References

Drupal Memcache module – https://drupal.org/node/1131468

Configuring Memcache from the memcache wiki – https://code.google.com/p/memcached/wiki/NewConfiguringServer

 

Installing RPMForge repositories on CentOS

By default CentOS Yum has a pretty poor selection of packages compared to something like Debian. So it can be a good idea to add RPMForge to get access to more up to date packages.

cat /etc/redhat-release
uname -a

Now choose the appropriate repository for the CentOs version and architecture:

http://wiki.centos.org/AdditionalResources/Repositories/RPMForge

Install the repo:

wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el6.rf.x86_64.rpm
rpm --import http://apt.sw.be/RPM-GPG-KEY.dag.txt
rpm -K rpmforge-release-0.5.2-2.el6.rf.*.rpm
rpm -i rpmforge-release-0.5.2-2.el6.rf.x86_64.rpm

You should now have access to a heap more packages via Yum.

References

http://wiki.centos.org/AdditionalResources/Repositories/RPMForge

 

Setting up a self signed SSL certificate with Apache

I’m assuming you have Apache installed.

Enable the SSL mod for apache:

sudo a2enmod ssl

Create a directory for the certificates:

sudo mkdir /etc/apache2/ssl

Generate the certificate:

sudo openssl req -x509 -nodes -days 365000 -newkey rsa:2048 -keyout /etc/apache2/ssl/apache.key -out /etc/apache2/ssl/apache.crt

Openssl will ask for some information, make sure you set the FQDN properly, the rest don’t matter.

Now edit your virtualhost to point to port 443:

<VirtualHost *:443>

Add the port to the server name directive:

ServerName example.com:443

Then enable SSL and point the virtualhost at the certificates:

SSLEngine on
SSLCertificateFile /etc/apache2/ssl/apache.crt
SSLCertificateKeyFile /etc/apache2/ssl/apache.key

Save the file and restart Apache

sudo service apache2 restart

Now if you want to redirect non-SSL requests to the SSL port add another virtualhost that looks like the following:

NameVirtualHost *:80
<VirtualHost *:80>
   ServerName example.com
   Redirect permanent / https://example.com/
</VirtualHost>

Then a2ensite the new virtualhost and restart Apache once more.