esbuild build does not bundle the public directory

Question

I decided to use esbuild to bundle my express API. So far all is good, except that the public directory which holds the swagger UI is not being bundled with the rest of the application. I have an endpoint defined as a static route which serves that folder.

app.use(express.static(`${root}/public`));

To overcome this problem I have tried multiple things, such as manually copying the public directory to the build dir location. That did not seem to work. I have also tried with the plugin esbuild-plugin-public-directory, which did not work either.

Then I added the public/index.html to the entryPoints configuration, which did not work either.

My question now is, what am I doing wrong? I don't seem to find anything particularly useful over the internet to help me overcome this problem.

This is the esbuild config which I am currently using.

const publicDir = require("esbuild-plugin-public-directory");

const OUTDIR = "build";

const envPlugin = {
    name: "env",
    setup(build) {
        // Intercept import paths called "env" so esbuild doesn't attempt
        // to map them to a file system location. Tag them with the "env-ns"
        // namespace to reserve them for this plugin.
        build.onResolve({ filter: /^env$/ }, (args) => ({
            path: args.path,
            namespace: "env-ns",
        }));

        // Load paths tagged with the "env-ns" namespace and behave as if
        // they point to a JSON file containing the environment variables.
        build.onLoad({ filter: /.*/, namespace: "env-ns" }, () => ({
            contents: JSON.stringify(process.env),
            loader: "json",
        }));
    },
};

require("esbuild")
    .build({
        entryPoints: ["server/start.ts", "public/index.html"],
        platform: "node",
        bundle: true,
        minify: false,
        platform: "node",
        logLevel: "info",
        sourcemap: false,
        target: "node12",
        loader: {
            '.html': 'text',
        },
        outdir: "build",
        plugins: [envPlugin, publicDir()],
    })
    .then(() => {
        fs.copyFileSync("server/common/api.yml", `${OUTDIR}/api.yml`);
        console.log(`Successfully built, output directed to the ${OUTDIR} directory`);
    })
    .catch(() => process.exit(1));

I found an unholy solution where I add all `.html` files to the entryPoints array which seems to get the job done. — Terchila Marian, Oct 05 '22 at 19:44
The solution above still relies on the `public` directory which sits on the root directory. — Terchila Marian, Oct 10 '22 at 10:48

score 1 · Answer 1 · answered Sep 23 '22 at 14:00

I tried it out if using @fastify/swagger. Just put @fastify/swagger in esbuild build.external

buid({external: ["esnext", "@fastify/swagger"],})

Otherwise maybe put swagger-ui-dist. Reference: https://docs.devland.is/repository/openapi#configuring-swaggerui-dependencies-for-esbuild

score 0 · Answer 2 · answered Jun 08 '23 at 20:02

Just add both @fastify/swagger and @fastify/swagger-ui to external:

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: ["src/app.ts"],
  platform: "node",
  bundle: true,
  minify: true,
  outfile: "built/index.js",
  external: ["@fastify/swagger", "@fastify/swagger-ui"],
});

esbuild build does not bundle the public directory

2 Answers2