Category: Javascript

Live Debugging Webhooks with Ngrok

Post author By masnun
Post date January 1, 2016

ngrok is an awesome service – it creates secure tunnels to localhost. With ngrok, you get a url like http://459387bb.ngrok.com which is actually tunnel to a port to your local machine. So any request you make to that url is served by the app that you run on that port.

I know there are many cool services to debug webhooks like Requestbin – but the main benefit of ngrok is the app keeps running on your app, serving live traffic. So you can debug it in real time.

In this blog post, we would use a Node.js server with ngrok to serve Mandrill webhook requests.

Installing ngrok

Downloading and installing ngrok is pretty easy as you can find here — https://ngrok.com/download. However, if you’re on OS X and use Homebrew, you can install it with just one command:

brew install ngrok

1	brew install ngrok

Creating a Node.js App

Here’s a sample Node app that listens on port 3000 and parses the mandrill payload using body-parser package.

"use strict";

//----> Require
var bodyParser = require("body-parser");
var express = require("express");

//----> Bootstrap
var app = express();

//----> Middlewares
app.use(bodyParser.urlencoded({
    extended: false
}));

//----> Routes

// Just a hello world
app.get("/", (req, res) => {
    res.send("Hello world!");
});

// Mandrill webhook
app.post("/webhooks/mandrill", (req, res) => {
    var payload = req.body['mandrill_events'];
    var events = JSON.parse(payload);

    events.forEach((item) => {
        var event = item['event'];
        var email = item['msg']['email'];
        var doc = {
            "event": event,
            "email": email
        };

        var json = JSON.stringify(doc);
        // Do some more processing

    });

    res.send("OK");
});


//----> Run the server
var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('App listening at http://%s:%s', host, port);
});

"use strict";

//----> Require

var bodyParser = require("body-parser");

var express = require("express");

//----> Bootstrap

var app = express();

//----> Middlewares

app.use(bodyParser.urlencoded({

extended: false

}));

//----> Routes

// Just a hello world

app.get("/", (req, res) => {

res.send("Hello world!");

});

// Mandrill webhook

app.post("/webhooks/mandrill", (req, res) => {

var payload = req.body['mandrill_events'];

var events = JSON.parse(payload);

events.forEach((item) => {

var event = item['event'];

var email = item['msg']['email'];

var doc = {

"event": event,

"email": email

};

var json = JSON.stringify(doc);

// Do some more processing

});

res.send("OK");

});

//----> Run the server

var server = app.listen(3000, function () {

var host = server.address().address;

var port = server.address().port;

console.log('App listening at http://%s:%s', host, port);

});

Tunneling Traffic

Once we have the app running on port 3K, we can ask ngrok to create a tunnel for us. For this we just need to pass the port number to the ngrok command:

ngrok 3000

1	ngrok 3000

We would get an url soon afterwards. We can use this url to POST requests. In our case, go to your Mandrill account and create a webhook. Mandrill will send events to this url and it will be served by your app, running locally on your machine. You can make changes to the codes and restart anytime.

Awesome, no?

Javascript NodeJS

Using ES7 async/await today with Babel

Post author By masnun
Post date November 11, 2015
15 Comments on Using ES7 async/await today with Babel

Let’s take a code snippet that contains the demonstration of async/await — https://gist.github.com/patrickarlt/8c56a789e5f185eb9722 – our objective is to transpile this piece of code to ES5 (current day Javascript) so we can run it with today’s version of NodeJS.

You will notice a command on top of the snippet which no longer works because Babel JS has changed. I am going to describe how we can do it with the latest version of babel as of this writing (6.1.4 (babel-core 6.1.4)).

Install Babel and Plugins

The new Babel depends on individual plugins to transform and parse codes. To transform async functions, we shall use the transform-regenerator plugin. We also need to add the syntax plugin to recognize the async/await syntax. Otherwise Babel won’t recognize those. Apart from that, we also install the ES2015 preset which includes a sane set of plugins for transforming ES6 to ES5. We will keep those so we can use other ES6 goodies.

First we install babel-cli globally:

npm install -g babel-cli

1	npm install -g babel-cli

Here’s our package.json file so you can just do npm install:

{
  "name": "awesome-async",
  "version": "1.0.0",
  "description": "",
  "main": "github.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-plugin-syntax-async-functions": "^6.1.4",
    "babel-plugin-transform-regenerator": "^6.1.4",
    "babel-polyfill": "^6.1.4",
    "babel-preset-es2015": "^6.1.4",
    "request": "^2.65.0"
  }
}

