Deployable zero-configuration prototyping stack.
See this live at filtercake.com/tazz-deploy-test/.
- Instant prototyping win with AngularJS
- No database, just Local Storage
- Can thus be deployed like any static website
- no minifying, compressing or similar optimization
Supports by default:
- Sass
- Jade
- CoffeeScript
- or vanilla HTML/CSS/JS
Sugar:
- LiveReload
- Growing library of UI goodies so you can focus on how-it-works
Needs node.js, Bower and Grunt CLI.
Sass needs Ruby. node-sass with libsass exists, but they have no support for the indented syntax.
$ git clone git@github.com:filtercake/tazz.git my_new_prototype
$ cd my_new_prototype
$ npm install
$ bower install
$ bundle install # needed for Sass Gem
$ grunt
You should then be able to look at the compiled page at http://localhost:3000/.
The idea is that the build consists of three main files: index.html index.js index.css
Since the html is controlled by the app, we do not need to render partials within Jade (which wouldn't be possible in html anyways.) Instead we define directives, each with its own html template. We can then use those like custom elements in the markup.
Grunt concats app.js and any other file in js/ into index.js. This is quick and dirty, so we do not need to set up something like require.js or the like.
Finally, index.sass imports different partials.
Keep your index files clean to stay sane.
Happy hacking <3
The most straightforward way is to init a new repo with a gh-pages branch in the build directory. So after creating the new repo my_new_prototype on Github, do
$ cd build
$ git init
$ git add -A
$ git commit -m "init"
$ git remote add origin git@github.com:your_github_username/my_new_prototype.git
$ git push -u origin gh-pages
Your app should then be reachable at your_github_username.github.io/my_new_prototype.
See the GitHub Pages documentation for more info.
All input on how stuff could be done better/easier/simpler is welcome, just dump an issue.
There is also a board at waffle.io:
