Install MoJ Frontend with Node.js package manager (npm)
Requirements
To use MoJ Frontend with npm you must:
-
Install the long-term support (LTS) version of Node.js, which includes npm. The minimum version of Node.js required is 12.17.0 to support ECMAScript (ES) modules.
(We recommend using
nvm
for managing versions of Node.) -
Create a package.json file if you don’t already have one. You can create a default
package.json
file by runningnpm init
from the root of your application.
You can also install Nunjucks v3.0.0 or later if you want to use either GOV.UK Frontend’s Nunjucks macros or MoJ Frontend’s Nunjucks macros.
Install dependencies
To install, run:
npm install @ministryofjustice/frontend govuk-frontend moment --save
When the installation finishes, the @ministryofjustice/frontend
package and other dependencies will be in your node_modules
folder.
Get the CSS, Assets and JavaScript working
Add the HTML for a component to your application. We recommend the accordion component as this makes it easier to spot if JavaScript is not working.
Go to the example accordion component on the GOV.UK Design System website, then copy the HTML.
Paste the HTML into a page or template in your application.
Get the CSS working
-
Copy both
/node_modules/@ministryofjustice/frontend/moj/moj-frontend.min.css
and/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.css
into your application. -
Add your CSS files to your page layout if you need to. For example:
<head>
<!-- // ... -->
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css">
<link rel="stylesheet" href="/stylesheets/moj-frontend.min.css">
<!-- // ... -->
</head>
- Run your application and check that the accordion displays correctly.
The accordion will use a generic font until you get the font and images working, and will not be interactive until you get the JavaScript working.
There are also different ways you can import CSS, including into your project’s main Sass file:
@use "node_modules/govuk-frontend/dist/govuk" as *;
@forward "node_modules/@ministryofjustice/frontend/moj/all";
Get the font and images working
Your component will not use the right font or images until you’ve added GOV.UK Frontend’s assets to your application.
- Copy the:
/node_modules/@ministryofjustice/frontend/moj/assets/images
contents to<YOUR-APP>/assets/images
/node_modules/govuk-frontend/dist/govuk/assets/images
contents to<YOUR-APP>/assets/images
/node_modules/govuk-frontend/dist/govuk/assets/fonts
contents to<YOUR-APP>/assets/fonts
- Run your application, then use the Fonts tab in Firefox Page Inspector to check the accordion is using the GDS Transport font.
In your live application, we recommend serving the font and image assets directly.
Get the JavaScript working
-
Add the following to the top of the
<body class="govuk-template__body">
section of your page template:<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
-
Copy both
/node_modules/@ministryofjustice/frontend/moj/moj-frontend.min.js
and/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js
files into your application. -
Import the files before the closing
</body>
tag of your page template, then run theinitAll
functions to initialise all the components. For example:<body class="govuk-template__body"> <!-- // ... --> <script type="module" src="/javascripts/govuk-frontend.min.js"></script> <script type="module" src="/javascripts/moj-frontend.min.js"></script> <script type="module"> import * as GOVUKFrontend from '/javascripts/govuk-frontend.min.js' import * as MOJFrontend from '/javascripts/moj-frontend.min.js' window.GOVUKFrontend = GOVUKFrontend window.MOJFrontend = MOJFrontend GOVUKFrontend.initAll() MOJFrontend.initAll() </script> </body>
-
Run your application and check it works the same way as the Design System accordion example, by selecting the buttons and checking the accordion shows and hides sections.
In your live application, we recommend:
- serving the JavaScript files directly instead of copying the files manually
- importing only the components your application uses and initialising all their instances on the page
Make sure you import all the components used throughout your application or some components will not work correctly for disabled users who use assistive technologies.
Once your testing is complete you can use the full code for page layouts and other components from the GOV.UK Design System and MoJ Design System website.