Getting started with NestJS, Vite, and esbuild

1

Vite

Import { defineConfig } from 'vite'; Import { VitePluginNode } from 'vite-plugin-node'; Export default defineConfig({ // ...vite configures server: { // vite server configs, for details see \[vite doc\](https://vitejs.dev/config/#server-host) port: 3000 }, plugins: [ ...VitePluginNode({ // Nodejs native Request adapter // currently this plugin support 'express', 'nest', 'koa' and 'fastify' out of box, // you can also pass a function if you are using other frameworks, see Custom Adapter section adapter: 'nest', // tell the plugin where is your project entry appPath: './src/main.ts', // Optional, default: 'viteNodeApp' // the name of named export of you app from the appPath file exportName: 'viteNodeApp', // Optional, default: 'esbuild' // The TypeScript compiler you want to use // by default this plugin is using vite default ts compiler which is esbuild // 'swc' compiler is supported to use as well for frameworks // like Nestjs (esbuild dont support 'emitDecoratorMetadata' yet) // you need to INSTALL `@swc/core` as dev dependency if you want to use swc tsCompiler: 'esbuild', }) ], optimizeDeps: { // Vite does not work well with optionnal dependencies, // mark them as ignored for now exclude: [ '@nestjs/microservices', '@nestjs/websockets', 'cache-manager', 'class-transformer', 'class-validator', 'fastify-swagger', ], }, });.

#Software Development #Web Frameworks #Developer Tools 381 social mentions

2

rollup.js

The vite build command bundles our code with Rollup and spits out highly optimized assets for our production environment. When we build our app with Vite by running the npm run build command after the entire setup, we can see the output below.

#Web Application Bundler #JS Build Tools #Front End Package Manager 44 social mentions

3

esbuild

Vite works by first dividing the modules in an application into two categories, dependencies and source code, because dependencies rarely change during development. Vite pre-bundles these dependencies using esbuild under the hood. For source code that might need transforming (CSS, JSX, etc.), Vite serves them over native ESM to the browser.

#JS Build Tools #Web Application Bundler #Project Management 121 social mentions