An Easier Way to Call an API From Your Web App

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.

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 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 web hook 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.

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.

Main.js

Here’s the meat of the app — It processes the form and sends the data via AJAX. I decided to use vanilla JS, and not to use jQuery, because what I’m doing does not need the whole library.

Configuring the Express-Request-Proxy Plugin

In main.js, you might have noticed that I posted to a local endpoint /hipchat. Where does that come from? Here, in package.json, you can specify the plugin options. It’s all in the _virtualApp section:

Configuring the Environment Variables for Secrets

You need to get an access token from HipChat. This token should be kept secret. It’s not something you want to check into Bitbucket for the public to see. Even if you have a private repo, it should not be kept in a file, in case you decide to open-source the repo later. The Aerobatic plugin for Bitbucket has the ability to store environment variables, which is a good place to store authorization secrets.

Get your token

Visit https://www.hipchat.com/docs/apiv2/auth and get either a personal access token, or an integration token, depending on whether you are doing this for just yourself or a team.

  • Go to your repo on Bitbucket, then click “Settings” from the left side menu.
  • Scroll down to Aerobatic Hosting, and click “App Settings”.
  • In the Environment Variables section, fill in HIPCHAT_AUTH_TOKEN on the left and your unique auth token on the right

Try it out for yourself!

Let us know how it’s working for you — and if you run into any roadblocks. Visit our version of this demo app to drop us a line!

--

--

Coding and Teaching Functional Web Development, Entrepreneurship, and Sustainability. Crazy about Standup Paddleboarding.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ivan Storck

Ivan Storck

Coding and Teaching Functional Web Development, Entrepreneurship, and Sustainability. Crazy about Standup Paddleboarding.