Nunjucks as a local html build tool

[Piotr Zaborowski]

Hi,

I'm considering Nunjucks for building simple html previews of static designs. I was considering Handlebars but the lack of inheritance is a no-go.

The idea is:

• base.html with blocks for custom components
  
• layout-*.html extends base.html, blocks import...
• component-*.html which has only flat html for design preview (for example the page header)

My idea is to have a nice and fast way to build flexible previews by defining different layouts and then rendering them to static html files that the designer and/or client could view.

This is quite similar to running a static html generator like Jekyll and I would even use it as the use case is really simple but we don't want the overhead of Ruby. Also we want to keep it as generic as possible to easily use it for generating previews for other projects too.

We decided on using Grunt.js for coordinating the preview building because the asset structure will probably vary from client to client.

Given the background I have some questions:

1. How to render the layout-*.html templates to ordinary static html files?

2. Is there any easy way to render the files with Grunt.js?

I'm open for suggestions and questions if anything needs more detail :).

[James Long]

Hi Piotr,

It sounds like you are simply asking about the API to render templates. Check out the API docs: http://nunjucks.jlongster.com/api#Rendering-a-template

You should be able to easily do this. The code will look something like this:

var env = new nunjucks.Environment(new nunjucks.FileSystemLoader('path/to/templates'));

env.render('layout-foo.html', { bar: baz });

Let me know if that doesn't work for you!

- James

--
You received this message because you are subscribed to the Google Groups "Nunjucks" group.
To unsubscribe from this group and stop receiving emails from it, send an email to nunjucks+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[John O'Sullivan]

Hello, jlongster!

Funny enough, I seem to have struck upon the same issue as the original poster.  My goal is to write a set of HTML templates which use Nunjucks to compile (as I also want to make use of template inheritance), all of it happening locally.  When I navigate to [local directory]/home.html, I would like the home.html template to be compiled and displayed to the user.  This is a class project which is exclusively testing our ability to build a UI, so they don't want us writing any backend code.  With that in mind, my current index page is:

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

<script>

    nunjucks.configure('.');

    nunjucks.render('home.html');

</script>

My templates are all in the top-level directory, and I am not receiving any errors about the templates not being found.  Calling "nunjucks.render('home.html')", however, is not rendering any of that HTML onto this page.  Do I need to somehow return the rendered object?  Any help at all would be most appreciated, thank you!