11ty

Eleventy Documentation

This is an older version of Eleventy. Full release history. Go to the newest Eleventy docs. You could try /docs/data-js/ although it may not exist.

Documentation Pages

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

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];
};

Examples #

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 (e.g. ELEVENTY_ENV) to your templates by using Node.js’ process.env property.

Filename _data/myProject.js
module.exports = {
  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.

Sample commands #

# Serve for Development
ELEVENTY_ENV=development npx eleventy --serve

# Build for Production
ELEVENTY_ENV=production npx eleventy

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 %}

Related Docs