search

leepeuker / movary

Self hosted web app to track and rate your watched movies
MIT License
388 stars 14 forks source link

First attempt at integrating Vite + NPM #566

Closed JVT038 closed 7 months ago

JVT038 commented 7 months ago

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 (in src/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:

Generated an empty chunk: "js\settings-integration-letterboxd".
Generated an empty chunk: "js\settings-account-dashboard".

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.

JVT038 commented 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.