CakePHP-Vite-Plugin

Package description

---

Features

• Easy Mapping of assets (build / resourced) with application
• Live Reload
• DDEV supports

Installation

You can install this plugin directly from GitHub using Composer:

1. Add the GitHub repository to your app's composer.json:

   {
     ...
     "repositories": [
         {
             "type": "vcs",
             "url": "https://github.com/mahankals/CakePHP-Vite-Plugin"
         }
     ],
     ...
   }

2. Add the plugin via Composer:

   composer require --dev mahankals/cakephp-vite-plugin:dev-main

3. Load the plugin

   Method 1: from terminal

   bin/cake plugin load CakePhpViteHelper

   Method 2: load in Application.php, bootstrap method

   $this->addPlugin('CakePhpViteHelper');

4. Install Node packages with Vite Configuration

   Method 1: Run with default (npm):

   bin/cake vite-helper install

   Method 2: specify package manager:

   bin/cake vite-helper install --pm=pnpm

Add Helper

Edit src/View/AppView.php

    public function initialize(): void
    {
+        $this->addHelper('CakePhpViteHelper.Vite');
    }

Create Resource (example)

Create resources/js/app.js

console.log("Welcome to CakePHP! 🎉");

Create resources/css/app.css

body {
  background-color: skyblue;
}

Use Helper

Either in templates/layout/default.php or templates/**/*.php

<?= $this->Vite->asset(['resources/js/app.js','resources/css/app.css']) ?>

Bundle Assest

Method 1: Use Vite dev server with live reload:

npm run dev

Method 2: for production:

npm run build

Extra

To get url of resource

<?= $this->Vite->url('resources/img/cake.logo.svg') ?>

Result:

1. with `npm run dev'

   https://localhost:5173/resources/img/cake.logo.svg

2. with `npm run dev'

   https:///build/assets/cake.logo-1vCAGwyb.svg

Using ddev?

Just update .ddev/config.yaml by adding

web_extra_exposed_ports:
   - name: vite
     container_port: 5173
     http_port: 5172
     https_port: 5173

Contributing

Contributions, issues, and feature requests are welcome!

Author

Atul Mahankal – [email protected]

License

This library is available as open source under the terms of the MIT License.