Write to disk option for Vite

Question

recently I have started working with vite on a couple of small projects and found it very interesting, however got a blocker once tried to work on ExpressJS + Svelte coupled project.

I usually use Express as BFF (Backend For Frontend) when it comes to working on rather more serious projects since it allows me to go for HTTPOnly cookies as well as proxy gateway for the frontend. However for development (specially when it comes to oauth2) it is hard to develop the spa separated form the server so what I usually do with webpack is activating the WriteToDisk option for devserver which then allows me to have my development build in the dist folder.

Example with webpack will be something like the webpack config below for the frontend:

    module.exports = {
        devServer: {
            devMiddleware: {
                writeToDisk: true,
            },
        },
        //...
    }

and then on the server basically rendering the dist as static folder:

    app.get(
      "*",
      (req, res, next) => {
        if (req.session.isAuth) return next();
        else return res.redirect(staticURL);
      },
      (req, res) => {
        return res.sendFile(staticProxyPage());
      }
    );

My problem

I can not find in vite's documentation any APIs to do something like this, does anyone have any experience with such cases?

if it is possible with the help of plugins, can you please provide references to the plugin or dev logs of it?

Many Thanks :)

Answer 1

Here is an example plugin I was able to hack together. You might need to modify it to suit your needs:

// https://vitejs.dev/guide/api-plugin.html#universal-hooks=
import {type Plugin} from 'vite';
import fs from 'fs/promises';
import path from 'path';

const writeToDisk: () => Plugin = () => ({
    name: 'write-to-disk',
    apply: 'serve',
    configResolved: async config => {
        config.logger.info('Writing contents of public folder to disk', {timestamp: true});
        await fs.cp(config.publicDir, config.build.outDir, {recursive: true});
    },
    handleHotUpdate: async ({file, server: {config, ws}, read}) => {
        if (path.dirname(file).startsWith(config.publicDir)) {
            const destPath = path.join(config.build.outDir, path.relative(config.publicDir, file));
            config.logger.info(`Writing contents of ${file} to disk`, {timestamp: true});
            await fs.access(path.dirname(destPath)).catch(() => fs.mkdir(path.dirname(destPath), {recursive: true}));
            await fs.writeFile(destPath, await read());
        }
    },
});

In short, it copies the content of the publicDir (public) to the outDir (dist).

Only thing missing is the ability to watch the public folder and copy whatever changed to the dist folder again. It will also re-write the file if any of the files within the public folder changes.

Note: The use of fs.cp relies on an experimental API from node 16.

Feel free to modify as you please. Would be nice to be able to specify file globs to include/exclude, etc.