An easier way to call an api from your web app

This guest post is written by Ivan Storck, Director of Developer Relations at Aerobatic. Ivan has been programming, teaching, and leading startups for 20 years. He founded two training companies, a web hosting company, and taught at the University of Washington.

At Aerobatic, our mission is to empower front-end developers to innovate faster – less time spent thinking about infrastructure, more time spent developing amazing customer-facing experiences; less time spent building and maintaining custom toolchains, more time spent innovating with clients; less time switching contexts between disparate tools, more time spent coding in a seamless flow.

In this post, I’ll show you how to build a form that posts notifications to HipChat using the Aerobatic add-on for Bitbucket. It’s simple, and no server-side code will be required.

Do you have the time to be a full-stack developer?

Like many of you, I moved from server-generated web pages in PHP or Rails, to Single Page Apps (SPA). There is only one choice for the language: JavaScript, but there is still a lot to keep track of. I’m capable of creating a virtual server, Docker image, database setup, node API, or whatever I need. I can add in the JavaScript flavor of the month, from Backbone to Angular to React.

Lately, however, I have been asking the question, do I need to know all of this? Do I even have the time? What do I enjoy the most? The answer is that I love to create online products that are beautiful, useable, and technically well-crafted. The front-end is a big enough world for me to do that. But I don’t want to lose control of the back-end, or need to team up with others to get simple apps done. Realistically, my back-end needs can be simple, and similar to many other people.

Many of you may host your static sites on Amazon S3, and manually configure CloudFront CDN via the (confusingly large) Amazon Web Services interface. But this gives you no chance at a back-end. Others code a simple node server and publish it to a PaaS provider, but this means you write boilerplate back-end with a basic REST API yet again. Maybe you even have a puppet/chef/Docker script to spin up your own virtual server, but then you’re stuck upgrading it whenever a security patch is released. What if you didn’t have to worry about all this stuff? And if you didn’t understand any of the jargon in this paragraph, doesn’t that kind of prove my point?

The Aerobatic add-on for Bitbucket

Whether you have a Jekyll blog, a static site documenting your open-source project, or a full-featured web app built with a framework such as AngularJS, Ember, or React, you can now edit your code, push your changes to Bitbucket, and your site will be deployed automatically. Assets are automatically hosted on a content delivery network (CDN) so that your site visitors will see the site faster. You can also have a custom domain point to your Aerobatic site with a DNS CNAME record.

Express Request Proxy

Expanding our core hosting service for Bitbucket developers, Aerobatic is happy to introduce a custom webhook plugin for static site apps called Express Request Proxy. This means that you can call APIs on the internet without worrying about cross-origin resource sharing (CORS) policies or leaking secret keys to the client. You can even contribute your own plugins to the 4Front open-source project, which powers our back-end.

The Express Request Proxy plugin is a high performance, intelligent proxy that supports proxying AJAX requests to remote HTTP endpoints. In addition to simple pass-through proxying, it also supports caching, parameter injection (to query string, path, and body), as well as response transforms. In the package.json virtual router setup, you can define one or more instances of the proxy plugin.

The Express Request Proxy is available now in the Aerobatic Bitbucket add-on. Other plugins that will soon be supported include custom error pages, form processing, authentication, and more.

Post to HipChat from your web app with Aerobatic

I’ll walk you through using the Aerobatic Express Request Proxy to set up an integration with HipChat (a popular chat app). We will create a simple web app. It has a form that posts a message to a HipChat room using the HipChat API.

HTML page – index.html

Below I set up a basic index.html with a form, include main.js, and the simple Skeleton CSS framework.

Send a Support Message to a HipChat Room

 

Send a message

Use the form below to send a message to our HipChat room. Include your
email and someone will contact you as soon as possible.

This form sends directly to the webhook