Set up your prototype
Rapidly create HTML prototypes of internal Home Office services.
Before you start
Mac users can use the Terminal application. It's located in the
Utilities folder in
Windows users should install Git Bash (direct download) to use these app-instructions.
- Node.js (version 18) - you can use version 16 too
- a GitHub account
- optionally a Heroku account, to publish your prototype
- terminal - an application to install, start and stop a prototype. Using a terminal is sometimes called ‘using the command line’
- a text editor, such as VSCode
To install Node.js or a text editor, you'll need administrator access to your computer.
Create your GitHub and Heroku accounts with any email address, including your Home Office email addresses.
Step 1. Set up your GitHub repository
This is where your prototype code will be stored.
- Log into your GitHub account.
- Create a new repository.
- If it's a Home Office prototype, select UKHomeOffice as the repository owner.
- Enter a repository name. For our example, we'll use
review-licence-applicationsas the repository name.
- Select public for the privacy.
- Do not add a README, a .gitignore or a license, these will come later.
We'll connect this blank remote GitHub repository with the prototype you'll create in the next step.
Step 2. Create a prototype
Run the prototype generator in terminal
You can use any name you like for your prototype folder, in this example we'll use
Open terminal and enter these commands:
mkdir review-licence-applications(literally make directory) to create a folder for your prototype. You can see this folder in File Explorer on Windows or Finder on Mac. Nothing will show in terminal.
cd review-licence-applications(literally change directory) to move your terminal inside your prototype folder. You should see your current folder has changed in terminal.
npm init @hods prototypeto create the prototype. You'll see:
Need to install the following packages: @hods/create Ok to proceed? (y)
- Press enter to continue.
- Answer the prompts. Accept the default answers, by pressing enter.
✔ message Done..
Download the dependencies
npm install to download the dependencies to make your prototype work. These are stored in the
node_modules folder. They are specific to this prototype and do not affect any of your other prototypes.
View the prototype locally
In terminal, enter:
npm run dev
When your terminal returns a message that says:
No issues found.
You can view the prototype by opening http://localhost:8080/ in your web browser. This will help you track changes locally as you build your prototype.
Step 3. Share your prototype on GitHub
Once installation is complete, you can share your prototype on GitHub.
git initto create (or initialise) a local git repository.
git add .to locally stage the initial files ready for commit.
git commit -m "initial commit"to locally commit the initial files.
- Go to your blank GitHub repository.
- Find the section on 'push an existing repository'.
- Copy the 3 lines of code, and run them in your terminal.
If you can't find the lines of code, use these replacing YOUR_GITHUB_NAME with your user name:
git remote add origin firstname.lastname@example.org:YOUR_GITHUB_NAME/review-licence-applications.gitto add a remote git repository called 'origin'.
git branch -M mainto rename your local branch called 'master' to 'main'.
git push -u origin mainto publish your local main branch to the main branch of your remote repository called 'origin'.
Help us improve prototyping guidance
This needs improving. We need evidence about:
- your experience using this kit