Front-end package management

[Wtower]

As of v0.6.0 (f9a7f8152cab2a295a46f5a342c9fcbcbf8d33c4) the previous (totally basic) package management was removed in favour to other standard solutions. This issue deals with this and how to incorporate them with NineCMS.

Some preliminary suggestions include:

• Bower with django-bower
• django-pipeline
• django-compressor
• Custom compress module with using Uglify and cssmin
• Webpacks with django-webpack-loader
• require.js with django-require

[Wtower]

Note: For any changes, update readme appropriately.

After several tests, some findings:

• django-bower works brilliantly, with any limitations bower may have. Downside is that it requires node.js.
• django-pipelinenot working
• django-compressor not covering requirements (provide template tags, compress to file)
• Node.js seems to be a necessity for front-end package management. If any solution that requires it will be officially supported, add installation instructions.

[Wtower]

Further findings:

• Another possibility is to use npm from Node.js. Differences with bower.
• Both bower and npm do not deal with compression and minification
• Browserify could deal with this
• django-pipeline still not working with no indication why.
• Webpacks is ok but require.js in favour.
• Require.js is very good too.
• Grunt task manager could be used to wrap some of the above into pre-deploy operations. Integrate grunt with django.
• There is a django-grunt project. It offers a custom run grunt command, but that collects static too which is not helpful. It also offers a run server command. Doesn't offer any reasonable way to include transformed files in templates and it is unnecessarily complicated.
• Custom compress module is therefore not necessary.
• Possibly create a custom module to install npm packages like django-bower works.
• All of the above remain node.js solutions.
• Instead of nvm there is nodeenv based on Python, but it is considered lesser and there appears to be no way to directly use within Python code.
• Possibly perform some node action at post-install or with custom django command.

Other possible features

• Jade: Pyjade is the python of templates. It is fast, but it it would require to change default templates, so dismissing for now. Additionally, most ready templates are html.

[Wtower]

A note on serving minified packages vs cdn.

Regarding grunt, a separate app would be necessary:

Only the first app in INSTALLED_APPS seems to override a command. Therefore to override the runserver command it has to happen before django.contrib.staticfiles. A separate app will keep front-end JS completely off 9cms.

Features:

• Offer runserver command
• Possibly offer liveserver capability
• Possibly override collectstatic command
• Possibly offer template tag
• Collect or relevant documentation

[Wtower]

Further findings:

• Front-end management has been dramatically improved with Node.js.
• Lincolnloop recommends to use gulp / browserify.
• Apparently many professionals have switched over to this setup.
• There is an excellent django-gulp app for managing gulp.
• This is a link to the gulp file used by Lincolnlopp.
• Excellent tutorial on using Angular with browserify.

[Wtower]

Updates:

• django-gulp does not integrate well with some IDEs including PyCharm because nvm is not called when running server.
• PyCharm specifically has a gulp plugin.
• For deplyoment, gulp can be called during any devops tool such as ansible local_action with gulp build --production.
• Live reload is another possibilty so that the browser auto-refreshes the page on change.

Summary

Use the following stack:

• node.js
• npm
• gulp
• browserify

Method:

• Provide package.json and gulpfile.js.
• Update readme documentation accordingly.
• No custom app is necessary.

[Wtower]

Setup gulp:

sudo apt-get install imagemagick
npm install -g gulp-cli
npm install -D gulp yargs gulp-utilbrowserify gulp-concat gulp-minify-css gulp-autoprefixer del gulp-notify gulp-if\
               watchify vinyl-source-stream vinyl-buffer gulp-uglify gulp-sass gulp-postcss gulp-sourcemaps\
               gulp-less jshint gulp-jshint jshint-stylish gulp-image-resize event-stream gulp-rename\
               concurrent-transform gulp-changed gulp-mocha gulp-google-webfonts
npm install -S jquery bootstrap lightbox2 normalize.css font-awesome puse-icons-feather

In case gulp watch not working with ENOSPC, increase the inotify watch limit:

# echo fs.inotify.max_user_watches=16384 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p  # bash
$ echo fs.inotify.max_user_watches=16384 | sudo tee -a /etc/sysctl.conf; and sudo sysctl -p  # fish

[Wtower]

Published gulpfile-ninecms.

Update readme.