Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don’t require passthroughCopy for vite assets #2

Open
zachleat opened this issue Mar 18, 2022 · 6 comments
Open

Don’t require passthroughCopy for vite assets #2

zachleat opened this issue Mar 18, 2022 · 6 comments
Labels
enhancement New feature or request

Comments

@zachleat
Copy link
Member

Automatically add a bunch-o-static asset extensions to passthrough copy so that folks don’t have to do it manually. Feedback from https://twitter.com/the_ross_man/status/1504888464076120074

@zachleat zachleat added the enhancement New feature or request label Mar 18, 2022
@mattrossman
Copy link

I noticed that the Vite postprocessing step already discards unused files from the 11ty build. A (maybe silly) idea to consider is having this plugin copy the whole input directory (excluding files that 11ty already ignores) and let Vite figure out what to do with those resources.

For instance:

// .eleventy.js
const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite")

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src")
  eleventyConfig.addPlugin(EleventyVitePlugin)
  return {
    dir: {
      input: "src",
    },
  }
}

Given this config, things behave more like I'd expect from Vite. I can have an HTML template that references co-located assets for Vite to process, and files in src/public are automatically treated as static assets by Vite.

I imagine this plugin could do something like this internally, albeit with consideration for excluding eleventyConfig.ignores and stuff like _includes so that it doesn't try to copy over node_modules when using the default input directory.

@zachleat
Copy link
Member Author

zachleat commented Jul 14, 2022

Just a small note that this behavior has likely changed with https://www.11ty.dev/docs/copy/#passthrough-during-serve

Relevant: #9

@shoogstoel
Copy link

Is this still an open issue? I am currently struggling with the basis set-up of my project, because I don't want to add pass trough copies for all the assets I wanna pass to Vite. What's the best practice here?

@asbjornu
Copy link

I'm struggling with a related problem right now. Before adding the @11ty/eleventy-plugin-vite plugin, Eleventy copies the folders I've configured with addPassthroughCopy() as expected, but once I add the Vite plugin, most passthrough copy folders vanish from the output folder. I'm not well-versed enough in either Eleventy nor Vite to know how to fix this.

@KiwiKilian
Copy link
Contributor

KiwiKilian commented Jun 11, 2024

@asbjornu files that will not be touched by Vite should be in the public dir as soon as the Vite process starts. Place static assets you don't actually import/reference in your HTML/CSS/JS in a public/** dir in your input and add a addPassthrougCopy('public') to your eleventy config.

Assets that will be touched can be placed anywhere but must also have an addPassthrougCopy. For example if all your CSS/JS/Images reside within an assets directory, one would add addPassthrougCopy('assets'). Those can be referenced in the templates like this /assets/path-to-your-asset.xyz.

@asbjornu
Copy link

@KiwiKilian, yep – that fixed it. 🎉 Thanks! 🙏🏼

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants