Skip to content

Update development docs #231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 25, 2015
Merged

Update development docs #231

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96032f7
Document installing the JS machinery
takluyver Jul 25, 2015
86ab103
Remove docs on live-rebuilding CSS
takluyver Jul 25, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 14 additions & 21 deletions docs/source/development.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,23 @@
Development
===========

Installing Javascript machinery
-------------------------------

CSS live reloading
------------------
Running the Notebook from the source code on Github requires some Javascript
tools to build/minify the CSS and Javascript components. We do these steps when
making releases, so there's no need for these tools when installing released
versions of the Notebook.

If you are working on notebook styling, you can use the live-reloading option
of gulp to watch for changes in the `.less` files and automatically rebuild the
`css` and reload the current page.
First, install `Node.js <https://nodejs.org/>`_. The installers on the
Node.js website also include Node's package manager, *npm*. Alternatively,
install both of these from your package manager. For example, on Ubuntu or Debian::

To do so we rely on the livereaload extension of various browser (`for chrome
<https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei>`_),
and the gulp-livereload extension.


To use the livereload extension, in the root of `notebook` project launch::

$ gulp watch


Any changes to any of the less files under the `notebook/static`
directory will trigger a rebuild of css and ask the reload extension to reload
the current page.

Do not forget to activate the extension for the current page by clicking on it.
The dot at the center of the extension icon will be come darker when the extension is activated.
sudo apt-get install nodejs-legacy npm

You can then build the Javascript and CSS by running::

python setup.py css js

This will automatically fetch the remaining dependencies (bower, less) and
install them in a subdirectory.