eleventy icon indicating copy to clipboard operation
eleventy copied to clipboard

Watch-Serve Skips Building Due To Passthrough Copy Config

Open AristurtleDev opened this issue 1 year ago • 1 comments

Operating system

Windows 10

Eleventy

10.2.4

Describe the bug

When running 11ty using the --serve flag, it should, to my understanding, watch for changes to any content within the configured "input" directory. When a change is detected in one of those files, it should trigger a rebuild and re-serve the file live to the browser.

However, in this particular setup, this is not working as I would expect it.

In the my .eleventy.js configuration file, I have the following configurations applied

function eleventy(eleventyConfig) {

    //  Adding this passthrough that specifies images only causes the
    //  watch-serve to skip building markdown files that are in directories that
    //  match with the passthrough, even though the pass through is image
    //  specific in the glob and does not include .md in the glob
    eleventyConfig.addPassthroughCopy('content/articles/**/*.{png, jpg, jpeg}');

    //  Configure server to specifically files in the content directory.
    //  The content directory is already set as the "input" directory so it
    //  should be watched by default, but being explicitly specific here.
    eleventyConfig.setServerOptions({
        watch: ['content/**/*']
    });

    return {
        templateFormats: ['md', 'njk', 'html'],
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        "dir": {
            //  content directory set explicity as the input directory here
            "input": "content",
            "includes": "../_includes",
            "data": "../_data",
            "output": "_site"
        }
    }
}

This configuration tells it to pass through copy image files from the /content/articles/ directory that way we can keep images relative to the documentation file they are for instead of a single massive image dump directory somewhere.

Next, this configuration explicitly tells it to watch the /content/**/* glob for changes, which should watch all files and directories/subdirectories recursively within the content directory.

However, with this setup, when running @11ty/eleventy --serve then making changes to markdown files that are also in a directory that contains the images, the watch-serve skips the build of the markdown file.

Reproduction steps

  1. Clone the minimal reproduction git clone https://github.com/AristurtleDev/eleventy-watch-issue.git
  2. Restore npm packages npm install
  3. Execute dev script to launch 11ty server npm run dev
  4. Navigate to http://localhost:8080/articles/tools/ in your browser
  5. With the 11ty server still running, make a change to the /content/articles/tools/index.md file and save it

Expected behavior

After saving the changes to the content/articles/tools/index.md file, it is expected that the watch-serve is triggered, recognizing the change, performing a build, and re-serving it to the browser

Actual Behavior

What actually happens instead is it states the following in the terminal

[11ty] File changed: content\articles\tools\index.md (skips build)

Additional Notes:

Making changes to other markdown files in the minimal example repo perform the watch-serve trigger build and re-serve as expected.

Also, if the passthroughCopy configuration is removed, the issue no longer exists, but it also no longer copies the relative image files like needed.

Reproduction URL

https://github.com/AristurtleDev/eleventy-watch-issue

Screenshots

No response

AristurtleDev avatar Jan 01 '24 02:01 AristurtleDev