Support Jade/PugJS

[kuhnroyal]

Is this planned, didn't find any information regarding this. Coming from the old generator, this feature would be missed.

[zckrs]

Currently we have no HTML prepro.

[kuhnroyal]

Any plans?

[zckrs]

Of course yeah. One day. But contributions are welcome and appreciate.

At moment we focus stabilization of current options.

In https://github.com/FountainJS/generator-fountain-webapp/issues/48 maybe we can add htmlPrepro feature

[JustinRvt]

I have to tell, your new generator is truly amazing but not having Jade is a bit of a disappointment, especially for Front-End developers. Is there any online tutorial that would help us to use it? I'd be glad to read it.

Nice work again!

[Swiip]

It depends a lot your choice of options. If you use Webpack, perhaps the best is to use pug-html-loader and require your templates. If you keep Bower, the gulp configuration is not so different from gulp-angular, you can adapt the markup rule.

[JustinRvt]

Oh ok, thanks. I was trying to use Webpack for the first time. Guess I have to read about it!

Thanks a lot for your quick answer

[kuhnroyal]

I have come up with a working solution with webpack and pure jade. It however involves a tmp folder which I don't quiet like. So if anyone has an example usage of pug-html-loader...

[Swiip]

Can't throw a full example right now, but what you have to do is:

• Add pug-html-loaderin Webpack in webpack.conf.js activated on *.pug files
• Configure yours Angular component or routes with template: require('./my-template.pug'). Of if you use Babel or TS: import tmpl from './my-template.pug'; (...) template: tmpl
• Remove angular-templatecache process from the build as webpack will already add templates in the bundle.

Basically you use webpack to load and transpile your templates as strings in your JS code. Next, you just have to put this string as template in Angular.

[JustinRvt]

Oh! Thanks a lot for your hint my fellow neighbor from Lyon

[mattiLeBlanc]

+1 Isn't it possible to do it the same as in the old Gulp Angular generator, where the JADE/PUG files where converted to HTML in the .tmp file and added into template cache. Using Require in my routes sounds a bit of a weird approach to me. I am trying to figure out if I can get this to work, but the whole Gulp config setup is a bit of a blackbox to me right now.

[micaelmbagira]

@mattiLeBlanc Do you want to make pug work with Webpack or SystemJS or just Gulp ?

[mattiLeBlanc]

@micaelmbagira sorry for not specifying. With Webpack would be great. Isn't that also using Gulp? I am using the old generator now (anguluar-gulp) where I go for the angular + typescript + styles + jade/pug option and I run gulp serve/build

[micaelmbagira]

With Webpack it's simple, and you don't need to manually convert .pug into html, only need to use pug-loader. I made a poc if you want, it's Angular 2 but it's the same for React and AngularJS.

[kuhnroyal]

I followed Swiip's advice and have it working now for 2 weeks without problems. There are 2 loaders available, I didn't notice any difference. https://github.com/willyelm/pug-html-loader https://github.com/pugjs/pug-loader

[mattiLeBlanc]

So with the pug-loader you have to require your templates in UI-Router? @micaelmbagira Would love to see your POC, yes please.

[micaelmbagira]

@mattiLeBlanc Here is the poc https://github.com/FountainJS/poc-pug, it's an Angular 2 app but you can easily reproduce it with AngularJS or React. Regarding UI-Router you don't need to require anything because you declare component its name

.state('app', {
    url: '/',
    component: 'myComponent'
});

[mattiLeBlanc]

@kuhnroyal Hi,

I tried to pug-html-loader. But I find it a bit awkward to require the template source above my router config. With the previous Gulp-Angular generator. my ui-router config would look like:

 $stateProvider
    .state('app', {
      url: '/',
      template: '<app>HI</app>'
    })
    .state('test', {
      url: '/test',
      templateUrl: '/app/views/test.html'
    }) ;

When using JADE or PUG in just creates the HTML file in the .tmp folder so that I can reference it normally in the templateUrl. To me this seems like a pretty straight forward solution. I am only using PUG for its short markup together with AngularJS.

I am looking at the Angular2 app from @micaelmbagira and see how that would fit in for me.

[mattiLeBlanc]

@micaelmbagira , @kuhnroyal I got your version to work. I can also suggest that you add the same pug-loader to your webpack-dist.conf.js so that it will also work on build.

Thanks guys for your input. I have been able to verify that the pug templates are rendered as HTML in template cache. So that should all work fine.

[danilovaz]

Has anyone managed to do a better task to use PUG / JADE with Fountain?