README

CodeIgniter Vite 🔥⚡

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

🚀 Getting started
📦 Bundle for production
⚙️ Config reference
❤️ 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
*You may want to use Deno or Bun instead.

Create a package.json file:

# using npm
npm init

# using pnpm
pnpm init

# using yarn
yarn init

1. Installation

Install codeigniter-vite using 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

2. Initial setup

Run the following command. This command handles steps 1-4 of Manual Setup for you.

php spark vite:setup

Manual Setup

Note

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

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:

<?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.js file 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 resources folder 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

3. Working with Vite's dev server

Set Vite environment to development in 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.

📦 Bundle for production

For production, run the build command:

# using npm
npm run build

# using pnpm
pnpm run build

# using yarn
yarn run build

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:

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

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"

Other properties

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.

❤️ 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.

yassinedoghri / codeigniter-vite

Maintainers

Details