Vite configuration is a standardized setup meticulously crafted to deliver consistent settings for Vite projects across the Bearded Dudes ecosystem.

To use this Vite configuration in your project, you can install it via npm or yarn:

# Using npm
npm install --save-dev @beardeddudes/vite-config

# Using yarn
yarn add --dev @beardeddudes/vite-config

Or add to your package.json:

{
  "scripts": {
    "build": "yarn vite build",
    "serve": "yarn vite serve --host"
  },
  "devDependencies": {
    "@beardeddudes/vite-config": "<version>"
  }
}

1. Check that file tsconfig.json exists in project root with similar content:

{
  "extends": "@beardeddudes/typescript-config/react.json",
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build"
  },
  "include": ["src"]
}

2. Vite handles the bundling and serving of the application. You configure it in the vite.config.ts file within your website's working directory, starting with the initial project configuration. Check that file exists in project root with similar content:

import { configureReact } from "@beardeddudes/vite-config"

export default configureReact(
  {},
  {
    analytics: {
      enableDev: true,
      gtm: process.env.APP_ENV === "staging" || !process.env.APP_ENV ? { id: "GTM-XXXX" } : undefined,
    },
    buildInfo: {
      enabled: false
    },
    graphql: {
      enabled: true
    },
    lint: {
      enabled: true,
      enableBuild: false
    },
    react: {
      svg: {
        enabled: true
      }
    }
  }
)

This configuration provides a set of common Vite settings that align with Bearded Dudes preferences. Remember that Vite is accountable for incorporating the following features into the bundle correctly:

• analytics and tracking scripts injection from various providers;
• fonts management and injection;
• graphql code and types generation;
• linting and pretty formatting;
• minification;
• PWA, web manifest, icons, etc.;
• svg icons inline injection;
• etc.

That's all and have a good coding.

Best wishes,
Bearded Dudes team!