How to setup the baseurl for nunjucks

Question

I want to deploy the site to different servers for testing, production etc. So defining a basepath by changing one variable or setting would be the prefered method. What is the best method to implement this?

Currently I have set a variable in layout file as follows.

{% set siteBaseurl = '/demo' %}

It is used everywhere else I define paths as follows

<img src="{{ siteBaseurl }}/images/logo.png" />

Answer 1

I found the perfect solution. As mentioned in the gulp-nunjucks-render package you can parse variables to the template via gulp task. Using dotenv you can get it from a single configuration file. Here's how I set it up

.env

NODE_ENV=development
BASEURL=\demo

gulpfile.js

const nunjucksData = {
    baseurl: process.env.BASEURL
};

gulp.task('nunjucks', function () {
    nunjucksRender.nunjucks.configure(['app/templates/']);
    // Gets .html and .nunjucks files in pages
    return gulp.src('app/pages/**/*.+(html|njk|nunj|nunjucks)')
        // Renders template with nunjucks
        .pipe(nunjucksRender({
            data: nunjucksData,
            path: ['app/templates/'] // String or Array
        }))
        .pipe(gulpif(isProd, htmlmin()))
        // output files in app folder
        .pipe(gulp.dest('dist'));
});

layout.njk

<img src="{{ baseurl }}/images/logo.png" />

Hope this helps