https://github.com/decodelabs/zest
Vite front end dev environment integration for PHP
https://github.com/decodelabs/zest
front-end php vite
Last synced: 3 months ago
JSON representation
Vite front end dev environment integration for PHP
- Host: GitHub
- URL: https://github.com/decodelabs/zest
- Owner: decodelabs
- License: mit
- Created: 2022-11-22T08:36:36.000Z (over 2 years ago)
- Default Branch: develop
- Last Pushed: 2025-04-14T08:50:30.000Z (3 months ago)
- Last Synced: 2025-04-15T14:07:04.122Z (3 months ago)
- Topics: front-end, php, vite
- Language: PHP
- Homepage:
- Size: 111 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Zest
[](https://packagist.org/packages/decodelabs/zest)
[](https://packagist.org/packages/decodelabs/zest)
[](https://packagist.org/packages/decodelabs/zest)
[](https://github.com/decodelabs/zest/actions/workflows/integrate.yml)
[](https://github.com/phpstan/phpstan)
[](https://packagist.org/packages/decodelabs/zest)
### Vite front end dev environment integration
Zest provides a simplified and opinionated PHP oriented entry point to the Vite development environment.
---
## Installation
Install via Composer:
```bash
composer require decodelabs/zest
```
## Usage
Zest aims to provide a simple automated way to integrate the [Vite](https://vitejs.dev/) dev server into your PHP application.
All terminal commands assume you have [Effigy](https://github.com/decodelabs/effigy) installed and working.
```bash
cd my-project
effigy zest init
```
This command will initialise a Vite config file, install everything you initially need in a package.json file and run the dev server. `ctrl+c` to quit the server.
From then on:
```bash
# Run the dev server
effigy zest dev
# Or build the static files
effigy zest build
```
Build will trigger automatically when the dev server is closed.
### Existing projects
If installing in an existing vite project, make sure to install the Zest plugin:
```bash
npm install -D @decodelabs/vite-plugin-zest
```
Then add it to your Vite config:
```javascript
import zest from '@decodelabs/vite-plugin-zest'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
zest({
buildOnExit: true
})
],
})
```
### View consumption
To make use of Zest, you will need to consume the generated assets from the manifest in your views.
As it stands, there are no pre-built view adapters (there are many different view libraries out there!!), however you can adapt the one you use like this:
```php
use DecodeLabs\Monarch;
use DecodeLabs\Zest\Manifest;
class ViewPlugin {
public function apply(View $view): void {
$manifest = Manifest::load(
Monarch::$paths->root . '/my-theme/manifest.json'
);
foreach ($manifest->getCssData() as $file => $attr) {
/**
* @var string $file - path to file
* @var array $attr - array of tag attributes
*/
$view->addCss($file, $attr);
}
foreach ($manifest->getHeadJsData() as $file => $attr) {
$view->addHeadJs($file, $attr);
}
foreach ($manifest->getBodyJsData() as $file => $attr) {
$view->addFootJs($file, $attr);
}
if ($manifest->isHot()) {
$view->addBodyClass('zest-dev preload');
}
}
}
```
## Licensing
Zest is licensed under the MIT License. See [LICENSE](./LICENSE) for the full license text.