In-repo addon writing public files on build causes endless build loop on serve

Question

I'm having difficulty with my in-repo addon writing to appDir/public. What I'd like to do is write out a JSON file on each build to be included in the app /dist. The problem I'm running into is when running "ember serve", the file watcher detects the new file and rebuilds again, causing an endless loop.

I've tried writing the JSON file using preBuild() and postBuild() hooks, saving to /public, but after build, the watcher detects it and rebuild over and over, writing a new file again each time. I also tried using my-addon/public folder and writing to that, same thing.

The only thing that partially works is writing on init(), which is fine, except I don't see the changes using ember serve.

I did try using the treeForPublic() method, but did not get any further. I can write the file and use treeForPublic(). This only runs once though, on initial build. It partially solves my problem, because I get the files into app dist folder. But I don't think ember serve will re-run treeForPublic on subsequent file change in the app.

Is there a way to ignore specific files from file watch? Yet still allow files to include into the build? Maybe there's an exclude watch property in ember-cli-build?

Here's my treeForPublic() , but I'm guessing my problems aren't here:

treeForPublic: function() {
    const publicTree = this._super.treeForPublic.apply(this, arguments);
    const trees = [];
    if (publicTree) {
        trees.push(publicTree);
    }
    // this writes out the json
    this.saveSettingsFile(this.pubSettingsFile, this.settings);
    trees.push(new Funnel(this.addonPubDataPath, {
        include: [this.pubSettingsFileName],
        destDir: '/data'
    }));

    return mergeTrees(trees);
},

UPDATE 05/20/2019

I should probably make a new question at this point...

My goal here is to create an auto-increment build number that updates both on ember build and ember serve. My comments under @real_ates's answer below help explain why. In the end, if I can only use this on build, that's totally ok.

The answer from @real_ate was very helpful and solved the endless loop problem, but it doesn't run on ember serve. Maybe this just can't be done, but I'd really like to know either way. I'm currently trying to change environment variables instead of using treeforPublic(). I've asked that as a separate question about addon config() updates to Ember environment: Updating Ember.js environment variables do not take effect using in-repo addon config() method on ember serve

I don't know if can mark @real_ate's answer as the accepted solution because it doesn't work on ember serve. It was extremely helpful and educational!

Answer 1

This is a great question, and it's often something that people can be a bit confused about when working with broccoli (I know for sure that I've been stung by this in the past)

The issue that you have is that your treeForPublic() is actually writing a file to the source directory and then you're using broccoli-funnel to select that new custom file and include it in the build. The correct method to do this is instead to use broccoli-file-creator to create an output tree that includes your new file. I'll go into more detail with an example below:

treeForPublic: function() {
  const publicTree = this._super.treeForPublic.apply(this, arguments);
  const trees = [];
  if (publicTree) {
    trees.push(publicTree);
  }

  let data = getSettingsData(this.settings);
  trees.push(writeFile('/data/the-settings-file.json', JSON.stringify(data)));

  return mergeTrees(trees);
}

As you will see the most of the code is exactly the same as your example. The two main differences are that instead of having a function this.saveSettingsFile() that writes out a settings file on disk we now have a function this.getSettingsData() that returns the content that we would like to see in the newly created file. Here is the simple example that we came up with when we were testing this out:

function getSettingsData() {
  return {
    setting1: 'face',
    setting2: 'my',
  }
}

you can edit this function to take whatever parameters you need it to and have whatever functionality you would like.

The next major difference is that we are using the writeFile() function which is actually just the broccoli-file-creator plugin. Here is the import that you would put at the top of the file:

let writeFile = require('broccoli-file-creator');

Now when you run your application it won't be writing to the source directory any more which means it will stop constantly reloading 🎉

---

This question was answered as part of "May I Ask a Question" Season 2 Episode 2. If you would like to see us discuss this answer in full you can check out the video here: https://youtu.be/9kMGMK9Ur4E