Add frontend building, versioning and testing

[uittenbroekrobbert]

Use Cases

Currently the frontend setup is plain JavaScript and CSS. External dependencies are hardcoded in the Jinja template.

Proposal

To do (proper) testing and versioning, we need to choose another setup. For example a Node project, which can use typescript, sass/scss builder, dependency management (so we can do automatic versioning) and use a testing framework.

This would make the frontend part more manageable.

Deliverable: A frontend setup that can test JavaScript and has version management on external dependencies. And a 'CSS' builder.

Implementation Details

• consider using webpack
• NPM package manager to install and build the dependencies (npm init, npm add, which creates package.json with packages used as dependencies)
• custom setup to hot rebuild/build dependencies into the site/static/...
  • hint: npm add nodemon, add custom script. See https://github.com/rajasegar/htmx-trello/blob/main/package.json#L6
• system uses typescript (enable strict) and scss
  • npm add tsc
  • npm add scss
• html links to these css and js files that are generated
• change build system in github actions and dockerfile to include these changes

[github-actions[bot]]

Welcome to our community :hugs: and thank you for your first contribution.

As a first time contributor please make sure to review our contribution guidelines :heart: