PHPackages                             emmanuelautin/codeigniter4-vite - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. emmanuelautin/codeigniter4-vite

ActiveCodeigniter4-module[Utility & Helpers](/categories/utility)

emmanuelautin/codeigniter4-vite
===============================

Vite helper integration for CodeIgniter 4

1.0.1(3mo ago)10MITPHPPHP ^8.1

Since Apr 3Pushed 3mo agoCompare

[ Source](https://github.com/emmanuelautin/codeigniter4-vite)[ Packagist](https://packagist.org/packages/emmanuelautin/codeigniter4-vite)[ RSS](/packages/emmanuelautin-codeigniter4-vite/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (1)Versions (2)Used By (0)

CodeIgniter 4 + Vite
====================

[](#codeigniter-4--vite)

Une intégration simple de Vite dans un projet CodeIgniter 4, avec :

- le package npm **`vite-plugin-codeigniter4`**
- le package Composer **`emmanuelautin/codeigniter4-vite`**

L’objectif est d’obtenir un workflow proche de Laravel :

- **dev** : assets servis par le serveur Vite
- **prod** : assets buildés dans `public/build` avec `manifest.json`
- **PHP** : génération automatique des balises `` / `` avec `vite_tags()`

---

Ce que fait chaque package
--------------------------

[](#ce-que-fait-chaque-package)

### `vite-plugin-codeigniter4`

[](#vite-plugin-codeigniter4)

Le plugin npm s’occupe de la partie **Vite** :

- configuration du build
- support du mode dev
- génération des assets pour la prod
- intégration pensée pour fonctionner avec CodeIgniter 4

### `emmanuelautin/codeigniter4-vite`

[](#emmanuelautincodeigniter4-vite)

Le package Composer s’occupe de la partie **PHP / CodeIgniter 4** :

- détection du mode dev via `writable/vite/hot`
- lecture du `manifest.json` en production
- génération des balises HTML via `vite_tags()`

---

Installation complète depuis zéro
=================================

[](#installation-complète-depuis-zéro)

1) Créer un projet CodeIgniter 4
--------------------------------

[](#1-créer-un-projet-codeigniter-4)

Depuis votre terminal :

```
composer create-project codeigniter4/appstarter ci4-vite-demo
cd ci4-vite-demo
```

Ensuite, copiez le fichier d’environnement :

```
cp env .env
```

> Sous Windows PowerShell :

```
copy env .env
```

Vous pouvez ensuite lancer le serveur local de CodeIgniter :

```
php spark serve
```

Par défaut, votre projet sera accessible sur une URL locale du type :

```
http://localhost:8080
```

---

2) Installer le package Composer
--------------------------------

[](#2-installer-le-package-composer)

Depuis la racine du projet :

```
composer require emmanuelautin/codeigniter4-vite
```

Ce package expose un helper `vite_tags()` et une configuration `Vite`.

---

3) Installer Vite + le plugin npm
---------------------------------

[](#3-installer-vite--le-plugin-npm)

Toujours à la racine du projet :

```
npm init -y
npm install -D vite vite-plugin-codeigniter4
```

---

4) Créer l’arborescence front
-----------------------------

[](#4-créer-larborescence-front)

Créez la structure suivante :

```
ci4-vite-demo/
├─ app/
├─ public/
├─ writable/
├─ resources/
│  ├─ css/
│  │  └─ app.css
│  └─ js/
│     └─ app.js
├─ vite.config.js
├─ package.json
└─ composer.json
```

---

5) Ajouter des fichiers front minimaux
--------------------------------------

[](#5-ajouter-des-fichiers-front-minimaux)

### `resources/css/app.css`

[](#resourcescssappcss)

```
body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background: #f7f8fb;
    color: #1f2937;
}

.card {
    max-width: 720px;
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 12px;
    margin-bottom: 12px;
}
```

### `resources/js/app.js`

[](#resourcesjsappjs)

```
import '../css/app.css';

console.log('Vite + CodeIgniter 4 is running');
```

---

6) Configurer Vite
------------------

[](#6-configurer-vite)

Créez un fichier `vite.config.js` à la racine du projet.

### Exemple complet

[](#exemple-complet)

```
import { defineConfig } from 'vite';
import codeigniter4Vite from 'vite-plugin-codeigniter4';

export default defineConfig({
    plugins: [
        codeigniter4Vite({
            input: ['resources/js/app.js'],
            publicDirectory: 'public',
            buildDirectory: 'build',
            hotFile: 'writable/vite/hot',
            refresh: ['app/Views/**', 'app/Controllers/**'],
        }),
    ],
    server: {
        host: 'localhost',
        port: 5173,
        strictPort: true,
    },
});
```

### Points importants

[](#points-importants)

Le plugin gère déjà automatiquement une bonne partie de la configuration Vite :

- `base` vaut `/` en mode dev
- `base` vaut `/build/` en mode build
- `build.manifest` est forcé à `manifest.json`
- `build.outDir` est calculé à partir de `publicDirectory + buildDirectory`
- `rollupOptions.input` est alimenté à partir de l’option `input`
- le fichier hot est écrit dans `writable/vite/hot`

### Options du plugin

[](#options-du-plugin)

```
codeigniter4Vite({
    input: ['resources/js/app.js'],
    publicDirectory: 'public',
    buildDirectory: 'build',
    hotFile: 'writable/vite/hot',
    refresh: ['app/Views/**', 'app/Controllers/**'],
})
```

#### `input`

[](#input)

Obligatoire.

Doit être un tableau non vide.

Exemple :

```
input: ['resources/js/app.js']
```

Ou avec plusieurs entrées :

```
input: ['resources/js/app.js', 'resources/js/admin.js']
```

#### `publicDirectory`

[](#publicdirectory)

Dossier public racine.

Valeur par défaut :

```
'public'
```

#### `buildDirectory`

[](#builddirectory)

Sous-dossier de build dans le dossier public.

Valeur par défaut :

```
'build'
```

Avec la config par défaut, les fichiers générés iront dans :

```
public/build
```

#### `hotFile`

[](#hotfile)

Chemin du fichier hot utilisé par le package PHP pour détecter le mode développement.

Valeur par défaut :

```
'writable/vite/hot'
```

Le plugin écrit automatiquement l’URL du serveur Vite dans ce fichier au démarrage, puis le supprime à l’arrêt.

#### `refresh`

[](#refresh)

Liste facultative de fichiers ou dossiers à surveiller en plus.

Exemple :

```
refresh: ['app/Views/**', 'app/Controllers/**']
```

---

7) Ajouter les scripts npm
--------------------------

[](#7-ajouter-les-scripts-npm)

Dans `package.json`, ajoutez :

```
{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^7.0.0",
    "vite-plugin-codeigniter4": "^1.0.0"
  }
}
```

> Adaptez les versions selon celles réellement publiées.

---

8) Charger les assets dans une vue CodeIgniter
----------------------------------------------

[](#8-charger-les-assets-dans-une-vue-codeigniter)

Le package Composer fournit un helper `vite_tags()`.

Créez par exemple `app/Views/home.php` :

```
DOCTYPE html>

    CI4 + Vite

        CodeIgniter 4 + Vite
        Intégration OK

            Si vous voyez cette page stylée et que la console affiche
            Vite + CodeIgniter 4 is running, l’intégration fonctionne.

```

Ensuite, ajoutez un contrôleur simple.

### `app/Controllers/Home.php`

[](#appcontrollershomephp)

```