Problems with browser usage

[voltron]

I wanted to evaluate Nunjucks usage in the browser. I downloaded the example "templates.js" file from github

https://github.com/jlongster/grunt-nunjucks/blob/master/tasks/output/templates.js

I then included nunjucks and the templates source file in my test template as follows

// SNIP!

<script src="nunjucks.js"></script>

<script src="nunjucks.js"></script>

        <script src="templates.js"></script>

      

        <script>

          ///var env = new nunjucks.Environment();

          var env = new nunjucks.Environment(new nunjucks.WebLoader('/tasks/views'))

          

          nunjucks.render('tasks/views/bar.html', function(err, res) {

            console.log('err: ',err);

            console.log('res: ', res);

          });      

</script>

This, of course, did not work. 

1. How do I render precompiled template files in the browser?

2. There is an object in the browsers global space called "nunjucksPrecompiled". This object holds all the templates as functions, how do I use this to render the templates?

Thanks

[jlongster]

Hello,

I think you need to just call `nunjucks.render('bar.html')` with the way you have it currently setup. There is a higher-level API that's easier to use though. Just do this:

nunjucks.configure('path/to/templates', { autoescape: true });
nunjucks.render('bar.html');

To precompile templates, use the `nunjucks-precompile` script that comes with nunjucks and pass it a folder that contains html files. It will dump a js file that you simply include on the page, and with the same init code as above it will just work.

- James

[John O'Sullivan]

Hello,

I'm trying to precompile my templates using gulp, specifically using the gulp-nunjucks extension.  The documentation is pretty insistent about using the 'nunjucks-precompile' script, but this extension just uses the precompile method.  My goal is to create one "templates.js" file which I include on my page, letting me render templates normally.  

First of all, I don't see how I can do this using the precompile method -- if I provide a name function which returns the same name for every file, will it somehow concatenate them into one larger file that still works?  Currently, the method precompiles all of my templates into separate files, leading to an unmanageable number of files to include on my page.  I tried concatenating them using gulp-concat, but that file didn't work.  How do I go about folding all of my templates into one pretty pre-compiled Javascript file?

Second of all, I also want to be able to import templates from the client.  There are macros in a template file which I need to render from the client, and my current way of doing that is

nunjucks.renderString("{% import 'packageForms.html' as forms %} {{ forms.packageForm('task') }}");

This worked fine when I just put the templates directly into the directory, but now that I'm precompiling I get a "Template Not Found" error when it tries to find the /templates/packageForms.html file.  This makes sense because the HTML file is no longer there, replaced by a Javascript one.  Should that import work correctly if I have a correctly created pre-compiled template file?  I'm not sure how to get this working properly.

Thanks,

John

[Carl Meyer]

On Tuesday, July 14, 2015 at 10:48:15 PM UTC-6, John O'Sullivan wrote:

I'm trying to precompile my templates using gulp, specifically using the gulp-nunjucks extension.  The documentation is pretty insistent about using the 'nunjucks-precompile' script, but this extension just uses the precompile method.  My goal is to create one "templates.js" file which I include on my page, letting me render templates normally.  

First of all, I don't see how I can do this using the precompile method -- if I provide a name function which returns the same name for every file, will it somehow concatenate them into one larger file that still works?  Currently, the method precompiles all of my templates into separate files, leading to an unmanageable number of files to include on my page.  I tried concatenating them using gulp-concat, but that file didn't work.  How do I go about folding all of my templates into one pretty pre-compiled Javascript file?

 

Concatenating should work fine (in fact I've done the same thing before using gulp-nunjucks and gulp-concat). You may want to try it again with a bit more confidence, and if you still can't get it working, provide a few more details.

Second of all, I also want to be able to import templates from the client.  There are macros in a template file which I need to render from the client, and my current way of doing that is

nunjucks.renderString("{% import 'packageForms.html' as forms %} {{ forms.packageForm('task') }}");

This worked fine when I just put the templates directly into the directory, but now that I'm precompiling I get a "Template Not Found" error when it tries to find the /templates/packageForms.html file.  This makes sense because the HTML file is no longer there, replaced by a Javascript one.  Should that import work correctly if I have a correctly created pre-compiled template file?  I'm not sure how to get this working properly.

In order to use precompiled templates and allow the client to provide macro files, you'll obviously need to get the macro files from the client and place them with your other templates before you precompile. If you do that, it should work fine; it doesn't know or care where the templates came from, as long as they are there.

If the client needs to provide these macros dynamically, that's more difficult; you probably won't be able to use precompilation. (If the dependency went the other way -- that is, the client templates imported your templates -- that could be done, but you can't precompile a template unless all its dependencies are present at compilation time.)

Carl