Eleventy - Create a global production flag
Tags: webdev, eleventy, javascript
Published: 2024-02-19 11:00:00


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)](https://www.11ty.dev/) 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](https://www.11ty.dev/docs/data-global/). 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.

<figure>
![man with a glass globe in his hand with a flag stuck into it](https://www.roboleary.net/assets/img/blog/2024-01-24-eleventy-production-flag/global-flag.webp)
<figcaption>A handier way of doing things ;-)</figcaption>
</figure>

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`](https://nodejs.org/api/process.html#process_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)](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) 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](https://www.roboleary.net/assets/img/blog/2024-01-24-eleventy-production-flag/title-modes.png)

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:

```jinja2
<!-- 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](https://www.roboleary.net/assets/img/blog/2024-01-24-eleventy-production-flag/favicons-modes.png)

## 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).

You will find the project in the *production-flag* subfolder.

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

---

Written by [Rob O'Leary](https://www.roboleary.net)

[Subscribe to web feed](https://www.roboleary.net/feed.xml) for the latest articles.

<small>© Rob OLeary 2024</small>