Introduction

In our web application, we leverage Vite as the primary build tool to ensure a fast and efficient development experience. Vite offers a modern development environment with features like hot module replacement, optimized builds, and a robust plugin ecosystem, making it an ideal choice for our React-based project.

Key Features

Fast Development Server
- Instant Server Start: Vite starts the development server quickly, even for large projects.
- Hot Module Replacement (HMR): Enables real-time updates without full page reloads.
Plugin Ecosystem
- React Support: Utilizes @vitejs/plugin-react-swc for seamless React integration.
- Routing: Integrates @tanstack/router-plugin for advanced routing capabilities.
- Virtualization: Implements custom plugins like reactVirtualized for performance optimization.
Optimized Build
- Dependency Pre-Bundling: Speeds up build times by pre-bundling dependencies.
- Code Splitting: Automatically splits code for better performance.
Environment Variables
- dotenv Integration: Manages environment variables with different configurations for development and production.
- Secure HTTPS Setup: Configures HTTPS with environment-specific certificates.

Usage Instructions

Installation

To set up the project, install the necessary dependencies using npm or yarn:

npm install

yarn install

Development

Start the development server with hot module replacement:

npm run dev

package.json script:

"scripts": {
  "dev": "NODE_ENV=development vite --mode development",
  // other scripts...
}

Building for Production

Build the application for production deployment:

npm run build

package.json script:

"scripts": {
  "build": "vite build",
  // other scripts...
}

Previewing the Production Build

Preview the production build locally:

npm run preview

package.json script:

"scripts": {
  "preview": "vite --mode production",
  // other scripts...
}

Vite Configuration Details

`vite.config.ts`

Our Vite configuration is defined in vite.config.ts, which sets up plugins, aliases, server settings, and build options.

import react from "@vitejs/plugin-react-swc";
import path from "path";
import { defineConfig } from "vite";
import os from "os";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import dotenv from "dotenv";
import { reactVirtualized } from "./vite-plugins/reactVirtualized";
 
const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
dotenv.config();
 
const isMac = os.platform() === "darwin";
const certPath = isMac
  ? path.resolve(__dirname, "localhost+3.pem")
  : path.resolve(__dirname, "cert.pem");
const keyPath = isMac
  ? path.resolve(__dirname, "localhost+3-key.pem")
  : path.resolve(__dirname, "key.pem");
 
export default defineConfig(({ mode }) => {
  const inProduction = mode === "production";
  if (inProduction === false) {
    dotenv.config({ path: `.env.development.local`, override: true });
  } else {
    dotenv.config({ override: true });
  }
 
  return {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src/"),
        "@components": path.resolve(
          __dirname,
          "./../../packages/pol-reactjs-components/src/"
        ),
        "@pol-one-pages": path.resolve(
          __dirname,
          "./../../packages/pol-one-pages/src"
        ),
      },
    },
    plugins: [
      react({ tsDecorators: true }),
      reactVirtualized(),
      TanStackRouterVite(),
    ],
    optimizeDeps: {
      exclude: [".vite"],
    },
    envDir: "./",
    envPrefix: "WITH",
    assetsInclude: ["**/*.TTF"],
    server: {
      host: true,
      watch: {
        usePolling: true,
      },
      https: inProduction ? { key: keyPath, cert: certPath } : undefined,
    },
    build: {
      outDir: "build",
      sourcemap: !inProduction,
    },
    define: {
      "process.env": JSON.stringify(process.env),
    },
  };
});

Key Configuration Points:

Plugins:
- @vitejs/plugin-react-swc: Integrates React with Vite using SWC for faster builds.
- @tanstack/router-plugin/vite: Adds advanced routing capabilities.
- reactVirtualized: Custom plugin for optimizing rendering of large lists.
Aliases:
- Simplifies import paths using aliases like @, @components, and @pol-one-pages.
Server Settings:
- Configures HTTPS with environment-specific certificates.
- Enables polling for file watching to support different environments.
Build Settings:
- Outputs build files to the build directory.
- Generates source maps in development mode for easier debugging.

Deployment Details

Our deployment process is streamlined using Vite’s optimized build and server configurations.

Environment Variables:
- Managed using dotenv, with separate files for development and production.
- Ensures sensitive information is securely handled.
HTTPS Configuration:
- Automatically selects the appropriate certificate based on the operating system.
- Enhances security for both development and production environments.
Build Optimization:
- Vite optimizes dependencies and performs code splitting to enhance performance.
- The build output is directed to the build directory, ready for deployment.

Resources

Conclusion

By integrating Vite into our web application, we achieve a highly efficient development workflow and optimized production builds. Vite’s modern features, combined with our custom configurations and plugins, empower our team to build scalable and performant React applications with ease.

Additional Information

For more details on our configuration and usage, refer to the following files in our repository:

Feel free to explore and contribute to enhance our development setup!

Vercel Mobile App