How to configure a public folder in 11ty?

[pexeixv]

I'm trying to create a public in 11ty, similar to the one we see in other frameworks.

I tried using eleventyConfig.addPassthroughCopy({ "./public/**/*": "/" }) but it takes all the files in the public directory and places them at the root of the dist folder, not obeying the folder structure.

What alteration should be done to the above line of code to make it passthrough copy all the files with the proper folder structure?

[bobmonsour]

Try this to retain the same directory structure.

eleventyConfig.addPassthroughCopy({ "./public/**/*" })

See https://www.11ty.dev/docs/copy/#configuration-api-method

[pexeixv]

eleventyConfig.addPassthroughCopy({ "./public/**/*" })
What you've suggested doesn't work simply because it's not a valid Js object.

If you meant eleventyConfig.addPassthroughCopy( "./public/**/*" ), that still doesn't meet my requirement. The folder structure is maintained, but inside a public folder in the dist. Files like .htaccess and robots.txt need to be at the root, but are appearing inside dist/public.

[bobmonsour]

This is what I have for my passthrough configuration. My robots.txt ends up in the root.

[
    { "src/assets/favicon/*": "/" },
    "src/assets/img/",
    "src/robots.txt",
  ].forEach((path) => eleventyConfig.addPassthroughCopy(path));

[pdehaan]

What version of Eleventy are you using, and which OS?

This is working as expected for me locally (Eleventy v2.0.1/latest on latest macOS Ventura 13.4) with the following configs:

// eleventy.config.js

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("public1");
  eleventyConfig.addPassthroughCopy("public2/**/*");

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

> eleventy

[11ty] Writing www/index.html from ./src/index.liquid
[11ty] Copied 12 files / Wrote 1 file in 0.03 seconds (v2.0.1)

And here's my project folder:

tree -aI node_modules
.
├── eleventy.config.js
├── package-lock.json
├── package.json
├── public1/images/logos/
│           ├── logo-1.webp
│           ├── logo-2.webp
│           ├── logo-3.webp
│           ├── logo-4.webp
│           ├── logo-5.webp
│           ├── logo-6.webp
│           ├── logo-7.webp
│           ├── logo-8.webp
│           └── logo-9.webp
├── public2/favicons/site/
│           ├── favicon-32.png
│           ├── favicon-64.png
│           └── favicon-96.png
└── src/index.liquid

And the built output folder looks like:

└── www/
    ├── index.html
    ├── public1/images/logos/
    │           ├── logo-1.webp
    │           ├── logo-2.webp
    │           ├── logo-3.webp
    │           ├── logo-4.webp
    │           ├── logo-5.webp
    │           ├── logo-6.webp
    │           ├── logo-7.webp
    │           ├── logo-8.webp
    │           └── logo-9.webp
    └── public2/favicons/site/
                ├── favicon-32.png
                ├── favicon-64.png
                └── favicon-96.png

14 directories, 29 files

Note that neither the public1/ or public2/ folders get flattened and retain their original folder nesting.