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 dev
to start watching for JS changes - Open another terminal window and run
make view
to 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.