1. Go to this page and download the library: Download passchn/cakephp-vite library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
passchn / cakephp-vite example snippets
$this->loadHelper('ViteHelper.ViteScripts');
<?= $this->fetch('css')
<?= $this->fetch('script')
$this->ViteScripts->script($options)
$this->ViteScripts->script('webroot_src/main.ts')
$this->ViteScripts->css($options)
$this->ViteScripts->css('webroot_src/style.css')
'ViteHelper' => [
'build' => [
'outDirectory' => false, // output directory of build assets. string (e.g. 'dist') or false.
'manifest' => WWW_ROOT . 'manifest.json', // absolute path to manifest
],
'development' => [
'scriptEntries' => ['someFolder/myScriptEntry.ts'], // relative to project root
'styleEntries' => ['someFolder/myStyleEntry.scss'], // relative to project root. Unnecessary when using css-in-js.
'hostNeedles' => ['.test', '.local'], // to check if the app is running locally
'url' => 'http://localhost:3000', // url of the vite dev server
],
'forceProductionMode' => false, // or true to always serve build assets
'plugin' => false, // or string 'MyPlugin' to serve plugin build assets
'productionHint' => 'vprod', // can be a true-ish cookie or url-param to serve build assets without changing the forceProductionMode config
'viewBlocks' => [
'css' => 'css', // name of the css view block
'script' => 'script', // name of the script view block
],
],
return [
'ViteHelper' => [
'forceProductionMode' => 1,
'development' => [
'hostNeedles' => ['.dev'], // if you don't use one of the defaults
'url' => 'https://192.168.0.88:3000',
],
],
];
$this->ViteScripts->script([
// this would append both the scripts and the css to a block named 'myCustomBlock'
// don't forget to use the block through $this->fetch('myCustomBlock')
'block' => 'myCustomBlock',
'cssBlock' => 'myCustomBlock', // for ::script() only – if you use css imports inside js.
// files that are entry files during development and that should be served during production
'files' => [
'webroot_src/main.ts',
],
// "devEntries" is like "files". If you set "files", it will override both "devEntries" and "prodFilters"
'devEntries' => ['webroot_src/main.ts']
// "prodFilter" filters the entry files. Useful for code-splitting if you don't use dynamic imports
'prodFilter' => 'webroot_src/main.ts' // as string if there's only one option
'prodFilter' => 'main.ts' // also works - only looks for parts of the string
'prodFilter' => ['main.ts'] // as array - same as above with multiple files
'prodFilter' => function (ManifestRecord $record) { /* do something with the record and return true or false */ }
]);