React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default tseslint.config({
    languageOptions: {
        // other options...
        parserOptions: {
            project: ['./tsconfig.node.json', './tsconfig.app.json'],
            tsconfigRootDir: import.meta.dirname,
        },
    },
});

• Replace tseslint.configs.recommended to tseslint.configs.recommendedTypeChecked or tseslint.configs.strictTypeChecked
• Optionally add ...tseslint.configs.stylisticTypeChecked
• Install eslint-plugin-react and update the config:

// eslint.config.js
import react from 'eslint-plugin-react';

export default tseslint.config({
    // Set the react version
    settings: { react: { version: '18.2' } },
    plugins: {
        // Add the react plugin
        react,
    },
    rules: {
        // other rules...
        // Enable its recommended rules
        ...react.configs.recommended.rules,
        ...react.configs['jsx-runtime'].rules,
    },
});

Building the Local Server and Bundle

To build the local server and bundle the project, follow these steps:

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Build the project for production:

   npm run build

4. Preview the production build:

   npm run preview

HUE component

Geico Hue components package is hosted in Azure Artifacts and when you are installing, it’s searching in the public NPM registry. You will need to include a .npmrc file in your project that will point your search to our internal registry. Here’s info about setting up an .npmrc file (https://geico.visualstudio.com/Digital%20Experience/_artifacts/feed/DigitalExperience/connect)

Lint and prettify

1. Install the Prettier Extension

   • Open VS Code.
   • Go to the Extensions Marketplace (Ctrl+Shift+X or Cmd+Shift+X on macOS).
   • Search for Prettier - Code formatter and install it.

2. Configure VS Code Settings

   You need to configure VS Code to format files with Prettier on save.

   • Open the Settings JSON File:
     • Press Ctrl+, (or Cmd+, on macOS) to open the Settings UI.
     • Click the icon in the top-right corner ({}) to open settings.json.
   • Add the Following Settings:

   {
       "editor.formatOnSave": true, // Enable formatting on save
       "editor.defaultFormatter": "esbenp.prettier-vscode", // Set Prettier as the default formatter
       "[javascript]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode" // Specific to JavaScript
       },
       "[typescript]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode" // Specific to TypeScript
       },
       "[json]": {
           "editor.defaultFormatter": "esbenp.prettier-vscode" // Specific to JSON
       }
   }

   • editor.formatOnSave: Ensures files are formatted whenever you save.
   • editor.defaultFormatter: Sets Prettier as the default formatter for the supported languages.

3. Prettier Configuration in Project

   To customize Prettier settings for your project, create a .prettierrc file in the root of your project:

   Example .prettierrc:

   {
       "semi": true,
       "singleQuote": true,
       "trailingComma": "es5"
   }

   You can also use .prettierrc.json, .prettierrc.js, or .prettierrc.yaml based on your preferences.