customization: css

[ppanero]

Support loading/adding custom CSS

[ppanero]

Made to work in debug mode. Steps to follow:

1. Install invenio-app-rdm.
2. Edit the config.py and add:

from invenio_app.config import APP_DEFAULT_SECURE_HEADERS

APP_DEFAULT_SECURE_HEADERS['content_security_policy'] = {}
WEBPACKEXT_STORAGE_CLS = 'pywebpack.storage.LinkStorage'

3. Install invenio-assets from GitHub master branch.
   • Edit the invenio_assets/assets/build/webpack.config.js and add:

var webpackConfig = {
  ...
  resolve: {
    ...
    symlinks: false
  },
...
}

4. Since --watch does not work with symlinks we need to edit DirectoryWatcher.js. Edit <instance_path>/assets/node_modules/watchpack/lib/DirectoryWatcher.js

function DirectoryWatcher(directoryPath, options) {
        ...
	this.watcher = chokidar.watch(directoryPath, {
                ...
		followSymlinks: true,

5. Open two terminals: In each one of them export:

   • FLASK_ENV=development
   • NODE_PRESERVE_SYMLINKS=1

6. In Terminal 1 run:

./scripts/bootstrap
./scripts/setup
 invenio run --cert ./docker/nginx/test.t --key ./docker/nginx/test.key 

7. In Terminal 2 run:

invenio webpack run start

Starting implementing the changes in the correct places.

Kudos @slint for the guidelines and work :)

[slint]

Since it's not sure if more changes are coming, I've made the webpack-fixes WIP branch in invenio-assets, which can be checked out and contains part of the changes (specifically steps 3 and 5)

[ppanero]

@slint Thanks! I added a comment here: inveniosoftware/invenio-assets@094c1ef

The most problematic might be point 4.

followSymlinks was added on watchpack (see webpack/watchpack#114). However, it is not compatible with webpack 4 (it cannot be set from there) and as stated here webpack/webpack#6845 it will come with webpack 5...

While searching for the option I did not find it. So I guess it is fixed somehow different in webpack 5 (I'll keep investigating)

Thoughts?

[zzacharo]

For making it work on macos I had to change unfortunately another line in the DirectoryWatcher.js:

function DirectoryWatcher(directoryPath, options) {
        ...
	this.watcher = chokidar.watch(directoryPath, {
                ...
		followSymlinks: true,
                 depth: 1,

Seems that on macos if you don't increase the depth of the traversed subdirectories changes are not detected. I have opened a ticket webpack/watchpack#141 to understand if this is something is known and fixed in the latest beta version.

[lnielsen]

Isn't this solved by #59 ?

[zzacharo]

@lnielsen if we move the information on how to you can make webpack work locally in another issue this one can be closed! I will create an issue and I will close it!

[zzacharo]

Created this #65 out of the information here!