Can we have assets in a separate directory to the main html file?

[jasonwilliams]

So my previous webpack config would generate something which looked like this. html-webpack-plugin

public
├── index.html
└── ui-assets
    ├── assets-manifest.json
    ├── main.d2fe0910b8.js
    ├── main.d2fe0910b8.js.map
    ├── vendor.67dfc8f6a1.js
    └── vendor.67dfc8f6a1.js.map

This was useful to us because we didn't want the main entry point (index.html) to be hashed. it also allowed us to serve static assets from a different place.

@chialab/esbuild-plugin-html@0.15.0 generates this:

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

We don't want the main entry point hashed, and we would like the assets (JS and css files) to be in a separate directory.

Is this possible for you to implement?

[edoardocavazza]

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.

[jasonwilliams]

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

[jasonwilliams]

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"

[edoardocavazza]

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.

[jasonwilliams]

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?

[jasonwilliams]

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

[edoardocavazza]

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.

[edoardocavazza]

Does this new configuration solve #35?

[jasonwilliams]

Yes and this issue too thanks

[jasonwilliams]

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

[edoardocavazza]

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.

[jasonwilliams]

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

[jasonwilliams]

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

[jasonwilliams]

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