PHPackages                             dakujem/peat - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. dakujem/peat

ActiveLibrary[Utility & Helpers](/categories/utility)

dakujem/peat
============

PHP-Vite.js bridging tool, framework-agnostic

1.1(10mo ago)2122[1 issues](https://github.com/dakujem/peat/issues)1UnlicensePHPPHP ^7.4 || ^8CI passing

Since Apr 16Pushed 4mo ago1 watchersCompare

[ Source](https://github.com/dakujem/peat)[ Packagist](https://packagist.org/packages/dakujem/peat)[ RSS](/packages/dakujem-peat/feed)WikiDiscussions trunk Synced 1mo ago

READMEChangelog (5)Dependencies (3)Versions (9)Used By (1)

Peat
====

[](#peat)

[![PHP from Packagist](https://camo.githubusercontent.com/b89e1466353d15de2ef9180172607e9cf01d2b8b453017e2668477ee0c896a0b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f64616b756a656d2f70656174)](https://camo.githubusercontent.com/b89e1466353d15de2ef9180172607e9cf01d2b8b453017e2668477ee0c896a0b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f64616b756a656d2f70656174)[![Test Suite](https://github.com/dakujem/peat/actions/workflows/php-test.yml/badge.svg)](https://github.com/dakujem/peat/actions/workflows/php-test.yml)[![Coverage Status](https://camo.githubusercontent.com/889da59192831115fee349b793caed08b41b6a7a73b504dc8615d7ba7005a210/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f64616b756a656d2f706561742f62616467652e7376673f6272616e63683d666561742f6672696374696f6e2d72656475636572)](https://coveralls.io/github/dakujem/peat?branch=feat/friction-reducer)

PHP-Vite bridge building tool, for any framework.

> 💿 `composer require dakujem/peat`

This tool helps integrate Vite-bundled JS apps into PHP-served web pages.

It provides a way to generate `` and `` tags to desired assets.

Vite
----

[](#vite)

Vite (a.k.a. Vite.js) consists of 2 parts:

- a *development server*
- and a *bundler*.

To integrate a JS app with a backend, the backend must output snippets like these:

- compiled static files from a *bundle* (production) ```

    ```
- links to files served by the Vite *development server*```

    ```

For the best development experience, we only want to deal with `main.js` as the entry point of the JS app in both cases.
Ideally, we want to achieve something like the following:

```

  {{ vite('main.js') }}
```

To achieve this, Peat parses the *manifest* JSON file generated by Vite for each bundle.
In development, we simply serve the entrypoint (along with `@vite/client` supporting library), and the browser will load the rest of the files as ES modules.

### Vite configuration

[](#vite-configuration)

Vite (`vite.config.js`) must be configured to output a *manifest* file and override the default entrypoint:

- `build.manifest` MUST be set to `true`
- `build.rollupOptions.input` SHOULD point to the `main.js` (or other JS entrypoint)

More info in the [Vite's Backend integration guide](https://vitejs.dev/guide/backend-integration.html).

> 💡
>
> You may also want to set `build.outDir` to point to a subfolder in the backend's public dir, so that you don't have to move the build files manually after each build.

### Troubleshooting configuration

[](#troubleshooting-configuration)

The simplest way to test if the configuration works is by dropping these snippets into your PHP-served HTML templates and observing the output.

Start the development servers (both Vite `npm run serve` and PHP),
then drop this into the HTML template:

```