Move index.html from src to dist folder

[alaksandarjesus]

I am learning esbuild and want to test with a simple project. I am struck on moving the src/index.html to dist/index.html

Is there any loader available that runs or moves only once, and watches for changes in html files.

[https://github.com/alaksandarjesus/esbuilder] (github link to project setup)

[hyrious]

Hey, just write a simple script or call cpy command after your build. Don't stuck yourself in one tool for all.

For example, here's my dev script that simply watchs source folder and builds everything out, which also triggers a hot-refresh in the browser, it even includes an SSR index.html output.

[leuvi]

I made a simple esbuild build demo, you can refer to this

[vzakharov-rxnt]

But it's more than simply copying. It also needs to update that HTML file to include content hashed scripts and CSS links.
How would you do that?

[Discountrobot]

@vzakharov-rxnt what you are describing not supported at the moment. #1995

[vzakharov-rxnt]

@Discountrobot I see. But I think these days building js/css is only part of the issue. Any real production use case cannot survive on this. Esbuild can build react jsx but cannot build a create react app boilerplate, that doesn't make much sense.

It would be great to see html as first class support, here on in another repo as a plugin. I don't think esbuild can make the intended impact in the world without it. I understand there are many open source CLIs that integrate esbuild under the hood, reality is such that webpack/esbuild-loader combo beats them all by at least 2x in terms of build speed. So all that effort is wasted, for now.

[Discountrobot]

@vzakharov-rxnt while i cannot speak on the behalf of the maintainers of this project, it does seem that direction is pretty clear - do bundling well and leave the rest to be sorted in plugins.

i personally disagree extending the esbuild toolchain to support features outside bundling, (like the serve feature, which should have been a plugin akin to the devServer).

Maybe you want the html templating to use pug.js, while i'd like ejs support. Or maybe you're using esbuild to bundle your Node.js backend and do not require templating at all.

The javascript community is finding itself in dependency purgatory at the moment - and if you are part of an organisation that value security aspects of your projects, you should select few chosen dependencies.

I'd recommend, as you mention, to go with one of the existing of tooling libraries like vite and webpack plugins that use esbuild in conjunction with other existing plugins.

or write the esbuild plugin required by your organization, there are already a few for html templating

[vzakharov-rxnt]

@Discountrobot My experience with 3rd party plugins/CLIs for esbuild is that they either don't work, or have some serious bugs or design issues, which make them unusable in production.

webpack/esbuild-loader and vite are the only two working options, but vite is 2x slower to build.
So while there are so many options out there, there are really no options beyond webpack/esbuild-loader.
Okay, maybe vite gets second place, because it's viable if you never used webpack and don't want to learn it.

Which clearly means a lot of wasted effort is going in this direction -- people really need it, but don't have the expertise to do it right. Eventually projects get abandoned or choose to only support certain workflows, and not support 99% of most common ones, which limits their use and impact.

Similar situation with esbuild, it's great, but doesn't support 99% of the most common workflows that all JS developers are facing. Build a react app, build another JS stack etc. I don't think there are nearly as many Node developers as there are front end devs who are suffering from 5-10min+ build times on every CI/CD cycle. And yeah, nobody has time to create their own CLI for internal use. That's just the nature of enterprise development.

[evanw]

I'm going to close this issue since this there's no more activity in this discussion, it's a non-goal for esbuild to replicate "create react app" boilerplate, and HTML entry points are already covered by #31.