Download the PHP package passchn/cakephp-vite without Composer
On this page you can find all versions of the php package passchn/cakephp-vite. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package cakephp-vite
ViteHelper plugin for CakePHP 5
The plugin provides a Helper Class for CakePHP to facilitate the use of Vite JS.
When running the Vite dev server, the Helper provides the right script tags for hot module replacement and page reloading.
In production mode, the Helper loads the bundled files. @vitejs/plugin-legacy is supported, which will
insert nomodule-tags for older browsers, e.g. older iOS devices, which do not support js modules.
This readme is for version 1.x. If you are migrating from 0.x and something is unclear, read the Migration guide under
/docs. Feel free to open an issue if you run into problems.
Installation
You can install this plugin into your CakePHP application using composer.
CakePHP Version Map
| CakePHP version | Plugin Version | Branch | min. PHP Version |
|---|---|---|---|
| ^3.10 | / | cake3 | ^7.4 |
| ^4.2 | 0.x | master | ^7.4 |
| ^4.2 | 1.x | master | ^8.0 |
| ^5.0 | 2.x | cake5 | ^8.1 |
The recommended way to install the plugin is:
Load the plugin in your Application.php:
Load the Helper in your AppView.php:
Usage
In your php-layout, include this in your html head:
Just before the closing </body> tag, insert this line:
These are the default view blocks in CakePHP. Lern more about view blocks in the Book.
In your php-template or in layout you can import javascript files with:
… or by using this shortcut for a single entrypoint:
If you imported CSS files inside your JavaScript files, this method automatically appends your css tags to the css view block.
If you don't have any css-entries defined in your vite-config, you can skip the
::css()method call.
In your php-template you can import css files with:
… or by using this shortcut for a single entrypoint:
Configuration
The plugin comes with some default configuration. You may need to change it depending on your setup. Or you might not need any config at all.
You can override some of these config settings through the $options of the helper methods. Or you can pass
your own instance of ViteHelperConfig to a helper method as a second parameter.
You can override the defaults in your app.php, app_local.php, or app_vite.php.
See the plugin's app_vite.php for reference.
Example:
Helper method usage with options
You can pass an $options array to override config or to completely skip the necessity to have a ViteHelper config.
The options are mostly the same for ::script() and ::css().
Example
Note: You need to set devEntries when running the dev server. They have to either be set in the config or
through the helper method. In contrast, you only need files or prodFilter if you are interested in php-side
code-splitting and don't use dynamic imports in js.
It depends on your project and use case how you define entries. If you don't use prodFilter or files, the plugin
will serve all your entry files which might just be the case you want. So don't overconfigure it ;)
Opt out of global config + Plugin development
You can use the helper methods with multiple configurations through the $config argument.
New in version 2.3: You can pass a config key instead of a config instance to the helper. The default config key is
ViteHelper.
This might be useful when using plugin scripts or when developing plugins:
The example above uses a convenience method to load plugin scripts for MyPlugin. DevMode is enabled and the helper
will use a CakePHP config under the key MyPlugin.ViteConfig. In this way, you can scope your App's and your plugin's
config.
It is assumed that the manifest.json is available directly in your plugin's webroot. If this is not the case, you
should define the absolute path throuh the build.manifest config option.
Vite JS bundler / Dev server
Install Vite e.g. via yarn:
It is recommended to add the legacy plugin:
See Scaffolding Your First Vite Project on vitejs.dev for more information.
Configuration
After installing, you will need to refactor the files a bit to make sense of it in a php project. The default config of
this plugin assumes that you put your js, ts, scss etc. in /webroot_src.
The build files will end up in /webroot/assets by default. Your vite.config.js or *.ts file for vite stays in the
project root.
Wanted: Examples for vite/plugin configs and directory structures. Feel free to contribute with a PR to show how your project uses this plugin.
Recommended configuration:
See the example vite.config.ts content here. Note
that the config changes when upgrading to vite version 2.9.0 or higher.
A difference to other dev servers, e.g. webpack or gulp is that you won't access your local site via the port where Vite is serving. This does not work with php.
Therefore, the server.hmr config will enable you to use hot module replacement via the websocket protocol.
The build options define where the bundled js and css will end up. These need to match plugin config.
More about configuring Vite can be found at vitejs.dev/config.
Contributions
You can contribute to this plugin via pull requests. If you run into an error, you can open an issue.
