Create a prototype
This guide explains how to create prototypes using the MoJ Design System and GOV.UK Prototype Kit.
Use a template from Cloud Platform
You can follow the MoJ Cloud Platform guide to automatically set up a GitHub repository containing the GOV.UK Prototype Kit and a hosting environment.
This template comes with the MoJ Design System pre-installed so you don't need to set it up manually. However you may need to update it using the instructions below.
Manual installation
You can also install the GOV.UK Prototype Kit and MoJ Design System manually. You must follow the GOV.UK Design System prototype setup guide first.
You then need to install the NPM package for the MoJ Design System:
- Open a command prompt application (e.g. Terminal on MacOS)
- Change the directory to your prototype's directory. For example,
cd path/to/prototype
- Run
npm install @ministryofjustice/frontend --save
If you're using version 13 or later of the GOV.UK Prototype Kit, the components of the MoJ Design System will now be available to you.
For older versions of the GOV.UK Prototype Kit
If you're using a version of the GOV.UK Prototype Kit before 13, you need to take additional steps to use the MoJ Design System in your prototype:
- Open
app/assets/javascripts/application.js
- Add
window.MOJFrontend.initAll()
below the line that does the same forGOVUKFrontend
Updating MoJ Frontend
The current version of MoJ Frontend is 3.1.0.
You can check which version your prototype is running by opening package.json
in the root folder of your prototype. Look for "@ministryofjustice/frontend"
under "dependencies"
.
To update your prototype to the latest version of MoJ Frontend:
- Check that you're using the latest long-term support version of npm (for example by using Node Version Manager)
- Open
package.json
in the root folder of your prototype in a text editor - Under
dependencies
, update the reference to MoJ Frontend to"@ministryofjustice/frontend": "3.1.0",
- Save
package.json
- Open a command prompt application (e.g. Terminal on MacOS)
- Change the directory to your prototype's directory. For example,
cd path/to/prototype
- Run
npm install