Recientemente comencé a trabajar con vite en un par de proyectos pequeños y lo encontré muy interesante, sin embargo, obtuve un bloqueador una vez que intenté trabajar en el proyecto acoplado ExpressJS + Svelte.
Usualmente uso Express como BFF (Backend For Frontend) cuando se trata de trabajar en proyectos bastante más serios, ya que me permite optar por cookies HTTPOnly, así como también como puerta de enlace proxy para el frontend. Sin embargo, para el desarrollo (especialmente cuando se trata de oauth2) es difícil desarrollar el spa separado del servidor, por lo que lo que suelo hacer con webpack es activar la opción WriteToDisk para devserver, lo que me permite tener mi compilación de desarrollo en la carpeta dist.
El ejemplo con el paquete web será algo así como la configuración del paquete web a continuación para la interfaz:
module.exports = { devServer: { devMiddleware: { writeToDisk: true, }, }, //... }y luego en el servidor básicamente representando el dist como carpeta estática:
app.get( "*", (req, res, next) => { if (req.session.isAuth) return next(); else return res.redirect(staticURL); }, (req, res) => { return res.sendFile(staticProxyPage()); } );No puedo encontrar en la documentación de vite ninguna API para hacer algo como esto, ¿alguien tiene alguna experiencia con tales casos?
si es posible con la ayuda de complementos, ¿puede proporcionar referencias al complemento o registros de desarrollo del mismo?
Muchas gracias :)
Aquí hay un complemento de ejemplo que pude hackear juntos. Es posible que deba modificarlo para adaptarlo a sus necesidades:
// 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}); }, async handleHotUpdate({file, server: {config}, 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()); } }, }); En resumen, copia el contenido de publicDir (public) a outDir (dist).
Lo único que falta es la capacidad de ver la carpeta pública y copiar cualquier cambio en la carpeta dist nuevamente. También volverá a escribir el archivo si cambia alguno de los archivos dentro de la carpeta public .
Nota : el uso de fs.cp se basa en una API experimental del nodo 16.
Siéntase libre de modificar a su gusto. Sería bueno poder especificar archivos globs para incluir/excluir, etc.