Build Failure for Django-Oscar 3.1.6 Frobshop Assets

Question

I am working through the Frobshop sample project for django-oscar.

The django-oscar documentation is rather terse regarding customizing assets, and the unresolved bug I reported for manage.py oscar_fork_statics just adds to the confusion. This is my (failed) attempt at copying files manually and compiling the assets.

I installed Frobshop in /var/work/django/frobshop/.

I installed a virtual environment for django-oscar in /var/work/django/oscar/, so the asset directory for the distribution is found within that directory, in lib/python3.8/site-packages/oscar/static/oscar/. The README.rst file in that directory said When building your own project, it is not recommended to use these files straight from the package. Rather, you should take a static copy of the ``oscar/static/oscar`` folder and commit it into your project.

Seemed straightforward, so I typed:

$ cd /var/work/django
$ mkdir frobshop/frobshop/static/
$ cp -a lib/python3.8/site-packages/oscar/static/oscar/* frobshop/frobshop/static/

Next, README.rst said: You can compile the static assets from the root of the project using a make target: make assets.

$ make assets
make: *** No rule to make target 'assets'.  Stop.

Hmm, that did not work. Is https://github.com/django-oscar/django-oscar/blob/master/Makefile the proper Makefile, I wonder, and where should it be located?

$ wget -O frobshop/static/Makefile \
  https://raw.githubusercontent.com/django-oscar/django-oscar/master/Makefile

Running make assets gave me an error message complaining about a missing package.json, so I grabbed it from django-oscar also.

$ wget -O frobshop/static/package.json \
  https://raw.githubusercontent.com/django-oscar/django-oscar/master/package.json

Seemed like I should run make from the new frobshop/frobshop/static/ directory:

$ (cd frobshop/static/; make assets)

Many files were installed, then eventually this message appeared:

found 3 vulnerabilities (2 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details
npm run build

> [email protected] build /var/work/django/frobshopCamille/frobshop/static
> gulp copy && gulp scss

[11:32:39] No gulpfile found
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `gulp copy && gulp scss`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mslinn/.npm/_logs/2021-02-19T16_32_39_097Z-debug.log
make: *** [Makefile:29: assets] Error 1

I do not know what to do with that error. I see a directory in django-oscar called gulpfile.js. Should I copy that somewhere also?

README.rst went on to say: If you make changes to Oscar's assets in development, you can run ``npm run watch`` to automatically watch and compile changes to them.

$ (cd frobshop/static/; npm run watch)

Of course, that just yields the same error message as before.

Answer 1

The instructions for compiling assets (using make assets, which runs Gulp tasks) mentioned in src/oscar/static_src/oscar/README.rst are actually only meant for when developing/packaging django-oscar itself. We will try to make the documentation more clear.

For a project/shop based on django-oscar, you only need to run ./manage.py collectstatic, to use Oscar's static files without modification, as mentioned here: https://django-oscar.readthedocs.io/en/latest/howto/how_to_handle_statics.html#customising-statics

To modify and override Oscar's static files, you in addition need to run ./manage.py oscar_fork_statics, to copy Oscar's static files into your project. The command is currently broken, but we are working on a fix: https://github.com/django-oscar/django-oscar/pull/3657