Home Office plugin for GOV.UK prototype Home Office React prototype Community resources

PrototypingPublish your prototype

One of the ways you can deploy, or publish and share your prototype with others, is through Heroku.

Create an app on Heroku

  1. Log into your Heroku account
  2. Select on New and select Create new app
  3. A prototype deployed on Heroku is called an ‘app’. Type in an app name for your prototype and choose Europe as your region. Click Create app
Heroku screen showing area for creating new app

Run the deployment generator in terminal

In terminal, run the command:

npm run create:deployment

Answer the interactive prompts

The deployment generator will ask you some questions.

  1. Hit the 'return' key to select Heroku as your deployment option
  2. Name your branch main
  3. Hit the 'return' key to accept the other prompts called 'secrets' asking about your email address, API key and app name
Do not enter your email, API key and app name details into terminal for security reasons.
Terminal screen with questions to deploy a prototype

Setting up secrets in GitHub

In your GitHub Settings, select Secrets on the left hand side menu. Click the button New repository secret. This is where you'll be entering the secrets you accepted in your deployment generator.

GitHub screen showing text fields to add secrets

Each secret is made up of a name and value. Enter the names as displayed below with the relevant values.

Name Value
HEROKU_EMAIL This will be your Heroku email address
HEROKU_APP_NAME This will be the app name for your prototype; for example, review-licence-applications
HEROKU_API_KEY You can find this by going into your Account settings page in Heroku. Find the section on API Key and click Reveal.

Push your new deployment on Heroku

In terminal, run these commands:

  1. git add . - locally stages your files ready to be committed
  2. git commit -m "add deployment pipeline" - locally commits your files
  3. git push - publishes your files on GitHub

This will build your prototype in Heroku and may take a few minutes. Once that is done, click on the Open app tab in Heroku to view your prototype. It will have a url like review-licence-applications.herokuapp.com which you can share with others.

Set a username and password

After you’ve completed the last step to deploy your application, you must protect your prototype and make it secure. To do this:

  1. click on the Settings tab on Heroku
  2. under Config Vars, click on Reveal Config Vars
  3. enter your username and password details
Heroku screen showing area for setting username and password