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.
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.
{
"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.
// _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.
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:
<!-- 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 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.
// 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.
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
Subscribe to web feed for the latest articles.
© Rob OLeary 2024
Top comments (0)