assets not being copied to "output" directory

[ahillio]

Describe the bug

Doing npx @11ty/eleventy --serve is copying all my .md files (and properly building them with the .liquid template and reloading browser-sync) but it fails to copy over assets like images and css files.

To Reproduce

mkdir website; cd website
npm init -y
npm install --save-dev @11ty/eleventy
vi .eleventy.js # with contents:

// .eleventy.js
module.exports = function(eleventyConfig) {
  return {
    dir: { input: "src", data: "data", includes: "layouts", output: "site_product" }
  }
};

vi src/layouts/layout.liquid
vi src/index.md # this references layout file in its frontmatter and includes an image in its markdown
vi src/main.css
# THEN...
npx @11ty/eleventy --serve

Expected behavior

HTML gets built, and all assets get copied to output dir (site_product in my case).

What happens

HTML does get built, but image file and css files fail to get copied to site_product. If I manually copy the css and image files to the output dir then the produced/served page renders as expected

Environment:

• Ubuntu 20.04.2 LTS
• Eleventy Version: 0.12.1

[Peter deHaan]

Assets aren't automatically copied into the output directory, you need to explicitly copy files using passthrough copy: https://www.11ty.dev/docs/copy/

[ahillio]

Thanks for the link! Does this require passthroughFileCopy: true? https://michaelsoolee.com/add-css-11ty/ says to use that, but documentation page you shared doesn't mention it.

I'm not able to get the copy to occur (w/ or w/o passthroughFileCopy:true). The only way copy occurs is if I do npx @11ty/eleventy --passthroughall

[ahillio]

I see older version of docs https://v0-7-1.11ty.dev/docs/copy/ mentions passthroughFileCopy.

[Peter deHaan]

I see older version of docs v0-7-1.11ty.dev/docs/copy mentions passthroughFileCopy.

Yeah, those docs are pretty old, so probably not useful unless you're on a similarly old build of 11ty.

npm info @11ty/eleventy@0.7.1 time | grep "0.7.1"
#  '0.7.1': '2019-01-12T03:44:39.602Z',

I think you probably want something like this (where the path is relative to your .eleventy.js config file, not your dir.input folder):

eleventyConfig.addPassthroughCopy("src/assets");

(and my copyrighted src/assets/site.css file looks like this masterpiece)

body {
  color: salmon;
}

[ahillio]

Yeah I think that's what I have:

module.exports = function(eleventyConfig) {
  // Return your Object options:
  return {
    dir: {
      input: "src",
      data: "data",
      includes: "layouts",
      output: "site_product"
    }
  };
  eleventyConfig.addPassthroughCopy("src/assets");
};

[ahillio]

That's my entire .eleventy.js file.

[Peter deHaan]

Close! the .addPassthroughCopy() needs to be before the return statement:

module.exports = function(eleventyConfig) {
+ eleventyConfig.addPassthroughCopy("src/assets");
  // Return your Object options:
  return {
    dir: {
      input: "src",
      data: "data",
      includes: "layouts",
      output: "site_product"
    }
  };
- eleventyConfig.addPassthroughCopy("src/assets");
};

[ahillio]

Ok. I'm not sure how I would have learned that by reading the docs, so thank you for pointing that out. Are there other options/functions etc that need to be in a particular order inside the .eleventy.js? Or is "return { dir: goes last" the only one?

[Peter deHaan]

Generally speaking, everything after the return statement is ignored/skipped in JavaScript, so you need to add all your code/logic first and have the return statement as the last thing in your function.

[leesei]

Ok. I'm not sure how I would have learned that by reading the docs, so thank you for pointing that out. Are there other options/functions etc that need to be in a particular order inside the .eleventy.js? Or is "return { dir: goes last" the only one?

Well, the .js extension indicates that this is a JavaScript file.
And using 11ty does require familiarity with JavaScript (the config and templates are all in JavaScript).
I would suggest you study how to program in JavaScript first, or use other static site generators that don't use programming language to configure.

[ahillio]

Thanks @pdehaan for helping!