When working on Zeppelin's WebApplication, it is recommended to run in dev mode.
For that, start Zeppelin server normally, then use ./grunt serve
in zeppelin-web directory.
This will launch a Zeppelin WebApplication on port 9000 that will update on code changes.
Zeppelin WebApplication is using AngularJS as main Framework, and Grunt and Bower as helpers.
So you might want to get familiar with it. Here is a good start (There is obviously plenty more ressources to learn)
But don't worry, JSHint will make you remember it for the most part.
We try not to have JQuery except in directives, If you want to include a library, please search for its angularJS directive first.
If you still need to use it, then please use angular.element()
instead of $()
src
folder: Contains the Source code for Zeppelin WebApplicationdist
folder: Contains the compiled code after using grunt buildThe src
folder is organized as such:
The code is now organized in a component type of architecture, where everything is logically grouped.
In order to understand what is contained inside the .js files without opening it, we use some name conventions:
When we talk about Component architecture, we think about grouping files together in a logical way.
A component can then be made of multiple files like .html
, .css
or any other file type mentioned above.
Related components can be grouped as sub-component as long as they are used in that component only.
Contains the application app.js
and page related components.
The only resctiction being that a component in the app
folder is not used anywhere else
The components
folder is here to contains any reusable component (used more than once)
Fonts files and their css are mixed together in the fonts
folder
As we do not use yeoman to generate controllers or other type of files with this new structure, we need to do some includes manually in index.html
in order to use dev mode and compile correctly.
.js
files needs to be injected between the tag <!-- build:js({.tmp,src}) scripts/scripts.js -->
<!-- build:css(.tmp) styles/main.css -->
bower install <plugin> --save
The file index.html will automatically update with the new bower_component
Example: ./bower install angular-nvd3
You should find that line in the index.html file
<script src="bower_components/angular-nvd3/dist/angular-nvd3.js"></script>