Install jQuery Mobile demos on Ubuntu

The jQuery team has recently announced that 1.5 alpha is available for testing. This article documents the steps we took to set up the demo site on one of our Ubuntu 16.04 Linux machines for testing and patching.

advertisement

This article assumes that apache2 (Apache webserver) is already installed on Ubuntu (16.04). If you haven't already done this, then this article may help.

jQuery Mobile demos are embedded within the jquery-mobile repository, which can be found on Github. The basic steps to build the demos on the master branch are outlined below and documented within this article.

  • Install apache2 (assume already completed)
  • Install PHP and Apache's php module
  • Install NPM (node package manager) and Grunt (Javascript task runner)
  • Clone jquery-mobile and build the demos using Grunt
  • Configure Apache to serve the built jQuery Mobile demos

Install PHP7

The jQuery Mobile project documents on Github that "most of the documentation and testing pages rely on PHP 5+". The extent that this is needed to test the demo pages is questionable since the majority of '*.php' pages are converted to '*.html' during the build process. However, for the sake of completeness we'll install PHP7.

$ sudo apt install php7.0-cli
...
The following additional packages will be installed:
  php-common php7.0-common php7.0-json php7.0-opcache php7.0-readline
Suggested packages:
  php-pear
...
Do you want to continue? [Y/n] 

Install the apache2 PHP module

$ sudo apt install libapache2-mod-php
...
The following additional packages will be installed:
  libapache2-mod-php7.0
...
Do you want to continue? [Y/n] 
...
Creating config file /etc/php/7.0/apache2/php.ini with new version
...

Confirm the PHP modules are enabled

$ ls /etc/apache2/mods-enabled/php*
/etc/apache2/mods-enabled/php7.0.conf  /etc/apache2/mods-enabled/php7.0.load

Install NPM and Grunt

jQuery Mobile is built and tested with Grunt and relies on various Node modules, so set up the global environment before cloning jquery-mobile

$ sudo apt install npm
...
The following additional packages will be installed:
  gyp libjs-inherits libjs-node-uuid libjs-underscore libuv1 libuv1-dev node-abbrev node-ansi node-ansi-color-table node-archy
  node-async node-block-stream node-combined-stream node-cookie-jar node-delayed-stream node-forever-agent node-form-data
  node-fstream node-fstream-ignore node-github-url-from-git node-glob node-graceful-fs node-gyp node-inherits node-ini
  node-json-stringify-safe node-lockfile node-lru-cache node-mime node-minimatch node-mkdirp node-mute-stream node-node-uuid
  node-nopt node-normalize-package-data node-npmlog node-once node-osenv node-qs node-read node-read-package-json node-request
  node-retry node-rimraf node-semver node-sha node-sigmund node-slide node-tar node-tunnel-agent node-underscore node-which nodejs
  nodejs-dev
...
$ npm -v
3.5.2

$ sudo ln -s /usr/bin/nodejs /usr/bin/node
$ node -v
v4.2.6

Install the Grunt command line interface: grunt

sudo npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
/usr/local/lib
└─┬ grunt-cli@1.2.0 
  ├─┬ findup-sync@0.3.0 
  │ └─┬ glob@5.0.15 
  │   ├─┬ inflight@1.0.6 
  │   │ └── wrappy@1.0.2 
  │   ├── inherits@2.0.3 
  │   ├─┬ minimatch@3.0.4 
  │   │ └─┬ brace-expansion@1.1.7 
  │   │   ├── balanced-match@0.4.2 
  │   │   └── concat-map@0.0.1 
  │   ├── once@1.4.0 
  │   └── path-is-absolute@1.0.1 
  ├── grunt-known-options@1.1.0 
  ├─┬ nopt@3.0.6 
  │ └── abbrev@1.1.0 
  └── resolve@1.1.7 

Clone jquery-mobile and build the demos

Clone jquery-mobile

$ cd /build  # pick a directory 
$ git clone https://github.com/jquery/jquery-mobile.git
$ cd jquery-mobile

Build the node modules required by Grunt, which results in various Node modules installed locally under ./node_modules. You can review the node module dependencies by looking at ./package.json

 
$ cd /build/jquery-mobile
$ npm install

$ grunt --help
...
build  Alias for "clean", "config:fetchHeadHash", "build:js",  
       "build:css", "build:demos", "compress:dist",            
       "compress:images" tasks.   
...

$ grunt build
$ ls /build/jquery-mobile/dist/demos/index

Modify and restart apache2

The final step is to modify your Apache configuration files to allow jquery-mobile/dist/demos to be accessed / served and then restart Apache. There are various ways to accomplish this, and we show a simple, brute force method (assumes Apache was already working on Ubuntu and serving its default test page properly):

Edit /etc/apache2/apache2.conf
<Directory /build/jquery-mobile/dist/demos>
    Require all granted
</Directory>
Edit /etc/apache2/sites-available/000-default.conf
DocumentRoot /build/jquery-mobile/dist/demos

Restart apache2

$ sudo apachectl -k restart

* Note that the jQuery Mobile Github page states several additional apache2 modules are required: Rewrite (mod_rewrite.so), Expire (mod_expires.so), and Header (mod_headers.so).

A screenshot after navigating to our apache server is shown below:

jquery mobile demos screen shot

Please help us improve this article by adding your comment or question:

email addresses are neither displayed nor shared