{

"name": "awesome-async",

"version": "1.0.0",

"description": "",

"main": "github.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "",

"license": "ISC",

"dependencies": {

"babel-plugin-syntax-async-functions": "^6.1.4",

"babel-plugin-transform-regenerator": "^6.1.4",

"babel-polyfill": "^6.1.4",

"babel-preset-es2015": "^6.1.4",

"request": "^2.65.0"

}

Configuring Babel

Here’s the .babelrc file I put in the same directory:

{
  "presets": ["es2015"],
  "plugins": ["syntax-async-functions","transform-regenerator"]
}

{

"presets": ["es2015"],

"plugins": ["syntax-async-functions","transform-regenerator"]

}

The file tells babel how to transform your code.

Transpile & Run

Once we have installed the dependencies, we can then start transpiling the codes to JS:

babel github.es6 -o github.js
node github.js

1 2	babel github.es6 -o github.js node github.js

You might run into a problem like this:

/Users/masnun/Projects/awesome-async/github.js:34
  return regeneratorRuntime.async(function printPublicGists$(_context) {
         ^
ReferenceError: regeneratorRuntime is not defined
    at printPublicGists (/Users/masnun/Projects/node/github.js:34:10)
    at Object.<anonymous> (/Users/masnun/Projects/node/github.js:63:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

/Users/masnun/Projects/awesome-async/github.js:34

return regeneratorRuntime.async(function printPublicGists$(_context) {

ReferenceError: regeneratorRuntime is not defined

at printPublicGists (/Users/masnun/Projects/node/github.js:34:10)

at Object.<anonymous> (/Users/masnun/Projects/node/github.js:63:1)

at Module._compile (module.js:460:26)

at Object.Module._extensions..js (module.js:478:10)

at Module.load (module.js:355:32)

at Function.Module._load (module.js:310:12)

at Function.Module.runMain (module.js:501:10)

at startup (node.js:129:16)

at node.js:814:3

It’s because we need to include the regenerator run time. The runtime is packed in the babel-polyfill we have already installed. We just need to include it in our source code. So the final github.es6 file would look like this:

require("babel-polyfill");

import request from "request";

// promise returning function
function get (url){
  return new Promise(function(resolve, reject){
    request({
      method: 'GET',
      url: url,
      json: true,
      headers: {
        'User-Agent': 'request'
      }
    }, function(err, resp, body){
      if(err){
        reject(err);
      } else {
        resolve(body);
      }
    });
  });
}


// create a new "async" function so we can use the "await" keyword
async function printPublicGists(){
  // "await" resolution or rejection of the promise
  // use try/catch for error handling
  try {
    var gists = await get('https://api.github.com/gists/public');
    
    // now you can write this like syncronous code!
    gists.forEach(function(gist){
      console.log(gist.description);
    });
  } catch (e) {
    // promise was rejected and we can handle errors with try/catch!
  }
}


printPublicGists();

require("babel-polyfill");

import request from "request";

// promise returning function

function get (url){

return new Promise(function(resolve, reject){

request({

method: 'GET',

url: url,

json: true,

headers: {

'User-Agent': 'request'

}

}, function(err, resp, body){

if(err){

reject(err);

} else {

resolve(body);

}

});

}

// create a new "async" function so we can use the "await" keyword

async function printPublicGists(){

// "await" resolution or rejection of the promise

// use try/catch for error handling

try {

var gists = await get('https://api.github.com/gists/public');

// now you can write this like syncronous code!

gists.forEach(function(gist){

console.log(gist.description);

});

} catch (e) {

// promise was rejected and we can handle errors with try/catch!

}

printPublicGists();

Now if we transpile and run again, it should work fine.

Javascript

ES6 on Node.js (And Heroku)

Post author By masnun
Post date July 11, 2015
5 Comments on ES6 on Node.js (And Heroku)

I will get straight to the point. ES6 is awesome and we want to use it in our Node.js project. We would use Babel to convert ES6 codes to ES5 compatible Javascript for Node. We first install Babel.

npm i babel -S

1	npm i babel -S

Now we write our awesome app in ES6:

// Filename: main.es6

import express from "express"


var app = express();

app.get("/", (req, res) => {
    res.json({hello: 'world'});
});


var port = process.env.PORT || 3000;

var server = app.listen(port, () => {
    console.log('Service started on port :' + port);
});

// Filename: main.es6

import express from "express"

var app = express();

app.get("/", (req, res) => {

res.json({hello: 'world'});

});

var port = process.env.PORT || 3000;

var server = app.listen(port, () => {

console.log('Service started on port :' + port);

});

We could use Babel to transpile ES6 to ES5 and then run the ES5 code in Node. But instead we shall directly run ES6 with the “babel-node” binary. The babel-node binary transpiles ES6 code in runtime. So we don’t need any watchers or manual transpilation.

We modify our package.json’s script’s section to add the babel-node binary:

"scripts": {
    "start": "./node_modules/.bin/babel-node  main.es6"
}

"scripts": {

"start": "./node_modules/.bin/babel-node main.es6"

}

Now if we push to Heroku, it will work fine 🙂

Recent Posts

Recent Comments

Archives

Categories