PHPackages                             yassinedoghri/codeigniter-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. yassinedoghri/codeigniter-vite

ActiveLibrary[Utility & Helpers](/categories/utility)

yassinedoghri/codeigniter-vite
==============================

An opinionated Vite integration for CodeIgniter4 projects.

v2.1.0(9mo ago)11637[1 PRs](https://github.com/yassinedoghri/codeigniter-vite/pulls)MITPHPPHP >=8.1CI passing

Since Jan 17Pushed 1w ago2 watchersCompare

[ Source](https://github.com/yassinedoghri/codeigniter-vite)[ Packagist](https://packagist.org/packages/yassinedoghri/codeigniter-vite)[ RSS](/packages/yassinedoghri-codeigniter-vite/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (4)Dependencies (9)Versions (7)Used By (0)

 [![CodeIgniter Vite logo](./src/logo.svg)](./src/logo.svg)CodeIgniter Vite 🔥⚡
===================

[](#codeigniter-vite-)

[![Latest Stable Version](https://camo.githubusercontent.com/04b289d140c7d42f6dcddbbad44883ef58d8b7fb29f530422a1189cbf50d7427/68747470733a2f2f706f7365722e707567782e6f72672f79617373696e65646f676872692f636f646569676e697465722d766974652f76)](https://packagist.org/packages/yassinedoghri/codeigniter-vite)[![Total Downloads](https://camo.githubusercontent.com/481dbe91c80789a86228287f2066a8231200a722420582223ff66bfca8dae0c5/68747470733a2f2f706f7365722e707567782e6f72672f79617373696e65646f676872692f636f646569676e697465722d766974652f646f776e6c6f616473)](https://packagist.org/packages/yassinedoghri/codeigniter-vite)[![License](https://camo.githubusercontent.com/c112d2cab358212fef112d250d38251fafaaebdbe281327aecc83f70a602b62f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f79617373696e65646f676872692f636f646569676e697465722d766974653f636f6c6f723d677265656e)](https://packagist.org/packages/yassinedoghri/codeigniter-vite)[![PHP Version Require](https://camo.githubusercontent.com/e75b133f2028e15591f49317bb09215e23a07604abe78803bde8b75b8662e514/68747470733a2f2f706f7365722e707567782e6f72672f79617373696e65646f676872692f636f646569676e697465722d766974652f726571756972652f706870)](https://packagist.org/packages/yassinedoghri/codeigniter-vite)

An opinionated [Vite](https://vite.dev/) integration for [CodeIgniter4](https://codeigniter.com/) projects,
just so that you don't have to think about it!

---

Easily organize and bundle JavaScript, TypeScript, and CSS files within a `resources` folder at the root of your CodeIgniter4 project:

```
resources/
├── js/ # your JavaScript and/or TypeScript files
├── static/ # files you want to copy as is. Eg. images, fonts, etc.
└── styles/ # your CSS files
```

---

- [🚀 Getting started](#-getting-started)
    - [0. Prerequisites](#0-prerequisites)
    - [1. Installation](#1-installation)
    - [2. Initial setup](#2-initial-setup)
    - [3. Working with Vite's dev server](#3-working-with-vites-dev-server)
- [📦 Bundle for production](#-bundle-for-production)
- [⚙️ Config reference](#%EF%B8%8F-config-reference)
    - [Routes/Assets mapping](#routesassets-mapping)
    - [Vite Environment](#vite-environment)
    - [Other properties](#other-properties)
- [❤️ Acknowledgments](#%EF%B8%8F-acknowledgments)
- [📜 License](#-license)

🚀 Getting started
-----------------

[](#-getting-started)

### 0. Prerequisites

[](#0-prerequisites)

1. Install [Node.js](https://nodejs.org/)\* with one of the following package managers:

    - `npm` (should be included with Node install)
    - `pnpm` (recommended),
    - `yarn`

    \*You may want to use [Deno](https://deno.com/) or [Bun](https://bun.sh/)instead.
2. Create a `package.json` file:

    ```
    # using npm
    npm init

    # using pnpm
    pnpm init

    # using yarn
    yarn init
    ```

### 1. Installation

[](#1-installation)

1. Install `codeigniter-vite` using composer:

    ```
    composer require yassinedoghri/codeigniter-vite
    ```
2. Install Vite with [vite-plugin-codeigniter](https://github.com/yassinedoghri/vite-plugin-codeigniter):

    ```
    # using npm
    npm install --save-dev vite vite-plugin-codeigniter

    # using pnpm
    pnpm add -D vite vite-plugin-codeigniter

    # using yarn
    yarn add -D vite vite-plugin-codeigniter
    ```

### 2. Initial setup

[](#2-initial-setup)

Run the following command. This command handles steps 1-4 of [Manual Setup](#manual-setup) for you.

```
php spark vite:setup
```

#### Manual Setup

[](#manual-setup)

Note

You may skip this if you've used the setup command above.

1. Copy the `Vite.php` file from `vendor/yassinedoghri/codeigniter-vite/src/Config` into your project's config folder, update the namespace to `Config` and have the class extend the original class like so:

    ```