Can we have assets in a separate directory to the main html file? about rna HOT 14 CLOSED

Oops, I forgot a console.log, removed in 0.15.4.

I hadn't see before that your assets were CSS and JS files. Those files are considered chunks by esbuild, not assets. You have to set chunkNames: 'assets/[name]-[hash]' too.

from rna.

Hello @jasonwilliams! Would you give a try to the version 0.15.3 of the plugin? It should now respect the entryNames pattern for HTML entrypoints, so you can use assetNames for assets.

from rna.

public
├── 1-25MTWOSN.js
├── 1-25MTWOSN.js.map
├── 1-LCOOVKTY.css
├── 1-LCOOVKTY.css.map
└── index-8d19136e.html

The output is exactly the same, also its printing a huge array of files out when i run build. Did you leave a console.log in there?

how do i utilise assetNames to get the result I want? Do you have any docs on this? Im still unsure how i set a folder name for assets? Could you explain how to do this? The docs don't really cover this. https://github.com/chialab/rna/tree/main/packages/esbuild-plugin-html#usage

from rna.

In the main esbuild config i set assetNames: 'assets/[name]-[hash]' but this didn't help.
The output was this:

public
├── 1-LCOOVKTY.css
├── 1-LCOOVKTY.css.map
├── 1-Y53U5IJE.js
├── 1-Y53U5IJE.js.map
├── assets
└── index-8c4db01e.html

It generated an assets folder but but it was empty

When i set

{
    "entryNames": "[name]-[hash]",
    "assetNames": "assets/[name]-[hash]",
}

I get

public
├── 1.css
├── 1.css.map
├── 1.js
├── 1.js.map
├── assets (empty)
└── index.html

It looks like it bases everything off the "entryNames" not the "assetNames"

from rna.

That's perfect thanks!
Do i need assetNames then if JS and CSS are identified as chunks? What are assetNames for then in that case?

from rna.

I would definitely update the documentation as im sure this would be useful to others too. Right now it's a bit hidden knowledge

from rna.

If you use images or fonts references in the index.html entrypoint or in you CSS, you have to keep the assetNames configuration. More in general, esbuild uses the assetNames for resources that are imported with the file loader.

Thanks for your feedback, I certainly will update the usage section.

from rna.

Does this new configuration solve #35?

from rna.

Yes and this issue too thanks

from rna.

Hey @edoardocavazza sorry to bring this back up, but serve mode fails now. Do you happen to know why?

✘ [ERROR] [plugin html] Build failed with 1 error:
src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"

  This error came from the "onLoad" callback registered here:

    ../node_modules/esbuild/lib/main.js:845:22:
      845 │         let promise = setup({
          ╵                       ^

    at onTransform (file:///../node_modules/@chialab/esbuild-rna/lib/index.js:469:20)
    at setup (file:///../node_modules/@chialab/esbuild-plugin-html/dist/index.js:61:162844)
    at handlePlugins (/../node_modules/esbuild/lib/main.js:845:23)
    at Object.buildOrServe (/../node_modules/esbuild/lib/main.js:1139:7)
    at /../node_modules/esbuild/lib/main.js:2080:17
    at new Promise (<anonymous>)
    at Object.build (/../node_modules/esbuild/lib/main.js:2079:14)
    at Object.build (/../node_modules/esbuild/lib/main.js:1929:51)
    at file:///../cms/build.mjs:97:9

Error: Build failed with 1 error:
error: Build failed with 1 error:
src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"
    at failureErrorWithLog (/../node_modules/esbuild/lib/main.js:1605:15)
    at /../node_modules/esbuild/lib/main.js:1251:28
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errors: [
    {
      detail: [Error],
      location: null,
      notes: [Array],
      pluginName: 'html',
      text: 'Build failed with 1 error:\n' +
        'src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"'
    }
  ],
  warnings: []
}

That file does exist, so i don't know why it says it can't find it. My guess is it should be checking public/ui-assets/1-27BSLWHE.css instead of ui-assets/1-27BSLWHE.css but im unsure

This line looks suspicious:
src/2.js:1:7: ERROR: Could not resolve "./ui-assets/1-7YBC7F6V.js"
It looks like its not taking the serve servedir into account and running from the root, rather than the public folder

build mode works fine

from rna.

I am not sure the html plugin can even work in serve mode. Probably, the error is given by the fact you have previously build the application. If you remove the public folder and then start the server, you can see that esbuild does not generate the index.html file at all. That's because esbuild does not write anything to fs in server mode. I'll add this notice to the doc.

from rna.

I am not sure the html plugin can even work in serve mode.

That would be a shame if this didn't work in serve mode. Why do you think it wouldn't be possible? It looks like esbuild is designed to work with plugins in serve mode

If you remove the public folder and then start the server

I tried that, it made no difference sadly. Its true no index.html gets generated but the assets do. Only the index.html seems to be in memory.
I'm assuming esbuild writes things into memory, and like webpack, would give plugins some access into that? maybe its related to this evanw/esbuild#690 (comment) and evanw/esbuild#1402

from rna.

I’m going to close this in favour of #44 as the original issue here was fixed

from rna.

Hey @edoardocavazza I just noticed in watch mode (not serve), its generating new assets but the html file isn't being updated to point to the new ones. I think this may be a bug

from rna.