Posted onFeb 19, 2024 • Originally published atroboleary.net

Eleventy - Create a global production flag

#webdev #eleventy #javascript

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 witheleventy (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 aglobal data file. This makes the flag available in every template. You can use in your eleventy config and other JavaScript files if yourequire 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 calledproduction.js in that folder to create a globalproduction variable.

Code for the global`production` flag

Node.js exposes environment variables throughprocess.env. Eleventy supplies its own environment variables toprocess.env also.

Since version 2.0, eleventy has made aprocess.env.ELEVENTY_RUN_MODE variable available. It has a value ofbuild,serve, orwatch. We can use this variable to make our production flag. Thebuild value equates to our production mode since we only build when we deploy our project to production.

In ourpackage.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.

{"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, otherwisefalse. I will use anIIFE (Immediately Invoked Function Expression) that returns the boolean value.

// _data/production.jsmodule.exports=(function(){returnprocess.env.ELEVENTY_RUN_MODE==="build";})();

Now, you can now use theproduction variable throughout your project!

The nice thing about this methodology is that it is totally portable -- it works across all operating systems, and youdon't need to setany environment variable yourself anywhere, anytime.

Use`production` in layouts and includes

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

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

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 yourhead.njk include:

<!-- 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.

Use`production` in the eleventy config

You can use theproduction variable in your eleventy config but you mustrequire 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.

// eleventy.config.jsconstproduction=require("./_data/production");module.exports=function(config){if(production){// e.g. exclude draft filesconfig.ignores.add("./src/drafts/*.md");}};