Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
{
|
|
|
|
|
"name": "notifications-admin",
|
|
|
|
|
"version": "0.0.1",
|
2022-11-29 08:55:22 -05:00
|
|
|
"description": "Admin front end for Notify",
|
2015-12-20 00:00:01 +00:00
|
|
|
"engines": {
|
2021-09-15 16:24:01 +01:00
|
|
|
"node": ">=10.15.3"
|
2015-12-20 00:00:01 +00:00
|
|
|
},
|
Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
"scripts": {
|
2022-10-27 11:10:13 -04:00
|
|
|
"lint": "gulp lint",
|
|
|
|
|
"test": "jest --config tests/javascripts/jest.config.js tests/javascripts",
|
2019-10-16 15:20:05 +01:00
|
|
|
"test-watch": "jest --watch --config tests/javascripts/jest.config.js tests/javascripts",
|
2016-01-12 13:37:50 +00:00
|
|
|
"build": "gulp",
|
2022-05-10 11:33:24 +01:00
|
|
|
"watch": "gulp watch",
|
2023-09-20 13:52:54 -04:00
|
|
|
"audit": "better-npm-audit audit --production --level low",
|
|
|
|
|
"pa11y-ci": "pa11y-ci"
|
Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
},
|
|
|
|
|
"repository": {
|
|
|
|
|
"type": "git",
|
2022-11-29 08:55:22 -05:00
|
|
|
"url": "git+https://github.com/GSA/notifications-admin.git"
|
Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
},
|
2022-11-29 08:55:22 -05:00
|
|
|
"author": "General Services Administration",
|
|
|
|
|
"license": "CC0",
|
|
|
|
|
"homepage": "https://github.com/GSA/notifications-admin#readme",
|
2024-06-17 14:27:59 -07:00
|
|
|
"overrides": {
|
2024-06-17 14:36:06 -07:00
|
|
|
"graceful-fs": "^4.2.11"
|
2024-06-17 14:27:59 -07:00
|
|
|
},
|
Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
"dependencies": {
|
2025-03-06 23:56:27 +00:00
|
|
|
"@rollup/plugin-commonjs": "^28.0.3",
|
2025-03-11 23:18:00 +00:00
|
|
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
2024-08-08 14:32:33 -06:00
|
|
|
"@rollup/stream": "^3.0.1",
|
2025-05-23 23:31:27 +00:00
|
|
|
"@uswds/uswds": "^3.13.0",
|
Support registering a new authenticator
This adds Yubico's FIDO2 library and two APIs for working with the
"navigator.credentials.create()" function in JavaScript. The GET
API uses the library to generate options for the "create()" function,
and the POST API decodes and verifies the resulting credential. While
the options and response are dict-like, CBOR is necessary to encode
some of the byte-level values, which can't be represented in JSON.
Much of the code here is based on the Yubico library example [1][2].
Implementation notes:
- There are definitely better ways to alert the user about failure, but
window.alert() will do for the time being. Using location.reload() is
also a bit jarring if the page scrolls, but not a major issue.
- Ideally we would use window.fetch() to do AJAX calls, but we don't
have a polyfill for this, and we use $.ajax() elsewhere [3]. We need
to do a few weird tricks [6] to stop jQuery trashing the data.
- The FIDO2 server doesn't serve web requests; it's just a "server" in
the sense of WebAuthn terminology. It lives in its own module, since it
needs to be initialised with the app / config.
- $.ajax returns a promise-like object. Although we've used ".fail()"
elsewhere [3], I couldn't find a stub object that supports it, so I've
gone for ".catch()", and used a Promise stub object in tests.
- WebAuthn only works over HTTPS, but there's an exception for "localhost"
[4]. However, the library is a bit too strict [5], so we have to disable
origin verification to avoid needing HTTPS for dev work.
[1]: https://github.com/Yubico/python-fido2/blob/c42d9628a4f33d20c4401096fa8d3fc466d5b77f/examples/server/server.py
[2]: https://github.com/Yubico/python-fido2/blob/c42d9628a4f33d20c4401096fa8d3fc466d5b77f/examples/server/static/register.html
[3]: https://github.com/alphagov/notifications-admin/blob/91453d36395b7a0cf2998dfb8a5f52cc9e96640f/app/assets/javascripts/updateContent.js#L33
[4]: https://stackoverflow.com/questions/55971593/navigator-credentials-is-null-on-local-server
[5]: https://github.com/Yubico/python-fido2/blob/c42d9628a4f33d20c4401096fa8d3fc466d5b77f/fido2/rpid.py#L69
[6]: https://stackoverflow.com/questions/12394622/does-jquery-ajax-or-load-allow-for-responsetype-arraybuffer
2021-05-07 18:10:07 +01:00
|
|
|
"cbor-js": "0.1.0",
|
2024-08-09 10:48:39 -06:00
|
|
|
"d3": "^7.9.0",
|
2024-07-03 13:48:03 -06:00
|
|
|
"govuk_frontend_toolkit": "^9.0.1",
|
2019-10-03 12:59:26 +01:00
|
|
|
"govuk-frontend": "2.13.0",
|
2024-08-08 14:01:05 -06:00
|
|
|
"gulp-merge": "^0.1.1",
|
2016-09-20 12:30:00 +01:00
|
|
|
"hogan": "1.0.2",
|
2024-06-17 13:55:25 -07:00
|
|
|
"jquery": "3.7.1",
|
2025-04-22 14:04:19 +00:00
|
|
|
"morphdom": "^2.7.5",
|
2025-06-10 23:36:57 +00:00
|
|
|
"playwright": "^1.53.0",
|
2023-04-24 14:57:35 -04:00
|
|
|
"python": "^0.0.4",
|
2016-09-28 17:47:40 +01:00
|
|
|
"query-command-supported": "1.0.0",
|
2025-06-10 14:49:29 +00:00
|
|
|
"sass-embedded": "^1.89.2",
|
2025-04-09 17:11:09 -07:00
|
|
|
"socket.io-client": "^4.8.1",
|
2019-04-01 09:58:13 +01:00
|
|
|
"textarea-caret": "3.1.0",
|
2024-08-08 14:32:33 -06:00
|
|
|
"vinyl-buffer": "^1.0.1",
|
|
|
|
|
"vinyl-source-stream": "^2.0.0"
|
2016-02-08 11:05:07 +00:00
|
|
|
},
|
|
|
|
|
"devDependencies": {
|
2025-05-30 23:50:39 +00:00
|
|
|
"@babel/core": "^7.27.4",
|
2025-05-06 23:43:29 +00:00
|
|
|
"@babel/preset-env": "^7.27.2",
|
2025-05-22 23:06:08 +00:00
|
|
|
"@uswds/compile": "^1.3.1",
|
2024-09-18 13:59:16 -04:00
|
|
|
"backstopjs": "^6.3.25",
|
2024-09-10 18:28:31 +00:00
|
|
|
"better-npm-audit": "^3.11.0",
|
2025-06-11 00:13:31 +00:00
|
|
|
"gulp": "^5.0.1",
|
2024-06-17 14:36:06 -07:00
|
|
|
"gulp-add-src": "^1.0.0",
|
2022-05-05 14:52:32 +01:00
|
|
|
"gulp-babel": "8.0.0",
|
|
|
|
|
"gulp-clean-css": "4.3.0",
|
2024-08-08 14:01:05 -06:00
|
|
|
"gulp-concat": "^2.6.1",
|
2022-05-06 15:34:54 +01:00
|
|
|
"gulp-include": "2.4.1",
|
2018-01-17 16:50:39 +00:00
|
|
|
"gulp-jshint": "2.1.0",
|
2021-09-09 14:33:30 +01:00
|
|
|
"gulp-prettyerror": "2.0.0",
|
2022-05-06 15:34:54 +01:00
|
|
|
"gulp-uglify": "3.0.2",
|
2025-06-10 23:37:28 +00:00
|
|
|
"jest": "^30.0.0",
|
2025-06-11 00:13:27 +00:00
|
|
|
"jest-each": "^30.0.0",
|
2022-10-27 11:12:39 -04:00
|
|
|
"jest-environment-jsdom": "^29.2.2",
|
2024-06-18 07:49:20 -07:00
|
|
|
"jshint": "2.13.6",
|
2019-10-11 10:26:25 +01:00
|
|
|
"jshint-stylish": "2.2.1",
|
2025-06-11 23:40:58 +00:00
|
|
|
"rollup": "^4.43.0",
|
2019-10-11 10:26:25 +01:00
|
|
|
"rollup-plugin-commonjs": "10.1.0",
|
2024-08-08 13:58:33 -06:00
|
|
|
"rollup-plugin-node-resolve": "5.2.0"
|
Use a Node-based tools for handling assets
…or how to move a bunch of things from a bunch of different places into
`app/static`.
There are three main reasons not to use Flask Assets:
- It had some strange behaviour like only
- It was based on Ruby SASS, which is slower to get new features than libsass,
and meant depending on Ruby, and having the SASS Gem globally installed—so
you’re already out of being a ‘pure’ Python app
- Martyn and I have experience of doing it this way on Marketplace, and we’ve
ironed out the initial rough patches
The specific technologies this introduces, all of which are Node-based:
- Gulp – like a Makefile written in Javascript
- NPM – package management, used for managing Gulp and its related dependencies
- Bower – also package management, and the only way I can think to have
GOV.UK template as a proper dependency
…speaking of which, GOV.UK template is now a dependency. This means it can’t be
modified at all (eg to add a global `#content` wrapper), so every page now
inherits from a template that has this wrapper. But it also means that we have a
clean upgrade path when the template is modified.
Everything else (toolkit, elements) I’ve kept as submodules but moved them to a
more logical place (`app/assets` not `app/assets/stylesheets`, because they
contain more than just SASS/CSS).
2015-12-15 08:20:25 +00:00
|
|
|
}
|
|
|
|
|
}
|