Closed JVT038 closed 7 months ago
After trying some new stuff, I have concluded that integrating Vite and NPM with baremetal PHP applications like Movary is not feasible. While it would be nice to have a proper package manager and to bundle our static assets, Movary is a SSR application and without proper support from a third library (such as Laravel / Inertia), it's not really possible to communicate properly between Vite and the PHP backend. Especially not with Rollup's treeshaking that doesn't know which JS functions are used in the Twig templates.
Instructions
To use this PR, install NPM and Node.JS and run
npm install
.To run the Vite dev server:
npm run dev
.To build the assets:
npm run build
.Rambling
This PR is smaller than it would seem, because
package-lock.json
is like 5.500 lines or something.Anyway, our static assets (meaning javascript, css, fonts, and the default images such as logo) are all compiled and bundled in the directory
/public/build/
. Additionally, some libraries (such as bootstrap and jquery) will be compiled, minified, compressed and put in the build directory as well.I have added a new Twig function which can be seen in action in
base.html.twig
. This is the new Vite function ({{ vite('js/myfile.js') }}
) and it's processed by the Vite helper (insrc/Util/Vite.php
). The Vite helper returns the HTML tags (such as<script>
, `, etc.) with the correct URLs that either points to a running Vite dev server or the compiled Vite asset.The nice thing about adding Vite isn't even the compression and bundling of the static assets, but rather the fact that we can now use a proper package manager for the external JS libraries, allowing us to stop including minified JS / CSS files. Upgrading the packages should be much easier from now on.
There are currently still some weird bugs, such as javascript files not being compressed properly, resulting in literally empty compressed files. This is the CLI result:
Those files are literally empty, so letterboxd and dashboard account settings don't work right now. Additionally, other pages (such as Jellyfin settings) don't work either due to the compression. Why is this? I've got no idea.