Publishing on the web (Heroku)

Heroku runs your prototype online, the same as it runs on your machine, but available to others at any time. Other similar services are available.

You'll need to have put your code on GitHub to use this guide. If you cannot put your code on GitHub, you can try publishing to Heroku from the terminal instead.

Create an app on Heroku

  1. Create a free Heroku account

  2. In the top right click New then Create new app.

Screenshot of Heroku Create New App page

  1. Enter a name for your prototype app. App names in Heroku have to be unique across all the users of Heroku. It can be helpful to add your name or organisation to the start of the name to make it unique. For example joelanman-juggling-prototype.

  2. Select Europe for the region - it’s not important but makes your prototype a bit faster.

  3. Click Create app.

Deploy your prototype

  1. For Deployment method choose GitHub. ‘Deploy’ means publish.

Screenshot of section of page headed Deployment method

  1. Scroll down and click Connect to GitHub.

  2. In the popup, click Authorize Heroku.

  3. In the repo-name field, click search. You can leave it blank and it will give a list of all your repos.

  4. Click connect on the right of your repo.

  5. Scroll down to the Automatic deploy section and click Enable Automatic Deploys.

  6. Scroll down to the Manual deploy section and click Deploy branch.

  7. Wait for the deploy to finish.

Your prototype will deploy automatically each time you push your code to GitHub (it takes a few minutes each time).

Set a username and password

We need to set a username and password or the Prototype Kit won’t run online. They don’t have to be complicated – it’s just to stop people accidentally coming across your prototype online and mistaking it for a real service.

  1. At the top click the Settings tab.

  2. Click Reveal config vars.

  3. In KEY put the word USERNAME

  4. In VALUE put a username of your choice, click Add.

That will be saved and you can add another KEY and VALUE.

  1. In KEY put the word PASSWORD

  2. In VALUE put a password of your choice, click Add.

  3. In the top right, click Open app to see your prototype online!