JavaScript & CSS

Like any web application, Fietsboek makes use of CSS and JavaScript. While Fietsboek is a Python application, and its dependencies are managed via Poetry, it still uses npm to download and update the client-side JavaScript libraries.

Furthermore, Fietsboek uses SASS to pre-compile the CSS files, and in the future will also use TypeScript to pre-compile the JavaScript files. Therefore, it is useful to know at least the basics of the sass/tsc/npm utilities.

In any case, all generated files are commited to the repository. As such, if you don’t want to change the JavaScript/CSS files, you do not have to bother with any of that.

Warning

If you do want to change JavaScript or CSS, always edit the source files. Otherwise your changes will get overwritten the next time the SASS/TypeScript compiler is run.

Updating JavaScript libraries

As mentioned, npm is used to manage the JavaScript libraries. You can check whether libraries are outdated and update them with the following commands:

npm outdated
npm update

In addition, there is a justfile target that copies the assets from the node_modules directory to the fietsboek/static/ directory:

just copy-npm-assets

Compiling SASS

The SASS style files are located in asset-sources. Do not edit the CSS files in fietsboek/static directly, as those changes will get overwritten!

The SASS compiler is installed via npm, and a justfile target exists to compile the right SASS files:

npm install
just compile-sass

Compiling TypeScript

The TypeScript source is located in asset-sources. The tsconfig.json contains the necessary settings for the TypeScript compiler, as such you can simply run tsc to compile the sources:

npx tsc
# Alternatively, keep watching for file changes:
npx tsc -w

To complement the just compile-sass command, a just compile-typescript command also exists as an alias for npx tsc.

When changing the TypeScript code, you should also run eslint:

npx eslint asset-sources/fietsboek.ts