Eleventy - Create a global production flag

A production flag enables you to run activities in dev or production such as minifying assets, showing draft posts, etc. There isn’t a built-in flag or function that comes with eleventy (11ty) specifically for this. However we have this info at our fingertips.

What is the simplest way to add a production flag to our eleventy project?

Make it global

I think the best choice is to put the functionality in a global data file. This makes the flag available in every template. You can use in your eleventy config and other JavaScript files if you require the data file. Other methods often led to some duplication.

man with a glass globe in his hand with a flag stuck into it
A handier way of doing things ;-)

By default, global data files are located in the _data folder. I will create a JavaScript file called production.js in that folder to create a global production variable.

Code for the global production flag

Node.js exposes environment variables through process.env. Eleventy supplies its own environment variables to process.env also.

Since version 2.0, eleventy has made a process.env.ELEVENTY_RUN_MODE variable available. It has a value of build, serve, or watch. We can use this variable to make our production flag. The build value equates to our production mode since we only build when we deploy our project to production.

In our package.json, we can add npm scripts for running dev and production modes. The “build” script is our production mode – this is what is run when we deploy our eleventy website to production.

JSON
{
"name": "eleventy-production-flag",
"scripts": {
"dev": "eleventy --serve --incremental",
"build": "eleventy",
},
"dependencies": {
"@11ty/eleventy": "^2.0.1",
}
}

I will add the functionality to _data/production.js. Its sole mission is to return a boolean value – true if it is running in production mode, otherwise false. I will use an IIFE (Immediately Invoked Function Expression) that returns the boolean value.

Javascript
// _data/production.js
module.exports = (function () {
return process.env.ELEVENTY_RUN_MODE === "build";
})();

Now, you can now use the production variable throughout your project!

The nice thing about this methodology is that it is totally portable – it works across all operating systems, and you don’t need to set any environment variable yourself anywhere, anytime.

Use production in layouts and includes

You can use the production variable in layouts and includes. You don’t need to do anything else thanks to the data cascade! 🥰

For example, we could have a different title on pages when you are running in dev versus production.

two tabs open in a browser. the left tab shows the title 'dev - home page' for the dev version of the website, and the right tab has the title 'home page' for the production version of the website

This can help when you are working on your website and occasionally checking deployments in the browser. It may prevent you mistaking a tab of the dev website for a tab of the production website. This is all the code you need in your head.njk include:

Nunjucks
<!-- head.njk -->
<head>
{% if production %}
<title>{{ title}}</title>
{% else %}
<title>DEV - {{ title}}</title>
{% endif %}

<!-- other stuff -->
</head>

I do a variation on this theme with favicons for my own website. I have a bright green square favicon in dev mode to catch my eye, whereas production mode it is my actual favicon.

two tabs open in a browser. the left tab shows a bright green square as the favicon for the dev version of website, and the right tab shows rob's actual favicon for the prod version of the website

Use production in the eleventy config

You can use the production variable in your eleventy config but you must require the file.

For example, you can use it to exclude some files from the build. Here I am excluding my draft posts from the build.

Javascript
// eleventy.config.js
const production = require("./_data/production");

module.exports = function (config) {

if (production) {
// e.g. exclude draft files
config.ignores.add("./src/drafts/*.md");
}
};

If you split your eleventy config into multiple files, you can do the exact same thing in each of those files and it will work the same way.

Source code

The source code is available in this GitHub repo – https://github.com/robole/eleventy-tutorials – in the production-flag folder.

Did you enjoy this tutorial? If you did, could you give the repo a star to let me know please? 🌟🫶

Tagged