Skip to content

Add frontend tooling

Sarah German requested to merge 6-frontend-tooling into main

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

Note for new reviewers: Clone this project to a different directory than where your other GitLab projects are. We have scripts here that modify files in the content source directories, and you probably don't want these on your regular working copies of gitlab, gitlab-runner, etc.

Initial setup:

  1. Clone this project, and check out this branch (6-frontend-tooling).
  2. Install dependencies: make setup
  3. Fetch docs content: REMOVE_BEFORE_CLONE=true make clone-docs-projects

Test a full compile

  1. Compile JS: yarn build
  2. Compile and preview Hugo: make view
  3. 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

  1. Run yarn dev to start watching for JS changes
  2. Open another terminal window and run make view to start the local Hugo webserver
  3. 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

  1. Run eslint, prettier, and stylelint: make lint-frontend
  2. 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.

Edited by Sarah German

Merge request reports