A standalone simple web app and database

Want to learn Knockout.js, Angular, React, Backbone, or Ember.js but need a web app with data to connect to?

Download Now Quick Tutorial

No server setup, no database administration, no fuss.

What is QEDServer?

You've just come across a great new client-side library that makes building richer client-side apps a breeze. It has support for client-side storage, but you're really interested in using this with an existing server-side web application, so you decide to try it out. Then you realize that to test everything, you need a backend. That means you need to write some server side code, set up a database, and you need to deploy the thing on a web server so that all the AJAX requests work right. And of course, you need to populate that database with dummy data. That's a lot of work just to try out a new framework!

QEDServer solves those pesky problems for you so you can focus on sharpening your front-end skills. In one small package, you get a simple web server that hosts a small "product catalog" web application and a database full of existing products. You can immediately start writing code against its RESTLike API that responds with JSON and XML.

How does it work?

Download the archive, extract it, and run the server. There's a bat file for Windows and a shell script for OSX and Linux.

When QEDServer starts, a database file and a `public` folder will appear in the folder where you ran the server. You put your files in the public folder, visit http://localhost:8080/index.html in your browser, and you can start coding against this simple backend. Since QEDServer is serving your HTML files, you avoid AJAX "same origin policy" issues while you write client-side code against the RESTLike backend that QEDServer provides through its API.

Additionally, QEDServer provides a web interface of its own that you can use to manage the stock data and add your own records.

And if you need a fresh start, just delete the `products.sqlite3` file and restart QEDServer. The database will be recreated so you'll have a clean environment again.

Quick Tutorial

Let's make a simple page that fetches the products from our database using jQuery. Create a file called product_list.html in the public folder with this content:

<!DOCTYPE html>
  <html lang='en'>
      <meta charset="utf-8">
      <title>Simple Product List</title>
      <div id="products">
        <p>Click to load products</p>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>


If we visit http://localhost:8080/products.json we'll get a JSON representation of the products in our database.

      "description":"Description of Camera",
      "name":"Nikon D90 Digial Camera",
      "description":"Description of the Macbook 13",
      "name":"Macbook 13 inch",

Right below the closing body tag of our page, let's add another script block that fetches products into the page using the JSON feed we just inspected. We'll need to add a click event to our products region that triggers the AJAX request.

        var products = data;
        var ul = $("<ul></ul>"); // create a new unordered list

        $.each(products, function(index, product){
          var li = $("<li>" + product["name"] + "</li>");
          ul.append(li);  // add the listitem to the unordered list

        $("#products").html(ul); // replace the products div with the ul
      }, "json");

We fetch the data using the .get() method in jQuery, which takes the URL and a callback that gets fired on success. The data from the server is passed to the callback.

In our function, we construct an unordered list, iterate over the results we get back, append each result to the unordered list as a list item, and then we replace the contents of our projects div with the unordered list.

If you visit http://localhost:8080/product_list.html, you'll see our demo, which will pull records from our database.

That was just a short demo. You can use the other pieces of the API to add and delete records, or even perform searches against the data, which is perfect for testing out those fun auto-complete scripts everyone wants you to write.


The API that's currently implemented is:


Creating and updating products

To create products, send a POST request to http://localhost:8080/products. The web server expects to find the parameters nested.

<input type="text" name="product[name]">

No nesting is required if you send the JSON in the request body.

When a product is created successfully via JSON, you'll get this response:

{success: true, message: "Created Camera."}

Deleting products

You can delete products by constructing a DELETE request to http://localhost:8080/products/1.json where 1 is the ID of the product you want to remove. You'll get a JSON response back that looks like this:

{success: true, message: "Camera was deleted."}

Searching for products

Searching for products is quite easy. You simply send a GET request to http://localhost:8080/products.json with a query paramter called q like this:


You'll get back only products that have "camera" in the name or description.


Results come back 10 pages at a time. Use the page query parameter to get additional results.


This works with RSS, XML, and JSON, with or without keywords.


Creating, updating, deleting, pagination, and searching work the same as with Products.

Pagination and Searching

When looking at products within categories, you can apply the same pagination and querying as you would with products.

This works with RSS, XML, and JSON, with or without keywords.

JSON-P Support

You can get the JSON results back as JSON-P if you append a callback query parameter to the request. The result will be wrapped by the callback function you specify.

Right now we only support this for the following API endpoints.

Open Source

QEDServer is open-source software. If you're comfortable working with Ruby, you can begin customizing QEDServer right now by forking the project on Github.