Skip to content

Joris Vergeer

Just some software engineer with some skills

Menu
  • Home
Menu

[Vite] Copy vite build output to destination directory

Posted on February 27, 2023February 27, 2023 by joris

When vite build your bundle, it by default cleans the build output directory. If this directory happens to also be the directory where your webserver is serving the files from, then you might temporary have 404 errors being served to visitors from of your application.

Or course you can solve this with separating your building and deploy steps, or using other complicated or less complicated solutions for example using containers for your app, or have nginx or whatever server you are using switch directories where you are serving your freshly build files.

But here I propose a not-perfect-but-quite-acceptable solution to have vite build your bundle in a temporary location, and only after a successful build have it replace the files in the destination folder.

For this I use a couple of lines in vite.config.js

let copyDistFilesPlugin = {
	closeBundle() {
        var next = resolve(__dirname, 'dist_next')
        var dest = resolve(__dirname, 'dist')

        if(!fs.existsSync(next))
        {
            return
        }

        console.log(`Moving build directory ${next} to dist directory ${dest}`);

        fs.rmSync(dest, { recursive: true, force: true });
        fs.renameSync(next, dest);

        console.log(`Moved build directory ${next} to dist directory ${dest}`);
    },
}

export default {
  plugins: [
    ...
    copyDistFilesPlugin
  ],
  ...
  build: {
    outDir: resolve(__dirname, 'dist_next'),
    ...
  }
  ...
}

Here I create a small plugin for vite that uses the closeBundle hook move the build directory to the destination directory. And for it to completely work, I also have to set the outDir to the same directory as the build directory.

In reality just 4 lines of functional code. Not worth to be a full vite or rollup plugin on npm and stuff, but a nice and usefull example on how you can make use of the plugin features to bend vite to your will. It might not work in all environments, but when it works for you it might be the perfect solution for that moment.

  • javascript
  • typescript
  • vite
  • vue
  • Work

    Currently working for and owner of RetailEntertainment B.V.
    • MKB-Muziek
    • Zorgscherm
    • Zorgstand
    • [C++/QT/OpenSSL/JWT] Minimalistic implementation to create a signed JTW token.
    • [C++/QT] QFuture delay method
    • [Vite] Copy vite build output to destination directory
    • [Python][Clang] Extract variabele value from a c++ file in python
    • [ASP.net Core] Body based routing with custom MatcherPolicy
    • March 2023 (2)
    • February 2023 (1)
    • January 2023 (1)
    • July 2020 (1)
    • November 2019 (1)
    • May 2019 (1)
    • March 2019 (2)
    • DevOps
    • Programming
    • Uncategorized
    • Web

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org
    © 2023 Joris Vergeer | Powered by Minimalist Blog WordPress Theme