{"id":25872783,"url":"https://github.com/matthew-shaw/hmlr-webpack","last_synced_at":"2026-05-31T20:31:53.851Z","repository":{"id":277571514,"uuid":"932844546","full_name":"matthew-shaw/hmlr-webpack","owner":"matthew-shaw","description":"HM Land Registry Frontend Webpack Demo","archived":false,"fork":false,"pushed_at":"2026-01-12T10:45:18.000Z","size":2074,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-12T18:56:27.507Z","etag":null,"topics":["autoprefixer","babel","browserslist","bundler","cssnano","eslint","govuk","govuk-design-system","govuk-frontend","javascript","postcss","prettier","purgecss","sass","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matthew-shaw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-14T16:15:53.000Z","updated_at":"2026-01-12T10:45:23.000Z","dependencies_parsed_at":"2025-03-27T20:23:24.113Z","dependency_job_id":"1e0c6c56-ba20-4b02-a986-a2969af04f1e","html_url":"https://github.com/matthew-shaw/hmlr-webpack","commit_stats":null,"previous_names":["matthew-shaw/hmlr-webpack"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/matthew-shaw/hmlr-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthew-shaw%2Fhmlr-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthew-shaw%2Fhmlr-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthew-shaw%2Fhmlr-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthew-shaw%2Fhmlr-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matthew-shaw","download_url":"https://codeload.github.com/matthew-shaw/hmlr-webpack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthew-shaw%2Fhmlr-webpack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33748607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autoprefixer","babel","browserslist","bundler","cssnano","eslint","govuk","govuk-design-system","govuk-frontend","javascript","postcss","prettier","purgecss","sass","webpack"],"created_at":"2025-03-02T08:28:43.381Z","updated_at":"2026-05-31T20:31:53.845Z","avatar_url":"https://github.com/matthew-shaw.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HM Land Registry Frontend Webpack Demo\n\n![Static Badge](https://img.shields.io/badge/GOV.UK%20Frontend-v5.13.0-blue)\n\n![Screenshot](screenshot.png)\n\nThis repo demonstrates how to use [Webpack](https://webpack.js.org/) to bundle, compile and minify JavaScript, SCSS, images, and fonts, while optimising the output for performance. It uses various loaders and plugins to process files and generate the final build:\n\n- [**CSS Minimizer Webpack Plugin**](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/): Uses [CSSNANO](https://cssnano.github.io/cssnano/) to minimise the CSS output, reducing file size and improving page load times.\n- [**PostCSS Preset Env**](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env): Uses [Autoprefixer](https://github.com/postcss/autoprefixer) to add vendor prefixes and ensure compatibility with older browsers.\n- [**PurgeCSS**](https://purgecss.com/): Analyses your content and your CSS files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your CSS, resulting in smaller CSS files.\n- [**Babel Preset Env**](https://babeljs.io/docs/babel-preset-env): Transpiles ES6+ JavaScript for cross-browser compatibility while allowing the use of modern JavaScript features.\n- [**Copy Webpack Plugin**](https://webpack.js.org/plugins/copy-webpack-plugin/): Automates copying images from [HMLR Design System](https://hmlr-design-system.herokuapp.com/) to the output directory.\n- [**Webpack Dev Server**](https://webpack.js.org/configuration/dev-server/): Serves files from the output directory with live reloading for development workflows.\n\n## Prerequisites\n\n- A supported LTS version of [Node.js](https://nodejs.org/en)\n- [Node Version Manager](https://github.com/nvm-sh/nvm) (optional)\n- [Docker](https://www.docker.com/) (optional)\n\n## Get started\n\nYou can run on your local host, or in a Docker container:\n\n### On your host\n\n1. Install Node, preferably using `nvm`. The version is set in the `.nvmrc` file and is typically the latest LTS release codename.\n\n   ```shell\n   nvm install\n   ```\n\n2. Install the Node package dependencies from [npm](https://www.npmjs.com/):\n\n   ```shell\n   npm install\n   ```\n\n### Using Docker\n\n1. Build the image\n\n   ```shell\n   docker build -t hmlr-webpack:latest .\n   ```\n\n2. Run the container\n\n   ```shell\n   docker run -p 9000:9000 hmlr-webpack:latest\n   ```\n\n## How to\n\n### Use GOV.UK Design System components\n\nThe `main.scss` file at `/src/scss` is highly selective about which `components` are imported above the required `base`, `core`, `objects`, `utilities` and `overrides`. Components account for around 70% of the output CSS, so should only be included if they are used in the service, in order to keep distributon file sizes small.\n\nBy default, the following components are imported:\n\n- [Cookie banner](https://design-system.service.gov.uk/components/cookie-banner/)\n- [Footer](https://design-system.service.gov.uk/components/footer/)\n- [Header](https://design-system.service.gov.uk/components/header/)\n- [Service navigation](https://design-system.service.gov.uk/components/service-navigation/)\n- [Skip link](https://design-system.service.gov.uk/components/skip-link/)\n\nSimply uncomment any other components in `main.scss` that you need to use.\n\nThe same approach applies to JS; the `main.mjs` file at `/src/js` only imports JS for the components being used:\n\n- Service navigation\n- Skip link\n\n\u003e **Note**: The JS for the Header component is not needed when using the newer [Service navigation](https://design-system.service.gov.uk/components/service-navigation/) component alongside it.\n\nFor comparison (using GOV.UK Frontend v5.10.0):\n\n| Asset           | Size (KB) |\n| --------------- | --------- |\n| Precompiled CSS | 128       |\n| Selective CSS   | 19 (-85%) |\n| Precompiled JS  | 49        |\n| Selective JS    | 5 (-90%)  |\n\n### Format source code\n\nUse [Prettier](https://prettier.io/), an opinionated code formatter, for consistency.\n\nTo check formatting (without changing):\n\n```shell\nnpm run format:check\n```\n\nTo reformat files:\n\n```shell\nnpm run format:fix\n```\n\n### Lint source code\n\nUse [ESLint](https://eslint.org/) to statically analyse your code to quickly find problems.\n\nTo check for issues:\n\n```shell\nnpm run lint:check\n```\n\nTo attempt to automatically fix issues:\n\n```shell\nnpm run lint:fix\n```\n\n### Build assets\n\nUse [Webpack](https://webpack.js.org/) loaders and plugins to output CSS, JS, fonts and images to `./dist`:\n\n```shell\nnpm run build\n```\n\n### Watch changes\n\nRebuild distribution assets automatically when source is changed:\n\n```shell\nnpm run watch\n```\n\n### Run dev server\n\nStart a simple web server with live reloading:\n\n```shell\nnpm start\n```\n\nGo to \u003chttp://localhost:9000\u003e\n\n### Upgrade dependencies\n\nUse [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) to upgrade Node package dependencies (such as [govuk-frontend](https://www.npmjs.com/package/govuk-frontend)):\n\n```shell\nnpm run upgrade:latest\n```\n\nIf you want to be more cautious you can apply only minor or patch level upgrades:\n\n```shell\nnpm run upgrade:minor\n```\n\n```shell\nnpm run upgrade:patch\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthew-shaw%2Fhmlr-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthew-shaw%2Fhmlr-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthew-shaw%2Fhmlr-webpack/lists"}