We use cookies on this site to enhance your user experience

By clicking the Accept button, you agree to us doing so. More info on our cookie policy

Using the GOV.UK Design System with Laravel

Published: May 29, 2024 by C.S. Rhymes

I recently worked on a project using the GOV.UK Design System with a Laravel project. The GOV.UK frontend provides layouts and accessible HTML components with their own CSS and JavaScript. The two packages worked really well together, so I thought I would provide a quick example of how to get it setup.

Things to consider

Before you use the GOV.UK frontend you must consider the following:

You’re welcome to use the template even if your service isn’t considered part of GOV.UK, but your site or service must not:

  • identify itself as being part of GOV.UK
  • use the crown or GOV.UK logotype in the header
  • use the GDS Transport typeface
  • suggest that it’s an official UK government website if it’s not

GOV UK Frontend Readme

Creating a new project

First we create a new Laravel project, let’s call it gov-uk-laravel-demo:

composer create-project laravel/laravel gov-uk-laravel-demo

Install npm dependencies

Then we change into the directory and install our npm dependencies.

cd gov-uk-laravel-demo
npm install
npm install govuk-frontend --save
npm install sass vite-plugin-static-copy —dev

Importing the styles

Rename resources/css/app.css to resources/scss/app.scss and add the following content.

$govuk-assets-path: "/build/assets/";

@import "node_modules/govuk-frontend/dist/govuk/all";

The sass variable is updating the default path from /assets/ as we are using vite, which puts everything inside a build folder.

Importing the JavaScript

In resources/js/app.js, update to the following to initialise the govuk-frontend JavaScript.

import "./bootstrap";

import { initAll } from "govuk-frontend";

initAll();

Configuring vite and building

Update vite.config.js to build our scss files (previously css) and copy the fonts and images to the public/build/assets folder using the viteStaticCopy plugin.

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/scss/app.scss", "resources/js/app.js"],
      refresh: true,
    }),
    viteStaticCopy({
      targets: [
        {
          src: "node_modules/govuk-frontend/dist/govuk/assets/",
          dest: "",
        },
      ],
    }),
  ],
});

Then run npm run build to build the css, js and copy the relevant assets.

Creating a page

Copy and paste the default page template HTML from the documentation page into the welcome.blade.php file.

Remove the script tags at the bottom of the page

<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
  import { initAll } from "/javascripts/govuk-frontend.min.js";
  initAll();
</script>

Then replace these two lines in the head:

<link rel="manifest" href="/assets/manifest.json" />
<link rel="stylesheet" href="/stylesheets/govuk-frontend.min.css" />

With this:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

Then run php artisan serve and head to http://localhost:8000 to view our new page.

What next

From here you can start building your app by creating a layout blade component that other pages can reuse, then create reusable components following the HTML examples in the GOV.UK Design System.

Photo by NegativeSpace on StockSnap

Laravel WebDev Frontend

Latest Posts

Building a landing page for your book
Building a landing page for your book

This post follows on from my last post about using your website to promote your ebooks. The first step of the article explains that you need to make a website, but didn’t go into too much detail. This post aims at explaining how you can build a landing page for your book with Bulma Clean Theme.

How to promote your ebooks with your website?
How to promote your ebooks with your website?

I’m a web developer by trade and a part-time author, so here are a few things that I have done to help promote my books and ebooks using my website and my tech know how from my day job.

Using the GOV.UK Design System with Laravel
Using the GOV.UK Design System with Laravel

I recently worked on a project using the GOV.UK Design System with a Laravel project. The GOV.UK frontend provides layouts and accessible HTML components with their own CSS and JavaScript. The two packages worked really well together, so I thought I would provide a quick example of how to get it setup.

How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

From £2.49 or read for free on Kindle Unlimited!

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £0.99 or read for free on Kindle Unlimited!