JayGee

We've long wanted a way to utilise a CDN to offload images/files/videos from ProcessWire sites without losing all the native greatness of ProcessWire image and file field types. Having read various discussions on here about ways to approach this that never seemed to reach conclusion, I've thrown myself into creating a module that allows offloading of files to Bunny.net CDN as we need a solution for a specific project. I think this would be easily adaptable to any S3 compatible CDN but I've only tested on Bunny. ⚠️ This is still very beta! Use at your own risk! I've been conducting basic testing and so far, so good but there's bound to be holes or things that others may suggest better ways of doing. But I'm now at a stage where the insight/experience of the PW community might add value to the project - so I'm sharing now! Full disclosure: Once past the initial project scaffolding I've been using AI/careful prompting to write some of the code so that I can arrive at a prototype as quickly as possible. This seems to have worked well, although some of the code looks a little verbose and could probably be refactored later on. Also not security/pen-tested yet. https://github.com/warp-design/WireBunnyCdn/ Features: Automatically uploads images to Bunny storage on page save, including all variants and mirrors assets folder structure for simple merging back to local at a later date if needed. Automatically cleanses deleted files (or files from deleted pages) from your CDN. Option to mirror files to CDN or delete local copies (this is the main aim for me, otherwise we could just use ProCache). Handles (basic currently) image sizing - either using standard ProcessWire `$image->size(X,X)` methods or by implementing Bunny Optimizer for sizing using URL params. Rewrites image paths via CDN so that you can use standard `$page->imageField->url` calls with the output being a Bunny path rather than local PW path. Also handles the image previews in admin view. Roadmap: Support for video uploads (with optional separate CDN endpoint for Bunny Stream buckets). Support for front-end video output to templates using Bunny stream players/optimisation etc. Implement chunked/background uploads for large files. Support for other size() method options, like cropping etc and mapping to Bunny Optimizer equivalents. Anyway - look forward to hearing any advice/feedback/bug reports... I'm sure there's many!

