Trigger builds programmatically via JavaScript API without the cli

[paulshryock]

Is it possible to trigger a build via JavaScript without using the cli (i.e. npx eleventy)?

I've wrapped Eleventy in an Electron application, I would like to trigger new builds on button click, after updating data via form entry--but I'm not sure how to trigger builds via API without running the cli.

[paulshryock]

Possibly relevant:

• https://stackoverflow.com/a/31897900/6079274
• https://stackoverflow.com/a/20643568/6079274
• https://github.com/RIAEvangelist/node-cmd
• http://documentup.com/shelljs/shelljs

[Ryuno-Ki]

Have you looked at cmd.js?

[paulshryock]

Have you looked at cmd.js?

I hadn't looked at it yet, but I think you're right that it could potentially have what I need. Thanks! If I'm able to trigger builds with some of that code, I'll post an update.

[indo-dev-0]

I came here to request this feature so that I can use the step-through debugger.

Have you looked at cmd.js?

This isn't a very ergonomic solution, as I want to be able to just require() the package and be done. Would a pull request for this functionality be welcome?

[paulshryock]

This isn't a very ergonomic solution, as I want to be able to just require() the package and be done. Would a pull request for this functionality be welcome?

Right. I haven't had success triggering builds from my app via JavaScript, using something like require(). I think it might be possible if I were to include 11ty in my project, not as a dependency, but copied into my source code in its entirety (dependencies and all?), but that seems like silly stupid.

[zachleat]

I did post a quick example of this here https://twitter.com/zachleat/status/1167115558552244226 but work is ongoing here for something official

[kmelve]

So I got this to run from .eleventy.js by calling the enclosing function from a setTimeout:

/**
 * Set up a listener to rebuild on changes made in Sanity.
 * Add a token to .env.development to rebuild on all changes.
 */
async function preview() {
  const client = require('./utils/sanityClient')
  const Eleventy = require("@11ty/eleventy");
  let inst = new Eleventy();
  await inst.init();
  await client.listen('*').subscribe(async doc => {
    await inst.write();
  })
}
setTimeout(() => preview(), 200)

It now rebuilds when the listener register changes via the API.

[zachleat]

@kmelve Do you think that setTimeout is something we’re doing or how Sanity is doing its thing?

[kmelve]

One of my colleagues suggested it is because we have modules/files that’s reference each other. So it has nothing to do with Sanity, or Eleventy, but this: https://nodejs.org/api/modules.html#modules_cycles.

I think I’ll just bring the preview function into a separate file and run it concurrently from package.json. There’s no reason it has to be in the config file outside of having stuff in one place.

[indo-dev-0]

If you do build a normal API, it would be really nice if 11ty could produce a stream that can be consumed by Gulp. As it stands, one must built to a temp directory first....

[PierBover]

So @zachleat has this example here:

https://gist.github.com/zachleat/5b5ae0ddadbeba6169f18e5b4aa58a66

Problem is, AFAICT, that the config still comes from a .js file.

this.config = config.getConfig();

https://github.com/11ty/eleventy/blob/master/src/Eleventy.js#L30

In a cloud function this could be a problem since you may need to determine paths dynamically at runtime.

Is there a way to pass the config to the Eleventy constructor instead?

[zachleat]

Note that #136 had an additional 37 votes at time of closing.

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

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[blake-mealey]

For anyone that may still be interested, I've found an answer to @PierBover's question

So @zachleat has this example here:

https://gist.github.com/zachleat/5b5ae0ddadbeba6169f18e5b4aa58a66

Problem is, AFAICT, that the config still comes from a .js file.

this.config = config.getConfig();

https://github.com/11ty/eleventy/blob/master/src/Eleventy.js#L30

In a cloud function this could be a problem since you may need to determine paths dynamically at runtime.

Is there a way to pass the config to the Eleventy constructor instead?

It seems the config property is set in the Eleventy constructor but not accessed until init is called, so you can create the config yourself and set it directly on the instance before calling init, e.g.:

const Eleventy = require("@11ty/eleventy");

(async function() {
	let inst = new Eleventy();
        inst.config = { /*my custom config*/ };
	await inst.init();
	await inst.write();
})();

[paulshryock]

@PierBover and @blake-mealey, you can also use the setConfigPathOverride() method before calling init():

(async function() {
  const ssg = new Eleventy();
  // Pass a JavaScript file which exports an object:
  ssg.setConfigPathOverride('./config/vendor/eleventy.js');
  await ssg.init();
  await ssg.write();
})();

[zachleat]

Note that 1.0 will have this functionality too. https://twitter.com/zachleat/status/1358966988203323394

Subscribe to #1629

[zachleat]

Removing this from the enhancement queue, moving to the 1.0 milestone.

[zachleat]

First draft of the docs for this feature are available: https://www.11ty.dev/docs/programmatic/