Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

This website no longer supports your browser. You can upgrade your browser to the latest version.

BETA

This is a new service. To help us improve it, give feedback

Service manual
Search results
    Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.

    Prototyping Install Prototype Kit on PC

    Overview

    Getting set up

    Before you start, you will need to download and install the following:

    1. Install Git

    Git is an open-source tool that helps track changes in code and makes it easy for multiple people to work on the same project. 

    Download Git (opens in a new tab) (opens in a new tab)     

    Select your operating system and follow the prompts for installation. Accept all default prompts from the respective installer for your operating system.

    2. Install Node.js

    Node.js is an open-source tool that runs JavaScript outside the browser. It’s designed to build fast and scalable applications. 

    Download Node.js (opens in a new tab)  (opens in a new tab)   

    Select your operating system and follow the prompts for installation. Accept all default prompts from the respective installer for your operating system.

    3. Install Yarn via npm

    Yarn is a popular open-source package manager for JavaScript projects. It helps install, update, and manage dependencies efficiently, making development faster and more reliable.

    The recommended way to install Yarn is through npm package manager (npm), which is included with Node.js

    To install or upgrade Yarn, open a terminal on your PC and run the following command:

    npm install --global yarn

     

    Check that Yarn is installed by running:

    yarn --version

    Installing the prototype Kit

    You will need Git, Node.js, and Yarn to run this project locally. Please ensure you have implemented the steps mentioned in the previous section.

    Local git configuration

    Make sure your local git configuration is set up to use main as the default branch when initialising a new repository. Launch a command terminal on your PC, and run the command below.

    git config --global init.defaultBranch main
    Git comand line no errors
    Local Git configuration returning with no error messages

    If it returns back to the command line without any error or messages as shown above, the setting have been successfully applied. 

    Create a prototype kit project

    You will need access to GitHub to create a project for your prototype kit. If you do not have a GitHub account, create one first, or ensure you are signed in before proceeding. Click the link below to clone the ONS prototype kit in to your new project.

    https://github.com/new?template_name=prototype-kit-template&template_owner=ONSdigital (opens in a new tab) 

    Follow the steps below, on the GitHub page:

    1. Do not tick the Checkbox labeled: "Include all branches"
    2. Choose an owner: Select your account from the dropdown filter.
    3. Repository name: Enter a clear, convenient name for your repository, such as my-ons-prototype-kit. This will also be the name of the local folder on you PC for this project.
    4. Optional description: You may include an description for your repository.
    5. Set repository visibility: Select Private if you would like to have control over who can view and contribute to your project.
    6. Create your repository: Click Create repository.
    7. GitHub will redirect you to your prototype kit project. Keep this browser window open to complete the next step.
       

    Clone your prototype kit project to your PC

    When you create a repository on GitHub, it exists remotely. Cloning it creates a local copy on your computer, allowing you to sync changes between both locations.

    1. Open the command terminal on a PC and issue the commands below.

    mkdir my-prototypes cd my-prototypes

    2. Create a directory to hold your local project.

    For example, "my-prototypes", on a windows PC.

    Optionally, you can follow this process on a PC to clone your new repository's code (opens in a new tab)  into a new folder on your device, allowing you to start building your prototypes.

    3. Clone your prototype kit repository locally

    On GitHub, navigate to the main page of your repository. 

    Click the 'Code' button and choose HTTPS in the pop up. From here you can copy the URL displayed in the input.

    Local prototype repositary
    Cloning your prototype kit repository locally

    Go back to your command terminal and type the following command: git clone. Then paste the URL that you copied from GitHub. Ensure your are still in the directory C:\my-prototypes.

    git clone https://github.com/my-Github-Username/my-ons-prototype-kit

    Next you will need to authenticate with your GitHub account. Please ensure you have 2-factor authentication enabled in your GitHub account.

    Select a preferred option. The browser option may work automatically since you have recently authenticated to create your repository in the previous step. You can then authorize the authentication.

    Github 2 factor authentication popup
    GitHub 2-factor authentication popup

    You can then authorize the authentication.

    Authorizing Git credential manager
    Authorizing Git credentials

    Once authenticated, your locally repository will be created in the directory below.

    Cmd showing directory
    Command line showing your created directory

    Use the code block below to launch your prototype.

    yarn start

     

    If you have followed all of the steps successfully your prototype will launch in a browser window as shown below. Related documentation can be found below for more information on how to update your prototype.

    Prototype shown in browser window
    Prototype launched in browser window

    Update the Prototype Kit

    Further help

    If you need any help installing the prototype kit, or creating or publishing your prototype, email the design system team at ons.design.system@ons.gov.uk (opens in a new tab) 

    Back to top