Vite Plugin CodeIgniter

https://github.com/yassinedoghri/vite-plugin-codeigniter
Admin
A Vite plugin that configures CodeIgniter 4 applications with support for asset management, image...
Tokens:3,595
Snippets:33
Trust Score:9.1
License:MIT
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install vite-plugin-codeigniter with npm, pnpm, or yarn

Source: https://github.com/yassinedoghri/vite-plugin-codeigniter/blob/main/README.md

Instructions for installing the vite-plugin-codeigniter package using popular Node.js package managers: npm, pnpm, and yarn. This is the first step to integrate the plugin into your project.

```bash
npm install --save-dev vite-plugin-codeigniter

pnpm add --save-dev vite-plugin-codeigniter

yarn add --dev vite-plugin-codeigniter
```

--------------------------------

### Complete Production Setup for Vite with CodeIgniter

Source: https://context7.com/yassinedoghri/vite-plugin-codeigniter/llms.txt

Provides a comprehensive Vite configuration for a production CodeIgniter 4 application using vite-plugin-codeigniter. It showcases various options like custom directory mappings, manifest generation, and responsive image variants.

```javascript
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

export default defineConfig({
  plugins: [
    codeigniter({
      publicDir: "public",
      assetsDir: "assets",
      resourcesDir: "resources",
      jsDir: "js",
      stylesDir: "styles",
      staticDir: "static",
      manifest: ".vite/manifest.json",
      emptyAssetsDir: true,
      imageVariants: [
        {
          src: "images/**/*.{jpg,jpeg,png}",
          sizes: {
            "%NAME%-sm.webp": 480,
            "%NAME%-md.webp": 960,
            "%NAME%-lg.webp": 1920,
          },
        },
      ],
    }),
  ],
});

// Expected project structure:
// codeigniter-project/
// 	├── app/                    (CodeIgniter app directory)
// 	├── resources/
// 	│   ├── js/
// 	│   │   ├── app.ts          → public/assets/js/app.js
// 	│   │   └── admin.ts        → public/assets/js/admin.js
// 	│   ├── styles/
// 	│   │   ├── main.css        → public/assets/styles/main.css
// 	│   │   └── admin.css       → public/assets/styles/admin.css
// 	│   └── static/
// 	│       ├── fonts/          → public/assets/fonts/
// 	│       └── images/         → public/assets/images/
// 	├── public/
// 	│   ├── assets/             (compiled output)
// 	│   │   ├── .vite/
// 	│   │   │   └── manifest.json
// 	│   │   ├── js/
// 	│   │   ├── styles/
// 	│   │   ├── fonts/
// 	│   │   └── images/
// 	│   └── index.php
// 	├── vite.config.js
// 	└── package.json
```

--------------------------------

### Configure Vite with vite-plugin-codeigniter

Source: https://github.com/yassinedoghri/vite-plugin-codeigniter/blob/main/README.md

Demonstrates how to import and use the codeigniter plugin within your vite.config.js file. This setup enables Vite to work seamlessly with CodeIgniter4's structure.

```javascript
// vite.config.js
import codeigniter from "vite-plugin-codeigniter";

export default {
  plugins: [codeigniter()],
};
```

--------------------------------

### Configure Vite with CodeIgniter (Image Variants)

Source: https://context7.com/yassinedoghri/vite-plugin-codeigniter/llms.txt

Enables automatic generation of responsive image variants during the build process using the Sharp library. This configuration specifies source image glob patterns and desired output sizes for different variants.

```javascript
// vite.config.js
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

export default defineConfig({
  plugins: [
    codeigniter({
      imageVariants: [
        {
          // Glob pattern for source images (relative to static directory)
          src: "images/**/*.{jpg,png,webp}",

          // Output variants: filename -> width in pixels
          // Use %NAME% placeholder for original filename with path
          sizes: {
            "%NAME%-small.webp": 320,    // e.g., images/hero-small.webp
            "%NAME%-medium.webp": 768,   // e.g., images/hero-medium.webp
            "%NAME%-large.webp": 1200,   // e.g., images/hero-large.webp
          },
        },
        {
          // Generate thumbnails for product images
          src: "products/*.jpg",
          sizes: {
            "%NAME%-thumb.jpg": 150,
            "%NAME%-card.jpg": 400,
          },
        },
      ],
    }),
  ],
});

// Build output:
// Generating image variants…
// /project/public/assets/images/hero.jpg
// + hero-small.webp
// + hero-medium.webp
// + hero-large.webp
```

--------------------------------

### Configure Vite with CodeIgniter (Basic)

Source: https://context7.com/yassinedoghri/vite-plugin-codeigniter/llms.txt

