Environment & Configuration Files

Environment & Configuration Files

This document outlines the key environment and configuration files in the project, explaining their purpose and specific configurations for different scenarios.

1. Environment Variables (.env Files)

Environment files store sensitive information and configurable settings for different environments (development, staging, production).

Example Files:

📜 .env.example      # Example environment variables document
📜 .env.development  # Development-specific settings
📜 .env.production   # Production-specific settings

Common Environment Variables:

VITE_MAPTILER_API_KEY="your_maptiler_api_key"
VITE_GEOSERVER_BASE_URL="$VITE_GEOSERVER_ROOT_URL/geoserver"
VITE_BACKEND_ROOT_URL="http://your-backend-root-url"

Usage in Code:

    const url = new URL(
      `${import.meta.env.VITE_GEOSERVER_BASE_URL}/${workspace}/wms?service=WMS&version=1.1.0&request=GetMap&layers=${workspace}:${layer}&bbox=${bbox ?? ""}&width=512&height=512&srs=EPSG:4326&format=geojson&CQL_FILTER=${cqlFilter ?? ""}&styles=`
    );```

---

## **2. TypeScript Configuration (`tsconfig.json` & `tsconfig.node.json`)**

### **Key Settings in `tsconfig.json`**【123†source】:
```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable", "ES2021.String"],
    "strict": true,
    "paths": {
      "@components/*": ["./src/components/*"],
      "@store/*": ["./src/store/*"],
      "@helpers/*": ["./src/core/helpers/*"]
    }
  }
}

Key Settings in tsconfig.node.json【122†source】:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler"
  },
  "include": ["vite.config.ts"]
}

Notable Configurations:

• moduleResolution: bundler – Optimized for Vite and modern JavaScript workflows.
• paths aliasing – Helps in cleaner imports, e.g., @components/Button.vue.
• strict: true – Ensures strong TypeScript type checking.

---

3. Vite Configuration (vite.config.ts)【126†source】

Vite handles the build and development server configuration.

Key Settings:

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

Notable Configurations:

• Module aliasing (@/ for src/)
• Default dev server port: 5173

---

4. PostCSS Configuration (postcss.config.js)【125†source】

Handles CSS processing and optimizations.

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

Notable Configurations:

• CSS Nesting enabled via tailwindcss/nesting
• Auto-prefixing for browser compatibility

---

5. TailwindCSS Configuration (tailwind.config.js)【124†source】

Handles TailwindCSS customizations.

export default {
  darkMode: "selector",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "rgb(var(--primary))",
        blue: {
          500: "#0C06BF"
        }
      }
    }
  }
};

Notable Configurations:

• Extended blue color palette based on #0C06BF
• Custom darkMode: selector for advanced dark mode handling

---

6. Package Management (package.json)【126†source】

Defines dependencies, scripts, and build process.

Key Scripts:

{
  "scripts": {
    "dev": "vite --mode development",
    "test": "vitest",
    "build": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  }
}

Notable Configurations:

• build runs TypeScript checks (vue-tsc) before production build.
• Testing framework: Uses Vitest for unit tests.

---

7. ESLint Configuration (.eslintrc.cjs)

Manages linting rules for TypeScript and Vue【122†source】.

Notable Configurations:

• Uses eslint-plugin-vue for Vue-specific linting.
• Uses @typescript-eslint for TypeScript static analysis.

---

Best Practices for Configuration

• Do not commit .env files to version control (use .env.example for reference).
• Use module aliases (@components, @store) to avoid long import paths.
• Keep configurations modular and extend only necessary settings.
• Document changes when modifying configs to avoid breaking builds.

For further details, refer to the official documentation of Vite, TypeScript, PostCSS, TailwindCSS, and ESLint.