jQuery Mobile Jump Start Pre-Class Preparation

(Added 28 June 2013)
Due to issues with Ripple we are no longer using it in the class. We will be working straight from the browser, but you may want to install the Window Resize extension.

The days are rapidly approaching. Here are all the steps necessary to prepare your development environment so that you can save time the day of class.

There are probably an unlimited number of ways to get started developing jQuery Mobile applicaitons. I have chosen this way because it makes you productive in the shortest number of steps and is also cross platform. The steps listed here should work for PC, Mac, and even Linux machines.

One of the first things that savvy readers will notice is there is no need for a web server. Eliminating the need for a server solves one the trickiest things that causes novices to have problems. For those of us who have been doing web development for a while, it is easy to forget, what a pain it was the first time we had to set one up. Also since we are working only with HTML, CSS, and JavaScript, we don’t even need a compiler. So let’s set up our environment.


The first thing that you must do is download and install the Chrome browser for your OS. I am not going to give the steps necessary here since this is something Google explains far better than I can. Here is the link to download Chrome:

Install Chrome Extensions

One of the nice things about most modern browsers is that they allow for the installation of extensions, also referred to as plug-ins.

  1. Visit the store at http://chrome.google.com/webstore. You can also reach it by clicking the  icon in the “Apps” section of the New Tab page.
  2. Search for the “Advanced REST Client”
  3. Select it from the list which appears.
  4. On the extension’s details page, click the Add to Chrome button.
  5. A dialog appears, letting you know about the types of data that the extension will be able to access. ClickAdd in the dialog to grant the extension access to the data described. Learn more about the different types of data that extensions may access.
  6. Repeat steps 2 through 5 for the “Ripple Emulator (Beta)”.

Setup Your Project Folder

In order to give our application and to make sure that we are all on the same page we will create the following folders for app:

  1. Create a route folder named, cc, for Coffee+Coffee.
  2. From within the cc directory, create three subfolders:
    1. css
    2. img
    3. js
      1. Within the js folder create a subfolder, libs

Installing JavaScript Libraries

This step is a bit of a misnomer since there really isn’t an installation of the JavaScript libraries. What we will do is download the files and place them in the correct folders.

If you want to save time here, you can download the files from GitHub at:

Or you can set everything up yourself by downloading the following libraries:

  • jQuery version 1.9.1
    • Copy the file, jquery-1.9.1.min.js, to js/libs

  • jQuery Mobile 1.3.1
    • Copy the file, jquery.mobile-1.3.1.min.js to js/libs
    • Copy the file, jquery.mobile-1.3.1.min.css to css
    • Copy the folder images to css

  • Handlebars version 1.0.0-rc.3
    • Copy the file, handlebars.js, to js/libs

  • When you are finished, your files should look as follows:
    • css
      • jquery.mobile-1.3.1.min.css
      • images

    • images
    • js
      • libs
        • jquery-1.9.1.min.js
        • jquery.mobile-1.3.1.min.js
        • handlebars-1.0.0-rc.3.js

Create index.html

With the skeleton of our application it is time that we put a face on it. We need to create an HTML page to hold our markup and by convention this page is called, index.html. Using your text editor of choice create index.html in the root of the cc folder. Then copy the following markup to it:




Hidden Panel




Coffee, Coffee, Coffee!




Hello, Coffee Lovers!




Index Page Footer


Launching Our App
With that our application has a displayable page, let’s check it out. Before you double-click the Chrome icon, stop.

In order to be able to run web apps from the file system we need to tell Chrome that doing so is OK. The only way to do this is to run Chrome from the command line in order to pass it the switch. 

From the cmd prompt type:

~/Google/Chrome/Application/chrome.exe –allow-file-access-from-files


  1. Right click on the chrome icon
  2. Then right click on “Google Chrome
  3. Click on Properties
  4. In the Target: text box add ” –allow-file-access-from-files” after chrome.exe. Please note there is a space before “–“.

From terminal type:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome –allow-file-access-from-files

The command line switch: –allow-file-access-from-files, is what tells Chrome it is OK to serve files from the file system.

Run the App 

Once Chrome is running we will need to point it to our index.html file. It will need the full path with the file:// as the protocol. For me it looks like:


At this point you should see our app in all of its jQuery Mobile glory. It will be stretched out since it is not yet running in the Ripple Emulator. If you don’t see your app in jQuery Mobile styling, odds are that you did not turn on the ability to serve files. If that is the case, see the steps above.

Turning on the Emulator

  1. In the upper right hand click the “Customize and control Google Chrome” button
  2. Then click Tools -> Extensions
  3. Scroll down the page until you see the entry for Ripple Emulator (beta)
  4. Check the box titled, Allow access to file URLs
  5. Back on the tab holding our application, right click on the page, Emulator -> Enable
  6. If you see a dark page titled, “Are you ready for this?!?!”, click Mobile Web (default)

The page should switch over to emulator view. Congratulations, you are now ready to begin mobile development with jQuery Mobile.


4 thoughts on “jQuery Mobile Jump Start Pre-Class Preparation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s