Vite chokes generated *.bib files in production build?

[tombreit]

Hi,

I'm generating some *.bib-files from global data js via pagination. When building via npx eleventy --serve everything works as expected: These *.bib-files end up in the output directory (here: _site/publications/bibtex/*bib).

These bib-files are plaintext files with bibliographic data and are not meant to be further processed by vite:

@article{lorenzetto_inovacao_2022,
        author = {Lorenzetto, Andrei Meneses and Brasil, B{\' a}rbara Dayana},
        journal = {International Journal of Digital Law},
        number = {1},
        year = {2022},
        month = {7},
        note = {Number: 1},
        title = {A inova{\c c}{\~ a}o digital aplicada na formula{\c c}{\~ a}o das pol{\' i}ticas p{\' u}blicas: mecanismo de participa{\c c}{\~ a}o popular e concretiza{\c c}{\~ a}o da cidadania: Digital innovation applied to public policy formulation: popular participation mechanism and citizenship achievement},
        howpublished = {https://journal.nuped.com.br/index.php/revista/article/view/lorenzetto2022},
        volume = {3},
}

But in a production build via npx eleventy, it seems these *.bib-files get rendered by eleventy, but somehow got choked/missed/deleted by vite afterwards...:

via npx eleventy --serve

[11ty] Writing _site/index.html from ./src/index.md (njk)
[11ty] Writing _site/publications/index.html from ./src/publications/index.md (njk)
...
[11ty] Writing _site/publications/bibtex/aponte_crowdfunding_2020.bib from ./src/publications/bibtex.njk
[11ty] Writing _site/publications/bibtex/nagarathna_cybercrime_2020.bib from ./src/publications/bibtex.njk
[11ty] Benchmark     83ms  22%     1× (Data) `./src/_data/bibtex.js`
[11ty] Benchmark    164ms  44%     1× (Data) `./src/_data/publications.js`
[11ty] Copied 10 files / Wrote 21 files in 0.33 seconds (15.7ms each, v2.0.0-canary.35)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

==>

_site/
├── assets
│   ├── app.js
│   ├── app.scss
├── index.html
└── publications
    ├── bibtex
    │   ├── aponte_crowdfunding_2020.bib
    │   ├── arafa_arqueologia_2020.bib
    │   ├── ...
    │   ├── stringhini_asistencia_2020.bib
    │   └── violada_colisao_2020.bib
    └── index.html

via npx eleventy

...
[11ty] Writing _site/publications/index.html from ./src/publications/index.md (njk)
[11ty] Writing _site/index.html from ./src/index.md (njk)
[11ty] Writing _site/publications/bibtex/kobus_educacao_2021.bib from ./src/publications/bibtex.njk
[11ty] Writing _site/publications/bibtex/lorenzetto_inovacao_2022.bib from ./src/publications/bibtex.njk
...
[11ty] Writing _site/publications/bibtex/nagarathna_cybercrime_2020.bib from ./src/publications/bibtex.njk
vite v4.1.1 building for production...
✓ 11 modules transformed.
../_site/index.html                                                    8.10 kB
../_site/publications/index.html                                      40.46 kB
../_site/assets/app-1033ec98.css                                      24.60 kB │ gzip: 11.06 kB
../_site/assets/app-1c6be869.js                                        1.41 kB │ gzip:  0.74 kB
[11ty] Benchmark     85ms  10%     1× (Data) `./src/_data/bibtex.js`
[11ty] Copied 10 files / Wrote 21 files in 0.76 seconds (36.2ms each, v2.0.0-beta.3)

==>

_site/
├── assets
│   ├── app-1033ec98.css
│   └── app-1c6be869.js
├── index.html
└── publications
    └── index.html

If I disable eleventy-plugin-vite or generate these files as *.html (instead of *.bib) everything works as expected.

What am I doing wrong or how do I keep my generated .bib files in a production build?

Versions

npm list
├── @11ty/[email protected]
├── @11ty/[email protected]
├── @11ty/[email protected]
├── @citation-js/[email protected]
└──  [email protected]

[zachleat]

I believe this is a vite thing. Can you generate them inside of public/** instead? https://vitejs.dev/guide/assets.html#the-public-directory

[tombreit]

Sorry, I do not know how to to that... How should/would I reference this vite public dir?

Currently I build these files via

---
pagination:
  data: bibtex
  size: 1
  alias: bibtex
permalink: "publications/bibtex/{{ bibtex.bibtexLabel }}.bib"
layout: "layouts/bibtex.njk"
---

{{ bibtex.bibtexItem | safe }}

I've found a promising vite config option: https://vitejs.dev/config/shared-options.html#assetsinclude

  eleventyConfig.addPlugin(EleventyVitePlugin, {
    viteOptions: {
      assetsInclude: ['**/*.bib'],
    }
  });

...but this did not resolve my issue....

[tombreit]

Perhaps related: eleventy-plugin-vite seems to choke every static asset which is mentioned in a addPassthroughCopy statement and not handled by vite, like a PDF file:

├── assets
│   ├── app.js
│   └── app.scss
├── downloads
│   └── myfile.pdf
├── eleventy.config.js
└── src
    ├── _includes
    │   └── layout.njk
    └── index.md

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

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(EleventyVitePlugin);
  eleventyConfig.addPassthroughCopy('assets');
  eleventyConfig.addPassthroughCopy('downloads');

  return {
    dir: {
      input: "src",
      output: "_site"
    },
  }
}

❌ Build via npx eleventy or npx eleventy --watch, got

#  _site generated via `npx eleventy`
_site/
├── assets
│   ├── index.74d94aed.css
│   └── index.b2fff5ad.js
└── index.html

✅ ...but expected (and strangely I get the desired result with the --serve option):

# _site generated via `npx eleventy --serve`
_site/
├── assets
│   ├── app.js
│   ├── app.scss
│   ├── index.74d94aed.css
│   └── index.b2fff5ad.js
├── downloads
│   └── myfile.pdf
└── index.html

Am I doing something completely wrong? Thanks in advance for any hints.

I've put together a minimal eleventy project for this setup: https://github.com/tombreit/eleventy-vite-minimal/tree/vite-and-pdfs

[yellowled]

@tombreit So if you have a public folder on the same level in your repository as your src, vite will serve files in that folder as if they were in your site's root in development and copy them to the root level of your _site in production. For instance:

public/
|-- test.txt
src/
|-- [usual 11ty stuff here

and running eleventy --serve (using vite) should serve http://localhost:8080/test.txt while running eleventy should copy public/test.txt to _site/test.txt. (I'm trying to figure out the same thing as you, this is as far as I got.)

Can you generate them inside of public/** instead?

@zachleat Do mean generate them from src/ to public/, where vite would “pick them up” and copy them to _site/? [insert short break to read the fantastic 11ty docs] Ooooooh, I think I got you – I was not aware that we can “override” the output directory, i.e. set permalink to a different directory than _site.

So for instance I have a src/robots.txt.njk with permalink: robots.txt which currently generates _site/robots.txt. With

---
permalink: "public/robots.txt"
permalinkBypassOutputDir: true
---

that files is generated at public/robots.txt, it is served at http://localhost:8080/robots.txt in development and … sadly not copied to _site/robots.txt in a production build, which seems to be expected in hindsight because it is created during said build. 😞

I seem to be missing something here …?

[freddyheppell]

I had a similar problem with PDF files. I've managed to get it to work by having this folder structure

public/
    myfile.pdf
    favicon.ico
    ...
src/
    index.njk
    ...

and then passthrough-copying public:

eleventyConfig.addPassthroughCopy("public");

This then gives the output of:

_site/
    index.html
    myfile.pdf
    favicon.ico

The passthrough copying is necessary, it doesn't work if you just put public inside src.

For things such as sitemaps and feeds, I was able to get them to work by leaving them in src with a permalink like /public/sitemap.xml.