README

An opinionated Vite integration for CodeIgniter4 projects.

Easily manage and bundle JavaScript, TypeScript and CSS files with a Resources folder in your CodeIgniter app:

app/Resources/
├── js # your JavaScript and/or TypeScript files
├── static # static files you want to copy as is
│   ├── fonts
│   └── images
└── styles # your CSS files

🚀 Getting started
⚙️ Config reference
- Routes/Assets mapping
- Environment Variables
❤️ 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:

# using npm
npm init

# using pnpm
pnpm init

# using yarn
yarn init

*You may want to use Deno or Bun instead.

1. Setup

install codeigniter-vite using composer:

composer require yassinedoghri/codeigniter-vite

install Vite with @rollup/plugin-multi-entry:

# using npm
npm install --save-dev vite @rollup/plugin-multi-entry

# using pnpm
pnpm add -D vite @rollup/plugin-multi-entry

# using yarn
yarn add -D vite @rollup/plugin-multi-entry

copy the following vite.config.js file in the root of your CodeIgniter project:

// vite.config.js
import multi from "@rollup/plugin-multi-entry";
import path from "path";
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
  const env = Object.assign(process.env, loadEnv(mode, process.cwd()));

  return {
    root: path.resolve(__dirname, env.VITE_RESOURCES_DIR ?? "app/Resources"),
    publicDir: "./static",
    build: {
      outDir: path.resolve(
        __dirname,
        `public/${env.VITE_ASSETS_DIR ?? "assets"}`,
      ),
      assetsDir: "",
      manifest: env.VITE_MANIFEST ?? ".vite/manifest.json",
      rollupOptions: {
        input: [
          path.resolve(
            __dirname,
            `${env.VITE_RESOURCES_DIR ?? "app/Resources"}/js/**/*.{js,ts}`,
          ),
          path.resolve(
            __dirname,
            `./${env.VITE_RESOURCES_DIR ?? "app/Resources"}/styles/**/*.css`,
          ),
        ],
        external: [
          new RegExp(
            path.resolve(
              __dirname,
              `./${env.VITE_RESOURCES_DIR ?? "app/Resources"}/(js|styles)/.*(_.*[/|.js|.ts|.css]).*`,
            ),
          ),
          /node_modules/,
        ],
        preserveEntrySignatures: true,
        output: [
          {
            dir: path.resolve(
              __dirname,
              `public/${env.VITE_ASSETS_DIR ?? "assets"}`,
            ),
            preserveModules: true,
          },
        ],
      },
    },
    server: {
      host: env.VITE_SERVER_HOST ?? "localhost",
      port: env.VITE_SERVER_PORT ?? 5173,
      strictPort: true,
    },
    plugins: [multi({ preserveModules: true })],
  };
});

Add Vite's scripts to your package.json:

{
  //...
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
  //...
}

Create the Resources folder in your CodeIgniter app folder:

app/Resources/
├── js # your JavaScript and/or TypeScript files
├── static # files you want to copy as is
│   ├── fonts
│   └── images
└── styles # your CSS files

Edit your app/Config/Vite.php config file to inject your styles and scripts in your routes:

 <?php
 // app/Config/Vite.php

 declare(strict_types=1);

 namespace Config;

 use CodeIgniterVite\Config\Vite as ViteConfig;

 class Vite extends ViteConfig
 {
     public array $routesAssets = [
         [
             'routes' => ['*'],
             'assets'  => ['styles/index.css'],
         ],
     ];
 }

That's all! Your assets will get automatically linked in the <head> of your routes depending on the mapping you define.

2. Run the dev environment

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. See the config reference to change the host or port.

3. 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'],
  ]
];

Environment Variables

You can tweak the following environment variables to your liking:

VITE_ENVIRONMENT="production"

VITE_SERVER_HOST="localhost"
VITE_SERVER_PORT=5173
VITE_SERVER_ORIGIN="http://localhost:5173"

VITE_RESOURCES_DIR="app/Resources"
VITE_ASSETS_DIR="assets"
VITE_MANIFEST=".vite/manifest.json"

Note that you can use the * wildcard to match any other applicable characters in the routes.

❤️ Acknowledgments

This wouldn't have been possible without the amazing work of the CodeIgniter team.

Inspired by codeigniter-vitejs.

📜 License

Code released under the MIT License.

yassinedoghri / codeigniter-vite

Maintainers

Details