How to exclude a directory in public from build?

[gbirke]

I'm writing an image viewer application, where the images are static assets in the public/gallery directory. The content of this directory is provided externally and the bundler should not care what's in there. How can I make sure that the build step does not copy all the images in the public/gallery directory?

[plashenkov]

I have the same question.
I need to serve some files during development, but they shouldn't be copied into build. Later in production these files will be provided externally.
Have you found a solution, @gbirke?

[brendon]

Sooooo need this too :D

[dmolesUC]

ETA: Correction to below — this totally does not work on public, which is apparently included by some other mechanism regardless of module import resolution. Still working on it.

---

Using rollupOptions.external in vite.config.js seems to work for me:

build: {
  rollupOptions: {
    external: new Regexp('/gallery/.*')
  }, // ...etc.
}

Using a function, e.g. external: (id) => id.startsWith('/gallery/'), also seems to work.

That said, I'm building in Library Mode, so YMMV.

[dmolesUC]

OK, I haven't found a way to exclude a public directory from being copied, but I was able to come up with a plugin that will remove the directory after it's been copied -- in my case a dev-only CSS directory in a Vite/Vue3 library project:

// In vite.config.js

function stripDevCSS () {
  return {
    name: 'strip-dev-css',
    resolveId (source) {
      return source === 'virtual-module' ? source : null
    },
    renderStart (outputOptions, inputOptions) {
      const outDir = outputOptions.dir
      const cssDir = path.resolve(outDir, 'css')
      fs.rmdir(cssDir, { recursive: true }, () => console.log(`Deleted ${cssDir}`))
    }
  }
}

export default defineConfig({
  // ... rest of config
  plugins: [vue(), stripDevCSS()]
})

With a little work one could easily make this more general.

[Alfred-kai]

just as dmolesUC say,it is ok

[seongpil0948]

thanks, it works well

[plashenkov]

My solution is to simply not copy some directories into Docker image — in a case your code is built by Docker container.

FROM node:18.0.0-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm i
COPY vite.config.js index.html ./
COPY src/ src/
# Copy only those subfolders you need
# (or you can copy entire directory but use .dockerignore as well)
COPY public/subfolder/ public/subfolder/
RUN npx vite build

FROM caddy:2.5.0
COPY Caddyfile /etc/caddy/
COPY --from=build /app/dist/ /app/

[Alfred-kai]

I read source code of vite,find that there is no config could resolve this problem;

if (config.publicDir && fs$l.existsSync(config.publicDir)) { copyDir(config.publicDir, outDir); }
a good way to resolve it is to write a plugin to rm it

[yugasun]

@gbirke You can config publicDir: false, so vite build won't copy any files in public. Like below:

export default defineConfig({
    publicDir: false,
    // ....
}

[plashenkov]

We need publicDir functionality, we just want to exclude some subfiles / subfolders, not the entire directory.

[brendon]

Ok, here we go. I've managed to work around it by adding a middleware that serves static assets from a specific directory - and if the file doesn't exist then the request carries on to the vite server:

yarn add serve-static

vite.config.js

import generalAssets from './plugins/general_assets'

export default defineConfig({
  plugins: [
    vue(),
    generalAssets()

etc...

plugins/general_assets.js

import serveStatic from 'serve-static'

export default () => ({
  name: 'general-assets',
  configureServer(server) {
    server.middlewares.use(serveStatic('public', { index: false }))
  }
})

Now make sure in the root of your project you have a 'public' directory (or whatever you want to name it, it'll probably not be public actually but in my project I don't have a public directory so I used that name). Within that directory put the files you want to serve (but not bundle). In my case I put all my files under public/general_assets so that then I could request of the server https://myserver.test/general_assets/myfile.png.

I think it's good practice to have a further namespace (like general_assets within public) so that you don't get naming collisions with what vite wants to serve.

Hope this helps someone :)

[ssiddharth]

This was really, really helpful. Thank you!

[brendon]

Glad to hear it :)

[vedmant]

This one is the best solution so far

[StefanSchoof]

Thanks. Got it working. But took me a embarrassing long time, to notice, that I put the plugin into the build.rollupOptions.plugins ...

[makbeta]

@dmolesUC thanks for sharing your code. I ran it against Vite 4.2 and it was running a bit too early. In case anyone else comes across this thread, using a different hook (writeBundle) solved the issue for me.

function stripDevCSS () {
  return {
    name: 'strip-dev-css',
    resolveId (source) {
      return source === 'virtual-module' ? source : null
    },
    writeBundle (outputOptions, inputOptions) {
      const outDir = outputOptions.dir;
      const cssDir = path.resolve(outDir, 'css');
      fs.rm(cssDir, { recursive: true }, () => console.log(`Deleted ${cssDir}`))
    }
  }
}
export default defineConfig({
  // ... rest of config
  plugins: [vue(), stripDevCSS()]
})

[floifydaniel]

In case anyone finds it useful, I ended up just making the publicDir option conditional based on command and using rsync as part of my build command to copy everything except excluded directories.

// vite.config.ts
export default defineConfig(({ command }) => ({
  plugins: [react()],
  resolve: {
    alias: {
      src: path.resolve("./src"),
    },
  },
  publicDir: command === "serve" ? "public" : false,
}));

This allows the dev server to serve public assets but will not include them in the build. Now, use rsync to just copy public contents, excluding whatever directories you'd like:

vite build && rsync -av public/ dist --exclude dir-to-exclude --exclude another-dir-to-exclude

[lawrencemaloney]

Thanks! This saved me 20 minutes for each deployment because I didn't have to copy static image files!

[dfernandez79]

The easiest way to solve this for me was a combination of the publicDir setting mentioned by @yugasun and a conditional configuration:

export default defineConfig(({ command }) => ({
  publicDir: command === 'build' ? false : 'public',
  /* ... the rest of the config */
}));

[chrismuiruriz]

Thanks, just exactly what I needed.

[mbomb007]

Should an issue be created for this, since this is just a discussion?

[qadzek]

A quick and dirty solution is to modify the build script inside package.json, to ensure that particular directory gets removed after building. For instance:

{
  "scripts": {
    "build": "tsc && vite build && rm -r dist/gallery/"
  }
}

[PythonCircuit]

Kind of a just a hack and wouldn't work for more complex directories. Why is there no way to exclude by file extension types in a given directory is my question to the new VITE that everyone is forcing on us.