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

Using the GOV.UK Design System with Laravel

#laravel #webdev #frontend

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

Top comments (0)