DEV Community

Cover image for Using the GOV.UK Design System with Laravel
C.S. Rhymes
C.S. Rhymes

Posted on • Originally published at csrhymes.com on

1

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.

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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: "",
        },
      ],
    }),
  ],
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Then replace these two lines in the head:

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

With this:

@vite(['resources/scss/app.scss', 'resources/js/app.js'])
Enter fullscreen mode Exit fullscreen mode

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay