Use .js for Data Files (Global, Directory, Template)

[pixelastic]

Hello,

Is it possible to pass different data to eleventy based on the environment?

My use case is building a website that will use different API in its front-end. The final deployed build should hit production APIs, with production credentials. But while developing locally, I'd like to hit staging APIs, with staging credentials.

I thought about using data in _data folder but it seems that it only accepts JSON files, and not execuatble .js files, right? I also tried to see if I could inject custom data through the config function, but it not seems that it has access to data.

How would you suggest doing this? Am I missing some config/feature somewhere?

[zachleat]

I do like the ideas you’ve presented here!

Specifically these feature requests come to mind:

1. .js for data files
2. Perhaps a setData method in the Configuration API
3. A command line override for global data files (all-or-nothing)

Regardless, one thing you could do today to globally change the data directory (another all-or-nothing approach) using the Configuration API in your .eleventy.js file:

module.exports = function(eleventyConfig) {
  return {
    dir: {
      data: "myDataDir"
    }
  };
};

You could use environment variables (or some other mechanism) to swap the return object there. But that’d be a sledgehammer, not a scalpel.

[pixelastic]

My preference would go toward allowing .js files for _data. This would allow for more flexibility as one could script whatever they wish there, and would stay in the "all-in-js" mindset of eleventy.

[zachleat]

Yeah, I agree with you. Love that idea. I’ve been playing around with an arbitrary .js extension for templates too and have a working example going https://github.com/11ty/eleventy/tree/js-tmpl

118

This idea seems to complement quite nicely with that work

[zachleat]

Can you upvote this?

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

The enhancement backlog can be found here: https://github.com/11ty/eleventy/issues?utf8=%E2%9C%93&q=label%3Aneeds-votes+sort%3Areactions-%2B1-desc+

[kleinfreund]

If data files would be JavaScript, one would be able to do this (very much related to #184):

./_data/eleventy.js:

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

./example.liquid:

{% if eleventy.environment == 'development' %}
  <!-- do something only when building for the development environment -->
{% endif %}

[brookback]

I'd love this feature as well 😍 After some days of building with Eleventy now, it's apparent that more than static JSON for data is needed at build time.

I like what @zachleat suggested above, especially no 2):

Perhaps a setData method in the Configuration API

I'd guess that's the lowest fruit to implement right now? Just a method that accepts an object, which gets mixed into the global data context. This is practically https://github.com/11ty/eleventy/issues/184.

[zachleat]

I did get this (#155, not #184) working in the js-data-files branch. It includes two main pieces:

1. using .js files in your global _data directory, which seems straightforward.
2. And using .js files for template and directory specific data files a la https://www.11ty.io/docs/data-template-dir/

I think the second piece there is a bit risky, as it could very easily collide with existing .js files in the project. I’m open to maybe adding an additional file extension specifically for this but I don’t want to use .11ty.js as that is going to be reserved for #118. Anyone have any good ideas here?

[johanbrook]

foo.data.js could work as a general "JS data file in generic template dir"? If 2) is too risky for now, just cut scope to only to 1) :)

[zachleat]

Documentation added to the v0-5-3 11ty.io branch

[zachleat]

v0.5.3 is out!