This guidance will help you move your project from dfe-frontend-alpha to dfe-frontend.

Updating your project

Remove dfe-frontend-alpha.

1. Remove existing package

npm remove dfe-frontend-alpha

Install the new dfe-frontend package.

2. Install dfe-frontend

npm i dfe-frontend

Update references to the new package.

3. Update references for styles

If you're using a .scss file for styles, replace:

@import 'node_modules/dfe-frontend-alpha/packages/dfefrontend';

With:

@import 'node_modules/dfe-frontend/packages/dfefrontend';

Update references to the scripts in your layouts.

4. Update references for scripts

Replace:

{% block scripts %}
{{ super() }}
<script src="/node_modules/dfe-frontend-alpha/dist/dfefrontend.min.js"></script>
{% endblock %}

With:

{% block scripts %}
{{ super() }}
<script src="/node_modules/dfe-frontend/dist/dfefrontend.min.js"></script>
{% endblock %}

Header update

There are some changes to the header component in dfe-frontend that you need to be aware of.

The header contains the DfE logo and service name, in the previous version of the header, the logo and service name were the same link. This has been split out.

If using HTML you'll need to restucture your code using the examples in the header variants.

If you're using nunjucks, you can amend your nunjucks code as follows:

5. Update node package reference

Replace:

{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}

With:

{% from 'node_modules/dfe-frontend/packages/components/header/macro.njk' import header %}

6. Header service link

To make the service name a link:

Add "serviceUrl": "/" to the service node.

"service": {
    "name": "Service name"
    "serviceUrl": "/"
}

7. Header logo link

To make the DfE logo a link:

Add "homeHref": "https://gov.uk", to the main list of nodes.

You can also override the alt text for the logo, which fixes an accessibility issue. Add to the main list of nodes:

Add "logoAltText": "Department for Education", to the main list of nodes.

You should always check the published examples in the header variants for how to implement them correctly.