I absolutely love URL hooks and have used them extensively since they were introduced. I don't know if I'm alone in this, but the only thing that bugs me about how they work is when they conflict with URL segments in templates (especially if you have URL segments enabled on the home page, e.g in an SPA type scenario). IMO it would be great if URL hooks could have an extra bool parameter to set whether or not they take precedence over URL segments. E.g. $wire->addHook('/stripe/{route}', function($event) { switch ($event->route) { //CASES GO HERE default: throw new Wire404Exception(); return; } }, true); //<------ option here A number of times I've run into scenarios that require workarounds (or manually naming URL segments) to avoid conflict with home pages with URL segments which wouldn't be necessary if we could just instruct the hook to kick in before URL segments. Obviously this would need to be opt-in and at developer risk. I hate to be that guy that's always tagging you into threads @ryan.... but I'm guessing I may be overlooking a logical reason why this is a bad idea or that this doesn't exist?!

Hi @jploch, Great work on the redesign so far. I don't think it has been asked yet, but just wondering if any of the design changes are being applied to the frontend editing UI or is any particular details being looked at on this?

Hi @FireWire sorry for the delay I was away last week. That all makes sense. And it's definitely not mission critical so no worries there, just thought you would like to know. If I get to it first I will see if I can figure out where the issue lies. My hunch is it could be as simple as needing to use hx-swap for each step of the form, whereas as the moment I think it's appending the code. Obviously would need testing though as I'm not sure if the form/validation logic would break if parts of the overall form logic suddenly disappear from the page. I think once this is resolved though, HTMX + multi-step formBuilder forms is a winning combo, adding real-time validation for fields without reloading!

Hi @FireWire Loving this module thanks. Run into one issue I don't know if you're aware of. It seems to break when using page breaks in the form. When you use the forward/back buttons it nests a new copy of the form inside itself. Have you come across this? (I'm also using MarkUp Regions if that could be related).

Hi Chris, Thanks for your input. We were also concerned about cumulative layout shift - but I think this can be fixed by setting heights on placeholders etc. We were focussed only on solving the immediate problem in hand... bots!! I've also thought we could have a dummy form with the same fields etc but no logic/action and switch them out following validation. FWIW it seems to be working so far too 🤞. In terms of UX - yes we were unsure if this was really the 'right thing' to do - but in my opinion it's not to dissimilar in approach to Cloudflare's standard bot mitigation approach where the whole page is prevented from rendering. I think for ease and speed of deployment to address specific issues, the trade-offs are worth it. We'll keep this forked as a separate module for the moment.

There’s not a huge amount to tell (currently), we’re using it in a very simple way. So if a client needs a lot of video on their site we’ll provision a library for their site in our Bunny account rather than using Yotube embeds (or similar). We then embed videos to the site using a ‘video block’ in repeater matrix with the video loaded by its Bunny ID. Specifically we use Bunny’s stream platform which provides encoding to multiple formats/resolutions/sizes for different devices, analytics, geolocation options, customisable player etc and then optimised delivery to the site visitor. At the moment video upload is manual via their dashboard, however they have a full upload API hence the plan to explore doing this via a module soon. They do provide things like edge caching, DNS and a standard CDN too (I believe Stream is built on top of their CDN) which I why I think it could be used with ProCache. I’m just not sure if you go down this route how you simultaneously achieve the benefits of the stream player etc - I still need to test this to determine if a separate module is needed or not.

We use Bunny CDN for an increasing number of projects - it’s cheap and reliable. Planning on making a module when I get a chance too to enable upload to their CDN from inside ProcessWire. Although I think this may already be possible via ProCache - not had a chance to check yet though.

Is the issue with MAMP itself or your website? Can you dump out php errors? I’m using latest MAMP + ProcessWire without issue.

Hi @adrian I just wanted to share that this problem came up again today and I found a working resolution without needing to modify your module. We installed your module and enabled protection from the home page settings and checked to cover all children (essentially enabled site wide). We then moved the webhook APIs to a module using the URL hooks (hooked via init()) which allows them to bypass the site protection without unprotecting the rest of the site. 🙌 I thought I'd share in case this is of use for anyone else in the same situation.

Hi all, I've been doing some work to extend this great module created by @nbcommunication to meet a specific need we have. This is very much as-yet untested in production, but I wanted to share it here now anyway in case anyone wants to point out any flaws in the logic, try out the changes or suggest improvements before we push it to any live sites or make a PR to NB. The challenge: We manage a number of sites where we would like to get forms behind Turnstile. But in many cases these forms are connected to or hosted by third-party CRMs/Email marketing platforms etc which makes integrating Turnstile tricky and time consuming. The proposed solution: Rather than modifying a plethora of different third-party form integrations 1-by-1 and verifying submissions with Cloudflare on submit, we'll remove the forms from the DOM and only render them once Turnstile verifies the site visitor. As mentioned this is as-yet untested so I've no idea how robust this will be against bots and scrapers, but it seems worth trying IMO! In case people are wondering why we wouldn't use Cloudflare's other bot mitigation tools - we don't control all site's DNS and not all sites run behind Cloudflare. Turnstile works regardless of whether the site uses Cloudflare nameservers. The approach: I've modified the Turnstile module with a few new methods to do the following: Utilises @ryan's awesome URL hooks to create some endpoints to handle Turnstile token verification and: Dynamic loading of HTML render files into a page only once the token is verified. Use of data-attributes in page elements to specify the target location and file for rendering. Forked branch available here: https://github.com/warp-design/MarkupCloudflareTurnstile/tree/feature-protect-content-turnstile All probably best illustrated visually: Example page structure using a mix of the existing module methods and the new ones: <body> <?php //Load module in page $captcha = $modules->get('MarkupCloudflareTurnstile'); ?> <!-- Existing module widget render call. Set inside #turnstile-container to auto hide turnstile after verification --> <div id="turnstile-container"> <?= $captcha->render(); ?> </div> <!-- Elements you wish to protect with Turnstile. Set data attribute with render file path, relative to templates folder. There divs will populate with the specified render files when Turnstile verifies. --> <div class="turnstile_content" data-render-path="inc/exampleForm"></div> <div class="turnstile_content" data-render-path="inc/exampleContent"></div> <!-- New method to load the scripts if you want to protect dom elements behind Turnstile --> <?= $captcha->renderProtectedContent(); ?> <!--Existing module script call--> <?= $captcha->getScript(); ?> </body> And how this page looks live. Note: .turnstile_content elements only populate when Turnstile is verified: Test - 11 December 2024 - Watch Video Let me know what you think - is this a workable approach, or am I overlooking pitfalls? Likely issues/TODOs you may encounter: Things may need more sanitization and better error handling to come out during testing. Not sure how this will behave when loading in external JS. I've tried to ensure it will initialise any scripts in the render files when they are loaded. In theory things shouldn't be too different to loading content with frameworks or something like HTMX. Would be nice to eventually add support for passings $vars and $options params to the render files like any other PW template call. Someone may have already implemented the above in another module and I hadn't noticed! 😅

Nice thanks @bernhard - never realised it was that simple.

I'm building a custom module for project that will leverage LazyCron. I can't seem to find how you tell your module that LazyCron is required? I've tried adding the following to my getModuleInfo() 'requires' => [ 'LazyCron' ], and have also tried adding the following that ChatGPT suggested... but not sure if it has made up this syntax as I've not seen it before?! 'requires' => [ 'ProcessWire:LazyCron' ], Either way I get the error: ProcessModule: Error reported by web service: That module is not currently tracked by the modules directory In an ideal world I'd just enable the core module from my own module, is this possible?

Thanks @adrian for confirming I wasn't overlooking something obvious at least! The use case was to protect a staging site but allow certain routes for webhooks/APIs etc. Have worked around it for the moment using basic auth at server level, but it would be a handy feature. Will add it to the backlog and have a look at forking it and making a mod when get some time 🙂

Hi @adrian - just wondering with your module is there a way to configure the whole site to be protected, but to exclude one particular page from protection? I can't see a way to do this without having to configure every page 1 by 1, unless I'm missing a trick?