How to set up Jade for Cloud9 IDE?

Question

I want to do some front-end designs in Cloud9, something like a portfolio page with some CSS animations etc, and rather than writing in vanilla HTML, I'm interested to learn/use Jade, since it will make the code look clearner.

How do I setup Jade in Cloud9? For example, set it up so if I change index.html to index.jade things will just work as normal.

ps side question, is Jade a good choice for my purpose? I've heard Mustache, Handlebars, Slim, or even using React? I just want to write HTML like using Sass.

Answer 1

If you'd like to use Jade anywhere, you'd have to translate Jade to HTML before serving it. The following is the general way:

1. Store your Jade files in a separate folder
2. Use either the Jade command line or use Grunt plugin or Gulp plugin for compiling all your Jade templates to the destination directory where you're serving your HTML from.
3. [Optional step for Cloud9] If you've set that all up, you can use Cloud9's custom builders (Run > Build System > New Build System) to add that to a builder that you can invoke using the build menu.

I assume here you just want a simple Web page, and aren't using Express etc, which would have a somewhat different flow than the above.

Regarding your side question. I don't think StackOverflow is the best place to ask that, and in any case, the answer to any such question is eventually 'depends' and 'try each of them out', 'research', 'use what you know best', 'use what suits your needs best', and some combination / mutation of the above :).