Configures the Vite plugin for CodeIgniter integration using default settings. This involves importing the plugin and including it in the Vite configuration.

```javascript
// vite.config.js
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

// Basic usage with defaults
export default defineConfig({
  plugins: [codeigniter()],
});

// Default configuration values:
// - publicDir: "public"
// - assetsDir: "assets"
// - resourcesDir: "resources"
// - jsDir: "js"
// - stylesDir: "styles"
// - staticDir: "static"
// - manifest: ".vite/manifest.json"
// - emptyAssetsDir: true
// - imageVariants: []
```

--------------------------------

### Configure Vite with CodeIgniter (Custom Directories)

Source: https://context7.com/yassinedoghri/vite-plugin-codeigniter/llms.txt

Customizes directory paths for Vite-plugin-codeigniter when a non-standard CodeIgniter project structure is used. This allows specifying custom locations for public, assets, resources, JS, styles, and static files.

```javascript
// vite.config.js
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

export default defineConfig({
  plugins: [
    codeigniter({
      // CodeIgniter's public directory
      publicDir: "public_html",

      // Output directory for compiled assets (inside publicDir)
      assetsDir: "build",

      // Source files directory
      resourcesDir: "frontend",

      // JavaScript/TypeScript subdirectory (inside resourcesDir)
      jsDir: "scripts",

      // CSS subdirectory (inside resourcesDir)
      stylesDir: "css",

      // Static files subdirectory (copied as-is)
      staticDir: "static",

      // Manifest file path (inside publicDir)
      manifest: ".vite/manifest.json",

      // Clear assets directory before each build
      emptyAssetsDir: true,
    }),
  ],
});

// Expected directory structure with above config:
// project/
// ├── frontend/
// │   ├── scripts/
// │   │   └── app.ts
// │   ├── css/
// │   │   └── main.css
// │   └── static/
// │       └── images/
// │           └── logo.png
// └── public_html/
//     └── build/        (output directory)
```

--------------------------------

### TypeScript Interface for vite-plugin-codeigniter Options

Source: https://github.com/yassinedoghri/vite-plugin-codeigniter/blob/main/README.md

Defines the TypeScript interface for configuring vite-plugin-codeigniter. It outlines various options such as managing asset directories, source file locations, and manifest paths.

```typescript
interface Options {
  /**
   * Empty public assets directory before building.
   * @default true
   */
  emptyAssetsDir?: boolean;

  /**
   * CodeIgniter's public directory.
   * @default "public"
   */
  publicDir?: string;

  /**
   * The public subdirectory where compiled assets should be written.
   * @default "assets"
   */
  assetsDir?: string;

  /**
   * The directory in which source files live.
   * @default "resources"
   */
  resourcesDir?: string;

  /**
   * The resources subdirectory where JavaScript/TypeScript files live.
   * @default "js"
   */
  jsDir?: string;

  /**
   * The resources subdirectory where CSS files live.
   * @default "styles"
   */
  stylesDir?: string;

  /**
   * The resources subdirectory where static files live. Static files are copied as is in the public's assets folder.
   * @default "static"
   */
  staticDir?: string;

  /**
   * The path to vite's manifest file inside the public directory.
   * @default ".vite/manifest.json"
   */
  manifest?: string;

  /**
   * Define image variants to be generated based on your static images.
   * @default []
   */
  imageVariants?: ImageVariant[];
}

interface ImageVariant {
  src: string; // A glob pattern inside the static directory.
  sizes: Record<
    string, // File name of the variant with extension. You may include %NAME% directive to be replaced with the original filename.
    number // The width of the image. The variant image preserves the same ratio as the original.
  >;
}
```

--------------------------------

### Exclude Files with Underscore Prefix in Vite

Source: https://context7.com/yassinedoghri/vite-plugin-codeigniter/llms.txt

Demonstrates how vite-plugin-codeigniter automatically excludes files and folders prefixed with an underscore from the build process. This is useful for organizing partials, mixins, or work-in-progress code.

```javascript
import { defineConfig } from "vite";
import codeigniter from "vite-plugin-codeigniter";

export default defineConfig({
  plugins: [codeigniter()],
});

// Directory structure:
// resources/
// 	├── js/
// 	│   ├── app.ts          ✓ Compiled
// 	│   ├── utils.ts         ✓ Compiled
// 	│   ├── _helpers.ts      ✗ Excluded (underscore prefix)
// 	│   └── _draft/          ✗ Excluded (underscore folder)
// 	│       └── feature.ts
// 	└── styles/
// 	    ├── main.css         ✓ Compiled
// 	    └── _variables.css   ✗ Excluded (underscore prefix)
```
Tokens:
Raw