{"id":23066829,"url":"https://github.com/dvsa/front-end","last_synced_at":"2025-08-15T11:33:31.178Z","repository":{"id":26918025,"uuid":"110851161","full_name":"dvsa/front-end","owner":"dvsa","description":"DVSA Front-end application built on Node/Express. It uses SCSS, Nunjucks, ES6, WebPack, Babel, and Docker.","archived":false,"fork":false,"pushed_at":"2024-12-13T05:39:32.000Z","size":27034,"stargazers_count":18,"open_issues_count":27,"forks_count":5,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-12-13T06:27:47.473Z","etag":null,"topics":["css","frontend","gov","html","javascript"],"latest_commit_sha":null,"homepage":"https://dvsa-front-end.herokuapp.com/","language":"Nunjucks","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/dvsa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2017-11-15T15:29:05.000Z","updated_at":"2024-11-18T11:18:50.000Z","dependencies_parsed_at":"2023-01-14T08:45:25.122Z","dependency_job_id":"cea954ba-ba70-4f16-a1fe-e6b53e30078b","html_url":"https://github.com/dvsa/front-end","commit_stats":null,"previous_names":[],"tags_count":167,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvsa%2Ffront-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvsa%2Ffront-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvsa%2Ffront-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dvsa%2Ffront-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dvsa","download_url":"https://codeload.github.com/dvsa/front-end/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229910957,"owners_count":18143229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","frontend","gov","html","javascript"],"created_at":"2024-12-16T05:15:05.748Z","updated_at":"2024-12-16T05:15:06.367Z","avatar_url":"https://github.com/dvsa.png","language":"Nunjucks","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front-end\n**Assets for [MTS](https://gitlab.mot.dvsacloud.uk/mot/mot).**\n\n**Note:** Previously also used by [CVR](https://gitlab.mot.dvsacloud.uk/vehicle-recalls/recalls-app) / [MOTH](https://github.com/dvsa/mot-history) / [MOTR](https://github.com/dvsa/motr)\n\n**IMPORTANT: NEVER UPDATE DIST FILES DIRECTLY!** They are generated from `/src` directory with `npm run build-production`.\n\n## Localdev setup\n\n**Requirements: Node.js \"^12.16\"**\n\n1. Run `npm install` in the root directory of front-end\n2. Make changes to your code. Update version tag in `package.json` and `composer.json`.\n3. **LOCAL:** Build assets using `npm run build-production`. Changes will be reflected in `/dist` folder with new tag versions.\n4. **DOCKER:** Build assets using \n```docker compose run app npm run build-production```\n5. Refresh the page\nNOTE:\n   If you want to update the assets for MTS, the easiest way is to take the Styles.css file\n   \n   ```front-end/dist/assets/stylesheets/styles.css```\n   and copy it's content to\n   \n  ```mot/mot-web-frontend/public/assets/stylesheets/styles.css``` \n   and then refresh the page.\n\nFor the old stylesheets:\n1. Modify the relevant sass file under mot/mot-static\n2. Run:\n```sass app.scss app.scss```\n   This will generate a new app.css which will contain your changes (even if you modified a different sass file\n   such as buttons.scss in mot-static)\n3. Copy the newly generated app.css file into```mot/mot-web-frontend/public/css/```\n4. Refresh the page. \n\n## Deploy to Jenkins\n1. Update front-end/composer.json with an incremented front-end version number.\n2. Run composer update to update the composer.lock file   \n3. Update package.json and package.lock with an incremented version number.\n4. Commit your changes\n5. Run ```git tag -a 1.5.x -m \"Updated assets\" ``` to tag your latest commit\n6. Run ```git push origin 1.5.x``` to push the new asset version\n7. Under web-frontend ~~/CVR/MOTH/MOTR~~ update the composer dependancy to point to the new version.\n8. Run the Jenkins build.\n\nFurther details and guidance for using this kit for prototypes and releases for MTS can be found internally in Confluence by searching for front-end.\n\n## Demo\n\n~~You can view the MOT component library and prototypes here:~~\n\n~~[Heroku Demo](https://dvsa-front-end.herokuapp.com/)~~\n\n## Login credentials\n\n~~If you'd like to access the [Prototypes pages](https://dvsa-front-end.herokuapp.com/prototypes), log in as below.\nThe prototype system is password protected to prevent users accidentally accessing what may look like a real Government Service.~~\n\n~~User: admin~~  \n~~Password: dvsa~~  \n\n\n## OLD Local Setup \n\n### Prerequisite\n\n1. Clone this repo and cd into the directory using terminal\n\n2. Install dependencies using NPM\n\n```shell\ndocker-compose run app npm install\n```\n\n### Development\n\nTo run development mode run the following command inside the directory.\n\n```shell\ndocker-compose up\n```\n\nYou can access the local server with the following url\n\n```\nhttp://localhost:3002\n```\n\nIt will automatically run the following processess concurrently\n\n* gulp start-dev task\n* webpack with development configurations\n* express application with nodemon\n\n\n## Build Production\n\nBuild production command will generate production ready assets and node js server code.\n\nThe productions assets are located in the **dist/assets** folder and the server code is located in the **dist/server** folder.\n\n```shell\ndocker-compose run app npm run build-production\n```\n\n**Run this command and commit changes before pushing to heroku.**\n\n## Docker setup for development\n\n**You will need the latest version of docker installed**\n\n### Running development mode\n\nFor faster development you can use docker by running the following command:\n\n```shell\ndocker-compose up\n```\n\nAfter which the server is located at the local address below:\n\n```\nhttp://localhost:3002\n```\n\n### Building production assets\n\nRun the following command\n\n```shell\ndocker-compose run --rm app npm run build-production\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvsa%2Ffront-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdvsa%2Ffront-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdvsa%2Ffront-end/lists"}