Add frontend tooling
What does this MR do and why?
Adds all the fun frontend dependencies:
- node.js v20.10.0
- yarn 4.0.2 (installs via corepack; version is set in package.json)
- GitLab packages: SVGs, UI, fonts
- Dev tools: eslint, stylelint, prettier
- Build tool: vite
- JS testing tool: jest
Includes minimal configuration files for these.
Also adds:
- Make targets for local environment setup
- CI configuration for running frontend build and test jobs
- Console log message on a Hugo template to show this all working
- Documentation
Closes #6 (closed)
How to set up and validate locally
gitlab, gitlab-runner, etc.
Initial setup:
- Clone this project, and check out this branch (6-frontend-tooling).
- Install dependencies: make setup
- Fetch docs content: REMOVE_BEFORE_CLONE=true make clone-docs-projects
Test a full compile
- Compile JS: yarn build
- Compile and preview Hugo: make view
- Visit the local site: http://localhost:1313
There is no CSS yet. It will look sad. Links don't work yet. But open the browser console! You should see Hello from Vite!, indicating that Hugo is picking up our Vite-assembled JS code. 
Test a frontend dev workflow
- Run yarn devto start watching for JS changes
- Open another terminal window and run make viewto start the local Hugo webserver
- Try editing some files, and saving them. You should see those changes immediately (livereloaded!) in the browser (http://localhost:1313).
Some things you could try:
- Make an obvious CSS change in themes/gitlab-docs/assets/css/main.css:
body {
    color:red;
 }- Make a JS change in themes/gitlab-docs/src/main.js(e.g, change the console log message)
- Make a content change in ../gitlab/docs/_index.md
Note that we are not compiling Vue SFCs yet, that's a separate issue later on in the project (#53 (closed)).
Test the testing tools
- Run eslint, prettier, and stylelint: make lint-frontend
- Run Jest (we don't have any tests yet but we do want Jest to be ready for those): make jest-tests
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
- 
I have evaluated the MR acceptance checklist for this merge request.