Vite

Vite (pronounced “veet”) offers significantly faster development and build times compared to Create React App (CRA), and it also has fewer security vulnerabilities.

Using DST-NCalc for comparison after running npm audit fix:

• CRA: 2 moderate and 10 high vulnerabilites

• Vite: 0 vulnerabilites

Transitioning from CRA to Vite is relatively straightforward. Robin Wieruch has an excellent tutorial at https://www.robinwieruch.de/vite-create-react-app/. (Wieruch also wrote a great book, "The Road to React.")

The main difference between Vite and CRA is the use of .jsx files instead of .js. Other than that, React development remains largely the same.

However, note that the vite.config.js file needs slight modifications from Wieruch’s example to work with our Kubernetes setup. Here’s the configuration for VegSpec:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    open: true,
    watch: {
      usePolling: true,
    },
    host: true, // needed for the Docker Container port mapping to work
    strictPort: true,
    port: 3000,
  },
  build: {
    outDir: '/usr/src/app/build',
  },
  assetsInclude: ['**/*.xlsx'],
});