Search code examples
node.jsexpressnunjucks

Nunjucks rendering file paths relative to route being called and overriding express.static setting

Using Nunjucks with Node

Trying to figure out a graceful solution to the following problem. With a directory tree sorda like this: app_dir --app.js --public ----stylesheets ------mystyles.css --views ----page.html ----templates ------page_template.html

  1. Have static files like CSS inside my public directory app.use(express.static(path.join(__dirname, 'public')));

  2. Have the root directory of Nunjucks configured as views nunjucks.configure('views', { autoescape: true, express : app, watch: true });

  3. When I am referencing a css file from within page_template.html, nunjucks (I think) automagically creates a relative path based on the route and overrides the static behavior.

For example, when I use /stylesheets/mystyles.css path on page_template.html but call the file that extends it using /:publication/:page path, the rendered html is /:publication/:page/stylesheets/mystyle.css

I can always write a quick hack that creates relative paths to CSS and other resources based on the route but that doesn't feel like a particularly graceful solution :( Any help much appreciated.

Solution

  • When I am referencing a css file from within page_template.html, nunjucks (I think) automagically creates a relative path based on the route and overrides the static behavior.

    I think it's mistake. Nunjucks don't generate any path.
    In template from any folder (view, view/templates, etc) you must specify filename considering that public dir is root, e.g. /stylesheets/mystyles.css for %app%/public/stylesheets/mystyles.css.

    I use subfolders in view for grouping templates, e.g. /macros (stored macros), /tools (stored additional pages for my app). Also you can use it to router, e.g. /user/view.html, user/add.html...