{"id":15043283,"url":"https://github.com/brandcom/cakephp-vite","last_synced_at":"2026-02-16T10:17:46.647Z","repository":{"id":43336968,"uuid":"450270563","full_name":"brandcom/cakephp-vite","owner":"brandcom","description":"ViteHelper plugin for CakePHP and Vite JS","archived":false,"fork":false,"pushed_at":"2026-01-25T17:07:48.000Z","size":170,"stargazers_count":22,"open_issues_count":6,"forks_count":6,"subscribers_count":2,"default_branch":"cake5","last_synced_at":"2026-01-26T09:43:40.642Z","etag":null,"topics":["bundler","cakephp","devserver","es-modules","hot-module-replacement","legacy-support","php","vite","vitejs"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandcom.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-01-20T21:57:49.000Z","updated_at":"2025-08-27T04:22:48.000Z","dependencies_parsed_at":"2025-04-14T20:45:27.235Z","dependency_job_id":"7e04b5a7-4c74-4d8c-b8f5-ac88fc476aaa","html_url":"https://github.com/brandcom/cakephp-vite","commit_stats":{"total_commits":131,"total_committers":5,"mean_commits":26.2,"dds":"0.17557251908396942","last_synced_commit":"6028e07013a18c079d950ced0d256673b2e5a339"},"previous_names":["passchn/cakephp-vite"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/brandcom/cakephp-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandcom%2Fcakephp-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandcom%2Fcakephp-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandcom%2Fcakephp-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandcom%2Fcakephp-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandcom","download_url":"https://codeload.github.com/brandcom/cakephp-vite/tar.gz/refs/heads/cake5","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandcom%2Fcakephp-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29505811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bundler","cakephp","devserver","es-modules","hot-module-replacement","legacy-support","php","vite","vitejs"],"created_at":"2024-09-24T20:48:48.239Z","updated_at":"2026-02-16T10:17:46.594Z","avatar_url":"https://github.com/brandcom.png","language":"PHP","readme":"# ViteHelper plugin for CakePHP 5\n\nThe plugin provides a Helper Class for CakePHP to facilitate the use of [Vite JS](https://vitejs.dev/).\n\nWhen running the Vite dev server, the Helper provides the right script tags for hot module replacement and page\nreloading.\n\nIn production mode, the Helper loads the bundled files. `@vitejs/plugin-legacy` is supported, which will\ninsert `nomodule`-tags for older browsers, e.g. older iOS devices, which do not support js modules.\n\n\u003e This readme is for **version 1.x.** If you are migrating from 0.x and something is unclear, read the Migration guide\n\u003e under `/docs`. Feel free to open an issue if you run into problems.\n\n## Installation\n\nYou can install this plugin into your CakePHP application using [composer](https://getcomposer.org).\n\n### CakePHP Version Map\n\n| CakePHP version | Plugin Version | Branch | min. PHP Version |\n|-----------------|----------------|--------|------------------|\n| ^3.10           | /              | cake3  | ^7.4             |\n| ^4.2            | 0.x            | master | ^7.4             |\n| ^4.2            | 1.x            | master | ^8.0             |\n| ^5.0            | 2.x            | cake5  | ^8.1             |\n\nThe recommended way to install the plugin is:\n\n```shell\ncomposer require passchn/cakephp-vite\n```\n\nLoad the plugin in your Application.php:\n\n```shell\nbin/cake plugin load ViteHelper\n```\n\nLoad the Helper in your AppView.php:\n\n```php\n$this-\u003eloadHelper('ViteHelper.ViteScripts');\n```\n\n## Usage\n\nIn your php-layout, include this in your html head:\n\n```php\n\u003c?= $this-\u003efetch('css') ?\u003e\n```\n\nJust before the closing `\u003c/body\u003e` tag, insert this line:\n\n```php\n\u003c?= $this-\u003efetch('script') ?\u003e\n```\n\nThese are the default view blocks in CakePHP.\n[Lern more about view blocks in the Book](https://book.cakephp.org/4/en/views.html#using-view-blocks).\n\nIn your php-template or in layout you can import javascript files with:\n\n```php\n\u003c?php $this-\u003eViteScripts-\u003escript($options) ?\u003e\n```\n\n… or by using this shortcut for a single entrypoint:\n\n```php\n\u003c?php $this-\u003eViteScripts-\u003escript('webroot_src/main.ts') ?\u003e\n```\n\nIf you imported CSS files inside your JavaScript files, this method automatically\nappends your css tags to the css view block.\n\n\u003e If you don't have any css-entries defined in your vite-config, you can skip the `::css()` method call.\n\nIn your php-template you can import css files with:\n\n```php\n\u003c?php $this-\u003eViteScripts-\u003ecss($options) ?\u003e\n```\n\n… or by using this shortcut for a single entrypoint:\n\n```php\n\u003c?php $this-\u003eViteScripts-\u003ecss('webroot_src/style.css') ?\u003e\n```\n\n## Configuration\n\nThe plugin comes with some default configuration. You may need to change it depending on your setup. Or you might not\nneed any config at all.\n\nYou can override some of these config settings through the `$options` of the helper methods. Or you can pass\nyour own instance of `ViteHelperConfig` to a helper method as a second parameter.\n\n```php\n'ViteHelper' =\u003e [\n    'build' =\u003e [\n        'outDirectory' =\u003e false, // output directory of build assets. string (e.g. 'dist') or false.\n        'manifest' =\u003e WWW_ROOT . 'manifest.json', // absolute path to manifest\n    ],\n    'development' =\u003e [\n        'scriptEntries' =\u003e ['someFolder/myScriptEntry.ts'], // relative to project root\n        'styleEntries' =\u003e  ['someFolder/myStyleEntry.scss'], // relative to project root. Unnecessary when using css-in-js.\n        'hostNeedles' =\u003e ['.test', '.local'], // to check if the app is running locally\n        'url' =\u003e 'http://localhost:3000', // url of the vite dev server\n    ],\n    'forceProductionMode' =\u003e false, // or true to always serve build assets\n    'plugin' =\u003e false, // or string 'MyPlugin' to serve plugin build assets\n    'productionHint' =\u003e 'vprod', // can be a true-ish cookie or url-param to serve build assets without changing the forceProductionMode config\n    'viewBlocks' =\u003e [\n        'css' =\u003e 'css', // name of the css view block\n        'script' =\u003e 'script', // name of the script view block\n    ],\n],\n```\n\nYou can override the defaults in your `app.php`, `app_local.php`, or `app_vite.php`.\n\nSee the plugin's [app_vite.php](https://github.com/brandcom/cakephp-vite/blob/master/config/app_vite.php) for reference.\n\nExample:\n\n```php\nreturn [\n    'ViteHelper' =\u003e [\n        'forceProductionMode' =\u003e 1,\n        'development' =\u003e [\n            'hostNeedles' =\u003e ['.dev'], // if you don't use one of the defaults\n            'url' =\u003e 'https://192.168.0.88:3000',\n        ],\n    ],\n];\n```\n\n## Helper method usage with options\n\nYou can pass an `$options` array to override config or to completely skip the necessity to have a ViteHelper config.\n\nThe options are mostly the same for `::script()` and `::css()`.\n\n### Example\n\n```php\n$this-\u003eViteScripts-\u003escript([\n\n    // this would append both the scripts and the css to a block named 'myCustomBlock'\n    // don't forget to use the block through $this-\u003efetch('myCustomBlock')\n    'block' =\u003e 'myCustomBlock',\n    'cssBlock' =\u003e 'myCustomBlock', // for ::script() only – if you use css imports inside js.\n\n    // files that are entry files during development and that should be served during production\n    'files' =\u003e [\n        'webroot_src/main.ts',\n    ],\n\n    // \"devEntries\" is like \"files\". If you set \"files\", it will override both \"devEntries\" and \"prodFilters\"\n    'devEntries' =\u003e ['webroot_src/main.ts']\n\n    // \"prodFilter\" filters the entry files. Useful for code-splitting if you don't use dynamic imports\n    'prodFilter' =\u003e 'webroot_src/main.ts' // as string if there's only one option\n    'prodFilter' =\u003e 'main.ts' // also works - only looks for parts of the string\n    'prodFilter' =\u003e ['main.ts'] // as array - same as above with multiple files\n    'prodFilter' =\u003e function (ManifestRecord $record) { /* do something with the record and return true or false */ }\n]);\n```\n\n**Note:** You need to set `devEntries` when running the dev server. They have to either be set in the config or\nthrough the helper method. In contrast, you only need `files` or `prodFilter` if you are interested in php-side\ncode-splitting and don't use dynamic imports in js.\n\nIt depends on your project and use case how you define entries. If you don't use `prodFilter` or `files`, the plugin\nwill serve all your entry files which might just be the case you want. So don't overconfigure it ;)\n\n## Opt out of global config + Plugin development\n\nYou can use the helper methods with multiple configurations through the `$config` argument.\n\n\u003e **New in version 2.3:** You can pass a config key instead of a config instance to the helper. The default config key\n\u003e is `ViteHelper`.\n\nThis might be useful when using plugin scripts or when developing plugins:\n\n```php\n\u003c?php $this-\u003eViteScripts-\u003epluginScript('MyPlugin', devMode: true, config: 'MyPlugin.ViteConfig'); ?\u003e\n```\n\nThe example above uses a convenience method to load plugin scripts for `MyPlugin`. DevMode is enabled and the helper\nwill use a CakePHP config under the key `MyPlugin.ViteConfig`. In this way, you can scope your App's and your plugin's\nconfig.\n\nIt is assumed that the `manifest.json` is available directly in your plugin's `webroot`. If this is not the case, you\nshould define the absolute path throuh the `build.manifest` config option.\n\n## Vite JS bundler / Dev server\n\nInstall Vite e.g. via yarn:\n\n```shell\nyarn create vite\n```\n\nIt is recommended to add the legacy plugin:\n\n```shell\nyarn add -D @vitejs/plugin-legacy\n```\n\n\u003e See [Scaffolding Your First Vite Project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) on vitejs.dev\n\u003e for more information.\n\n### Configuration\n\nAfter installing, you will need to refactor the files a bit to make sense of it in a php project. The default config of\nthis plugin assumes that you put your js, ts, scss etc. in `/webroot_src`.\n\nThe build files will end up in `/webroot/assets` by default. Your `vite.config.js or *.ts` file for vite stays in the\nproject root.\n\n\u003e Wanted: Examples for vite/plugin configs and directory structures. Feel free to contribute with a PR to show how your\n\u003e project uses this plugin.\n\n#### Recommended configuration:\n\nSee the example [vite.config.ts content here](https://github.com/brandcom/cakephp-vite/wiki/example-vite-config). Note\nthat the config changes when upgrading to vite version `2.9.0` or higher.\n\nA difference to other dev servers, e.g. webpack or gulp is that you won't access your\nlocal site via the port where Vite is serving. This does not work with php.\n\nTherefore, the `server.hmr` config will enable you to use hot module replacement via the websocket protocol.\n\nThe `build` options define where the bundled js and css will end up. These need to match plugin config.\n\nMore about configuring Vite can be found at [vitejs.dev/config](https://vitejs.dev/config/).\n\n## Contributions\n\nYou can contribute to this plugin via pull requests. If you run into an error, you can open an issue.\n","funding_links":[],"categories":["Asset Management"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandcom%2Fcakephp-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandcom%2Fcakephp-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandcom%2Fcakephp-vite/lists"}