JavaScript Data Files New in v0.5.3 #

This file applies to both Global Data Files (*.js inside of your _data directory) and Template and Directory Data Files (*.11tydata.js files that are paired with a template file or directory).

Using JS Data Files #

You can export data from a JavaScript file to add data, too. This allows you to execute arbitrary code to fetch data at build time.

module.exports = [
  "user1",
  "user2"
];

If you return a function, we’ll use the return value from that function.

module.exports = function() {
  return [
    "user1",
    "user2"
  ];
};

We use await on the return value, so you can return a promise and/or use an async function, too. Fetch your data asynchronously at build time!

module.exports = function() {
  return new Promise((resolve, reject) => {
    resolve([
      "user1",
      "user2"
    ]);
  });
};

async function fetchUserData(username) {
  // do some async things
  return username;
}

module.exports = async function() {
  let user1 = await fetchUserData("user1");
  let user2 = await fetchUserData("user2");

  return [user1, user2];
};

Arguments to Global Data Files #

New in v1.0.0 When using a callback function in your JavaScript Data Files, Eleventy will now supply any global data already processed via the Configuration API (eleventyConfig.addGlobalData) as well as the eleventy global variable.

module.exports = function(configData) {
  if(configData.eleventy.env.source === "cli") {
    return "I am on the command line";
  }

  return "I am running programmatically via a script";
};

Example: Using GraphQL #

This “Hello World” GraphQL example works out of the box with Eleventy:

var { graphql, buildSchema } = require("graphql");

// this could also be `async function`
module.exports = function() {
  // if you want to `await` for other things here, use `async function`
  var schema = buildSchema(`type Query {
    hello: String
  }`);

  var root = {
    hello: () => "Hello world async!"
  };

  return graphql(schema, "{ hello }", root);
};

Example: Exposing Environment Variables #

You can expose environment variables to your templates by utilizing Node.js’ process.env property. (Related: starting in version 1.0, Eleventy supplies a few of its own Environment Variables)

Start by creating a Global Data file (*.js inside of your _data directory) and export the environment variables for use in a template:

Filename _data/myProject.js

module.exports = function() {
  return {
    environment: process.env.ELEVENTY_ENV
  };
};

Saving this as myProject.js in your global data directory (by default, this is _data/) gives you access to the myProject.environment variable in your templates.

You can set values for your environment variables using the command line or inside a .env file with dotenv.

When ELEVENTY_ENV is set, the value from myProject.environment will be globally available to be used in your templates. If the variable hasn't been set, you can provide a fallback e.g. process.env.ELEVENTY_ENV || "development".

Template Usage #

Working from our Inline CSS Quick Tip, we can modify the output to only minify our CSS if we’re building for production:

{% if myProject.environment == "production" %}
<style>{{ css | cssmin | safe }}</style>
{% else %}
<style>{{ css | safe }}</style>
{% endif %}

Sample commands #

The supplied environment variables can be set via the command line:

# Serve for Development
ELEVENTY_ENV=development npx @11ty/eleventy --serve

# Build for Production
ELEVENTY_ENV=production npx @11ty/eleventy

Note that the commands to set environment variables are different for Windows (see examples using the DEBUG environment variable). You can also use these commands in an npm script in your package.json:

{
  "scripts": {
    "serve:dev": "ELEVENTY_ENV=development npx @11ty/eleventy --serve",
    "build:prod": "ELEVENTY_ENV=production npx @11ty/eleventy"
  }
}

Eleventy Documentation