-
Notifications
You must be signed in to change notification settings - Fork 0
Styles and JavaScript
We use ESBuild to work with styles, it is like Webpack, but faster :)
All the project-related styles and scripts are located in src/main/webapp/resources/learnweb.
We use SCSS as style language which is later compiled to CSS. Take a look at this guide to understand the benefits of it.
You can control dependency as usually for JavaScript projects via package.json file.
But make sure that they are included in the entry file main.js.
If the dependency is not bundled into the project (not used on all pages), it should be copied during the build, because node_modules are not available on production, take a look at the esbuild configuration file for examples.
You can run npm run build to do so, but do not forget to install dependencies first (npm install).
The alternative command you can use is npm run build:dev and the output bundle will not be minimized.
We don't have JS tests, but we have linters. Run npm run lint to test your code, it also will be run by CI after you commit changes.
You can start ESBuild in watch mode to update the bundle after any of the project files changed.
Just run npm run watch and start updating styles or scripts, after you switch to a browser, in a few seconds a new bundle will be created with your changes and will be visible in the browser.