Express.js Tutorial: Instagram Gallery Example App with Storify API

Note: This text is a part of Express.js Guide: The Comprehensive Book on Express.js.

An example of an Express.js app using Storify API as a data source is a continuation of introduction to Express.js tutorials.

Instagram Gallery

Storify runs on Node.js and Express.js, therefore why not use these technologies to write an application that demonstrates how to build apps that rely on third-party APIs and HTTP requests to them?

The Instagram Gallery app will fetch story object and display title, description, and a gallery of the elements/images like this:

Express.js Tutorial: Instagram Gallery Example App with Storify API

A File Structure

index.js
package.json
views/index.html
css/bootstrap-responsive.min.css
css/flatly-bootstrap.min.css

GitHub is at github.com/storify/sfy-gallery.

Dependencies

express: 3.2.5
superagent: 0.14.6
consolidate: 0.9.1
handlebars: 1.0.12

package.json:

{
  "name": "sfy-demo",
  "version": "0.0.0",
  "description": "Simple Node.js demo app on top of Storify API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "express": "3.2.5",
    "superagent": "0.14.6",
    "consolidate": "0.9.1",
    "handlebars": "1.0.12"
  },
  "repository": "",
  "author": "Azat Mardanov",
  "license": "BSD"
}

Node.js Server

Require dependencies:

var express = require('express');
var superagent = require('superagent');
var consolidate = require('consolidate');

var app = express();

Configure template engine:


app.engine('html', consolidate.handlebars);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

Set up a static folder middleware:

app.use(express.static(__dirname + '/public'));

var user = 'azat_co';
var story_slug = 'kazan';

Paste your values, i.e., Storify API key, username and _token:


var api_key = "";
var username = "";
var _token = "";

app.get('/',function(req, res){

Fetch elements from Storify API:

  superagent.get("http://api.storify.com/v1/stories/" + user + "/" + story_slug)
    .query({api_key: api_key,
      username: username,
      _token: _token})
    .set({  Accept: 'application/json' })
    .end(function(e, storifyResponse){
      if (e) next(e);

Render the template with the story object which is in the HTTP response body’s content property:

      return res.render('index', storifyResponse.body.content);      
    })

})

app.listen(3001);

Handlebars Template

The views/index.html file content:

<!DOCTYPE html lang="en">
<html>
  <head>
    <link type="text/css" href="css/flatly-bootstrap.min.css" rel="stylesheet" />
    <link type="text/css" href="css/bootstrap-responsive.min.css" rel="stylesheet"/>
  </head>

  <body class="container">
    <div class="row">
      <h1>{{title}}<small> by {{author.name}}</small></h1>
      <p>{{description}}</p>
    </div>
    <div class="row">
      <ul class="thumbnails">
      {{#each elements}}
        <li class="span3"><a class="thumbnail" href="{{permalink}}" target="_blank"><img src="{{data.image.src}}" title="{{data.image.caption}}" /></a></li>
      {{/each}}
      </ul>
    </div>
  </body>

</html>

Conclusion

Storify API allows developers to retrieve and manipulate stories and elements within the stories. The full description is available at dev.storify.com.

Try it Yourself!

https://gist.github.com/azat-co/5725820

Author: Azat

Techie, entrepreneur, 20+ years in tech/IT/software/web development, Microsoft Most Valuable Professional, expert in NodeJS, JavaScript, TypeScript, React, MongoDB, Ruby on Rails, PHP, SQL, HTML, CSS. 500 Startups (batch Fall 2011) alumnus. http://azat.co http://github.com/azat-co View all posts by Azat

2 thoughts on “Express.js Tutorial: Instagram Gallery Example App with Storify API”