An opinionated Vite integration for
CodeIgniter4 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-
Install Node.js* with one of the following package managers:
npm(should be included with Node install)pnpm(recommended),yarn
-
Create a
package.jsonfile:# using npm npm init # using pnpm pnpm init # using yarn yarn init
-
Install
codeigniter-viteusing composer:composer require yassinedoghri/codeigniter-vite
-
Install Vite with 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
Run the following command. This command handles steps 1-4 of Manual Setup for you.
php spark vite:setupNote
You may skip this if you've used the setup command above.
-
Copy the
Vite.phpfile fromvendor/yassinedoghri/codeigniter-vite/src/Configinto your project's config folder, update the namespace toConfigand have the class extend the original class like so:<?php // app/Config/Vite.php declare(strict_types=1); namespace Config; use CodeIgniterVite\Config\Vite as CodeIgniterViteConfig; class Vite extends CodeIgniterViteConfig { // ... }
-
Create your
vite.config.jsfile in your project's root and add the vite-plugin-codeigniter plugin:// vite.config.js import { defineConfig } from "vite"; import codeigniter from "vite-plugin-codeigniter"; export default defineConfig(() => ({ server: { port: 5173, strictPort: true, // prevents port from changing to something other than 5173 }, plugins: [codeigniter()], }));
-
Add Vite's scripts to your
package.json:{ //... "scripts": { "dev": "vite", "build": "vite build" } //... } -
Create the
resourcesfolder in the root of your 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
-
Set Vite environment to
developmentin your.env:# .env vite.environment="development"
-
Run Vite's dev server with:
# using npm npm run dev # using pnpm pnpm run dev # using yarn yarn run dev
By default, the server will launch @http://localhost:5173.
-
Work your magic! 🪄
Important
Add your JS/TS, and CSS files in the resources directory and inject them
into your pages by using the routes/assets mapping in
your app/Config/Vite.php file.
For production, run the build command:
# using npm
npm run build
# using pnpm
pnpm run build
# using yarn
yarn run buildThis will create an assets folder in your public directory including all of
your bundled css and js files + a manifest.json file under a .vite/
directory.
For assets to be injected in your routes <head>, you must define the
$routesAssets property in your app/Config/Vite.php file.
The $routesAssets property takes in an array of routes/assets mappings:
public array $routesAssets = [
[
'routes' => ['*'], // include these assets on all routes
'assets' => ['styles/index.css', 'js/main.js'],
],
[
// include the map.js file in the /map route
'routes' => ['/map'],
'assets' => ['js/map.js'],
],
[
'routes' => ['admin*'], // only include these assets in Admin routes
'assets' => ['js/admin.js'],
]
];Note
You can use the * wildcard to match any other applicable characters in the
routes.
Vite environment is set to production by default, meaning it's looking for
assets in the public/assets folder.
By setting it to development in your .env, it will instead point to Vite's
dev server.
# .env
vite.environment="development"You can tweak CodeIgniterVite's config if needed:
// app/Config/Vite.php
// ...
public string $serverOrigin = 'http://localhost:5173';
public string $resourcesDir = 'resources';
public string $assetsDir = 'assets';
public string $manifest = '.vite/manifest.json';
public string $manifestCacheName = 'vite-manifest';
// ...Important
These defaults are in sync with vite-plugin-codeigniter's defaults. If you
edit these, make sure you set the same values for
vite-plugin-codeigniter's options
in your vite.config.js file.
This wouldn't have been possible without the amazing work of the CodeIgniter team.
Inspired by codeigniter-vitejs & codeigniter4/shield.
Code released under the MIT License.
Copyright (c) 2025-present, Yassine Doghri (@yassinedoghri).