dev-tools

Anyone Can Deploy Your App With Heroku Button

Heroku Button provides a quick & easy way for anyone to deploy your apps, for free, with just a browser. Simply create a manifest file for your app and add the Heroku Button code to your Github repository or Website. Heroku takes care of the rest (server, database, deployment, scaling etc).

Experience Heroku Button for yourself with our simple NodeJS app.

Once you press the Heroku Button, you see a deployment page for you app. The name, description and logo come from the app.json manifest file.

Once you press the Deploy for Free button, Heroku does the work and creates a new App for you live on the Internet

Now you can view your app as well as access your own copy of the code.

Why use Heroku Button

Here are just a few thoughts about why you may want to use Heroku Button.

App Creators

Its easy to show off your work to prospective employers so they can be quickly impressed by your skills. You can also share your apps with your friends and co-workers as well as making it easy to test your app at any time.

Framework developers

Share demos that allow developers to understand the benefits of your framework quickly and show off what they could create.

Hackathon teams

Provide an easy way for judges to play around with your app, so they can get a better appreciation of what you have created

Creating your first button

Creating an Heroku Button for your app is very simple and has 2 parts to it:

1) Create an app manifest file for your project - app.json
2) Add the Heroku Button to your Github Repository or any website (code provided)

The only requirement is that your code be available via a public repository on Github or other git repository

Create an app manifest file

Create an app.json file in the root of your project. This file contains the name, description and an image link for your app (eg. a logo). This should provide people with an understanding of what they are going to deploy.

The app.json file should also contain any configuration (environment) variables and Heroku addons (databases, etc) your app needs.

Example manifest file

The Heroku example NodeJS app is very easy to define in the manifest file, as it does not use any Heroku addons or require any environment variables. The app itself is assembled on Heroku using Node Pakage manager and Heroku support for NodeJS apps.

app.json
1
2
3
4
5
6
7
{
  "name": "Node.js Sample",
  "description": "A barebones Node.js app using Express 4",
  "repository": "https://github.com/heroku/node-js-sample",
  "logo": "https://node-js-sample.herokuapp.com/node.svg",
  "keywords": ["node", "express", "static"]
}

Adding Heroku Button for your app

You could just use a URL link to deploy you app, however, Heroku has provided you with a button image and all the code you need to use it. Using a button makes it very obvious to see that your app is easily deployable.

Markdown

1
2
[![Deploy my app to Heroku](https://www.herokucdn.com/deploy/button.png)]
  (https://heroku.com/deploy?template=https://github.com/heroku/node-js-sample)

If you expect people to fork your Github repository and want them to deploy their own versions of the code, you can omit the template query parameter (everything after the ?). Heroku Button will infer its the repository the button was clicked on if there is no parameter.

HTML

1
2
3
<a href="https://heroku.com/deploy?template=https://github.com/heroku/node-js-sample">
  <img src="https://www.herokucdn.com/deploy/button.png" alt="Deploy my App to Heroku">
</a>

If you are using HTML you can of course add any styles you want to the button using CSS.

In Summary

Heroku Button enables anyone to play with your apps, encouraging them to give you meaningful feedback and showing them what they can create if they get involved with your project.

If you create an Heroku Button with your app, please tweet about it using #herokubutton.

Thank you.
@jr0cket

This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket
Creative Commons License