Docs: Add guide on copying assets during the build

[brandonroberts]

Which scope/s are relevant/related to the feature request?

Docs

Information

Vite copies everything in the public directory by default to the build output.

There is a common use case where developers want to copy assets from an external location during the build process. This plugin can do it.

https://www.npmjs.com/package/vite-plugin-static-copy

This would add a guide to the docs on copying external assets using this plugin.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[renatoaraujoc]

Hey Brandon,

viteStaticCopy is unreliable for analog(), I tried this myself.

When ssr folder kicks in by building nitro server, the contents of ./ssr/assets get overwritten or an ENOENT error gets thrown, tried this for hours, no luck, I wouldn't rely on this.

[nckirik]

@renatoaraujoc i'm using it without a problem, just disable the plugin for ssr builds.

import { Plugin } from 'vite';
import { viteStaticCopy, Target as StaticCopyTarget } from 'vite-plugin-static-copy';

/**
 * Returns an array of Vite plugins that copy assets from the specified directory to the assets folder.
 * @return {Plugin[]} An array of Vite plugins for copying assets.
 */
export function provideCopyAssetsPlugin(isSsrBuild = false, demo = false): Plugin[] | false {
  if (isSsrBuild) return false;

  const targets: StaticCopyTarget[] = [
    { src: '../../epmr-assets/layout/fonts/**', dest: 'assets/fonts', overwrite: true },
    { src: '../../epmr-assets/layout/images/**', dest: 'assets/images', overwrite: true },
    { src: '../../epmr-assets/layout/styles/**', dest: 'assets/styles', overwrite: true },
  ];
  if (demo) targets.push({ src: '../../epmr-assets/demo/**', dest: 'assets/demo', overwrite: true });

  return viteStaticCopy({ targets });
}

vite.config.ts:

export default defineConfig((options) => {
  const { command, mode, isSsrBuild, isPreview } = options;

  const analogPlugin = provideAnalogPlugin(appDir, { nitro: { preset: 'node-server' } });
  const copyAssetsPlugin = provideCopyAssetsPlugin(isSsrBuild, true);

...

  return {
    root: import.meta.dirname,
    publicDir: 'src/public',
    logLevel: 'info',
...
    plugins: [
      analogPlugin,
      copyAssetsPlugin,
      nxViteTsPaths(),
...
    ],
...

[brandonroberts]

Nx also has a plugin for copying assets

https://nx.dev/recipes/vite/configure-vite#copying-assets

import { defineConfig } from 'vite';
import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';

export default defineConfig({
  root: __dirname,
  plugins: [
    // ...
    nxCopyAssetsPlugin(['*.md']),
  ],
  // ...
});