Download the PHP package yassinedoghri/codeigniter-vite without Composer
On this page you can find all versions of the php package yassinedoghri/codeigniter-vite. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download yassinedoghri/codeigniter-vite
More information about yassinedoghri/codeigniter-vite
Files in yassinedoghri/codeigniter-vite
Package codeigniter-vite
Short Description An opinionated Vite integration for CodeIgniter4 projects.
License MIT
Informations about the package codeigniter-vite
Easily organize and bundle JavaScript, TypeScript, and CSS files within a
resources
folder at the root of your CodeIgniter4 project:
- 🚀 Getting started
- 0. Prerequisites
- 1. Installation
- 2. Initial setup
- 3. Working with Vite's dev server
- 📦 Bundle for production
- ⚙️ Config reference
- Routes/Assets mapping
- Vite Environment
- Other properties
- ❤️ Acknowledgments
- 📜 License
🚀 Getting started
0. Prerequisites
-
Install Node.js* with one of the following package managers:
npm
(should be included with Node install)pnpm
(recommended),yarn
- Create a
package.json
file:
1. Installation
-
Install
codeigniter-vite
using composer: - Install Vite with vite-plugin-codeigniter:
2. Initial setup
Run the following command. This command handles steps 1-4 of Manual Setup for you.
Manual Setup
[!NOTE]
You may skip this if you've used the setup command above.
-
Copy the
Vite.php
file fromvendor/yassinedoghri/codeigniter-vite/src/Config
into your project's config folder, update the namespace toConfig
and have the class extend the original class like so: -
Create your
vite.config.js
file in your project's root and add the vite-plugin-codeigniter plugin: -
Add Vite's scripts to your
package.json
: - Create the
resources
folder in the root of your project:
3. Working with Vite's dev server
-
Set Vite environment to
development
in your.env
: -
Run Vite's dev server with:
By default, the server will launch @http://localhost:5173.
- Work your magic! 🪄
[!IMPORTANT]
Add your JS/TS, and CSS files in theresources
directory and inject them into your pages by using the routes/assets mapping in yourapp/Config/Vite.php
file.
📦 Bundle for production
For production, run the build command:
This 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.
⚙️ Config reference
Routes/Assets mapping
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:
[!NOTE]
You can use the*
wildcard to match any other applicable characters in the routes.
Vite Environment
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.
Other properties
You can tweak CodeIgniterVite's config if needed:
[!IMPORTANT]
These defaults are in sync withvite-plugin-codeigniter
's defaults. If you edit these, make sure you set the same values forvite-plugin-codeigniter
's options in yourvite.config.js
file.
❤️ Acknowledgments
This wouldn't have been possible without the amazing work of the CodeIgniter team.
Inspired by codeigniter-vitejs & codeigniter4/shield.
📜 License
Code released under the MIT License.
Copyright (c) 2025-present, Yassine Doghri (@yassinedoghri).