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.jsonfile:
1. Installation
-
Install
codeigniter-viteusing 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.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: -
Create your
vite.config.jsfile in your project's root and add the vite-plugin-codeigniter plugin: -
Add Vite's scripts to your
package.json: - Create the
resourcesfolder in the root of your project:
3. Working with Vite's dev server
-
Set Vite environment to
developmentin 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 theresourcesdirectory and inject them into your pages by using the routes/assets mapping in yourapp/Config/Vite.phpfile.
📦 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.jsfile.
❤️ 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).