Leaderboard

Thank you all very much for your suggestions for further research; I am consistently amazed by the high quality of responses here, as well as the high signal-to-noise ratio! I owe you an update: As I mockingly predicted to myself, the mere act of writing the OP seems to have fixed the problem. Of course, I know this *isn’t* really true, but in truth I have not been unexpectedly logged out even once since I posted here two days ago — astonishing, given that I’d gotten logged out at least 25 or 30 times in the two or three hours leading up to my post. In a perfect world, I would hunt this down ASAP *before* it bites me again. Pragmatically, though, I have to admit that I’m on deadline and there are more immediately pressing concerns. Again, I am very grateful for all of the various pointed questions; they will be the first place I turn when the problem returns. And I promise to update the thread with more info when that happens! In the meantime, thank you, @Jonathan Lahijani, @bernhard, & @flydev!

Hi, I had integrated ViteJS a year ago or a bit more, it could be used to build for example a dashboard, or even a website, but the main issue I faced was to make Server Side Rendering working with all the setup to be able to get better SEO/ranking. That's said, SSR code was done this morning 🎉🎉 The test below was made on a non optimized Caddy setup on Windows with sad php-fpm. I built a javascript package which will be published on NPM to give you a smooth experience to integrate Vite into ProcessWire. I have to build a ProcessWire module to make thing even easier instead of putting some file in our template dir, that will be made asap as it doesn't require lot of work. It's also shipped with InertiaJS which I find no point of not using it, but could be used without it. Everything can work with Svelte Framework (I am a big fan of it, I feel like coding web on the 2k years), React work also, and Vue should work without hassle as any other frameworks/libraries. Just saying, but his one I think will not be much of interest for you, I also built a solution which replace Electron for building desktop application based on native code (Pascal) and JavaScript bindings, where ProcessWire is used as headless cms (I think I had already spoke about it in some threads), it could be used as is without the need to put your hand in native code. I'm curious to hear what others in the ProcessWire community think about using ViteJS for your development. Have you tried it before? What has your experience been like? Please share your thoughts and feedback in the comments, and feel free to vote in the poll below to let me know if you're interested in more tutorials and resources on this topic, like profiles, themes. And pheww, I am quite happy! 🥷

🤣 Sorry for the lack of clarity! What I meant was, how to setup a development environment using vite, but assuming the development will be along the normal PHP server rendered website, with webserver+php. So, I'd love to know if it's possible to be able to have autorefresh in local development, or auto build of the static assets on watch in this "traditional" setup. I mentioned Wordpress because I feel is common to find already existing examples using Wordpress, which I've found to be a good starting point to adapting it to ProcessWire. Sounds exciting! Your opinion also intrigues me! haha. I do have enjoyed working with more frontend tooling, it used to be a bit more painful. But it "clicked" on me when i built that small js widget I mention. A couple questions: How do you deploy your SSR projects? Do you use something like vercel/netlify/cloudflarepages? I feel this hosting solutions are a nice reason to go SSR? Do you deploy processwire somewhere to have online editors and if so, how do editors handle update/preview? Do you use FormBuilder? And if so, do you use it with this SSR rendered approach? Thanks for this effort and your time answering!

I've used in in a couple projects and it's the "npm build thingy" (sorry i don't even know it's exact classification!) that has given me less pain points. One for a "js widget" built in Svelte (using PW as an endpoint only) and another one for a simple static website with just uikit loaded as dependency (no PW). So both very small projects, but sort of different in their purpose and both experiences were swift to get it to work! So yeah, I do like Vite haha, I feel it's quickly turning into my goto thing as far as frontend tooling goes, which used to be close to non existent. Off-topic request: It'd be rad if you could point to a repo (maybe wordpress example that could be adapted?) with a Vite setup with the regular rendering pipeline of ProcessWire, setting up the proxy for the dev server, whatever other nice thingy could be done, etc.

The method proposed by @ryan here isn't bad, but it doesn't allow nested fragments. In the case of complex views (web apps, calculators, etc.) with different user actions where several calls are needed for different sections of the page, and we (almost always) need fragments that are inside larger fragments. I'm currently working on my first Processwire module, which can help to use these fragment-based systems. I've been implementing several methods, and only one of them prevents the entire content of the template file from being rendered. It works but requires some conditions, ex. in the case of a single template file with markup regions, you should organize your code to put the creation of all content variables at the beginning of the file and completely separate from the output HTML markup. The idea is that during rendering it collects the requested fragments from the template file and saves them to a temporary PHP file, then includes it in the template file at the point before full HTML output occurs, and then stop the rendering the template file. It's basically like a dynamic partial. The advantage is that you don't need to split the template files into several parts (nested fragments will be a nightmare) and avoid to put a lot of conditionals in the code. It also helps that if you have a new type of request, you only need to declare in the request which parts of the page to fetch. @elabx if you're interested, I have a Hook version of this that I used during testing. Note: It would be great if the Render method, in addition to the current template file, would also accept an HTML string. This avoid the use of temporal files.

HTMX is not listed because HTMX is a different tool and do not require ViteJS which is a build tool and development server that focuses on providing a fast development experience using features like native ES modules, hot module replacement, and optimized production builds, and if it was, you could say I am quite confused. But I can say they can be used together in certain scenarios and we could start another thread with constructives and interestings discussions, sharing each other experiences. It's really about how you use ProcessWire, and differents topics, like flexibility, complexity and requirements of what you need to build the final product. I really understand why a developer take the way of HTMX's for a simple and dynamic website or even web-app without the need for JavaScript frameworks, it's not new, we used ajax 20 years ago, it's funny. To give an example of why I am personally using a frameworks like Svelte, and ViteJS to build the thing, is that I need to consume JSON data and not HTML fragment to interact with other native apps. And in a complex scenario, the benefits of Svelte's component-based architecture, reactive programming model, and offline capabilities outweigh the simplicity offered by HTMX. Again, this is really a question of requirements more than anything else. Another little example, if was using HTMX in my pages written in Pascal, this will quickly turns into a huge mess. What I could add as a bonus for HTMX, it will level up the level of frontends devs on a team. All that said, HTMX is out of topic here 🙂 🙂