flydev

Did he hear about GPT ?

Yesterday I received a mail from Vercel about the successor of Webpack, Turbopack. It seem the adventure will continue.. the only bad news (at least for me) is that the tool is coded in Rust, I can't swallow this language... but in term of features it look really promising.

It's all about consuming data provided in your templates from your components. To give you an example with repeater, imagine the navigation is built from a function in the template home.php which return a JSON object with all required page's name, child, id, href, etc.. Now, I want to use a repeater to build the navigation object. I can add a new repeater in the home template and write the code to make the navigation object with a foreach(...) loop. If the object contain more or less the same structure which can already feed the data expected by the Navigation.svelte component, then you do not need to build the site again. You only need to rebuild when you make change in your component(s). Not the template(s) php or backend field's. If you require a site completely static, this setup is not really made for, you could achieve it already by providing all your data from API and coding the static route in your app.

It depend what you mean by "required content", but let's take the structure above again for the example. Day 1, you pushed the site on your Github repo and set your Vercel workflow to build the static assets on commit changes, the site is live. Day 2, you made some markup and JS code change on the component Hero.svelte you commit your change to Github, Vercel build it and if the build is successful, the update is live (I will not go into caching details which in some situation can be very ineffective since vite v2, we are at v4...). The old way of uploading files by FTP or SFTP can do the job too.

A note to myself.. I think a good example could be to build the Skyscrapers demo using this dev stack.

Okay understood. About the dev environment, I must say that it's not intended to change your habits. For example, my usual directory structure of my web folder containing the index.php/site/wire is the following: . └── /var/ └── html └── example.com ├── build/ssr/ssr.js <-- run by NodeJS on the server ├── wwwroot <-- directory sent to server hosting │ ├── site │ │ ├── modules │ │ │ └── ViteJS │ │ ├── assets │ │ │ └── static <-- contain assets built by vite │ │ │ ├── layout.abc123.js │ │ │ ├── home.abc123.js │ │ │ ├── about.abc.123.js │ │ │ └── ... │ │ ├── ... │ │ └── templates │ │ ├── _func.php │ │ ├── home.php │ │ └── about.php │ ├── wire │ ├── index.php │ └── .htaccess ├── src <-- development directory & files │ ├── styles │ │ └── app.scss │ └── js │ ├── components │ │ ├── Button.svelte │ │ ├── Hero.svelte │ │ └── ... │ ├── pages │ │ ├── Home.svelte │ │ ├── About.svelte │ │ └── ... │ ├── app.ts │ └── ssr.js ├── .env ├── package.json ├── vite.config.ts ├── tailwind.config.cjs ├── tsconfig.json └── ... The structure can be tweaked as you want. In this example, I'm using TailwindCSS, and Svelte. When developing, the result in your browser will be refreshed when you will save the modified file (it's called HMR for Hot Module Replacement). The same thing will happen when you will modify your ProcessWire templates files. In dev mode, files are served by the vite's local dev server. About your question about the "autobuild", with Vite you have basically three commands. Take a look at the following scripts section of a package.json file: "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, When you will run `npm run dev` for example, vite will start the development server, the build command will build the production files, and the preview command will start a local server to serve the built production files. You are free to set up any workflow you are interested in, for example like throwing a build on each HMR event (I've given an example about that on stackoverflow, see https://stackoverflow.com/a/69632090/774432). On my side I am mostly working with private servers, but behind the scene the workflow is quite "the same". On my server, I run on closed environment a simple node command `node ../build/ssr/ssr.js` , where eg. on Vercel, you will want to use their Node.js Runtime features through an API. As I said, you can keep your habits in terms of editing content, let them log in ProcessWire backend and filling their body field. The update/preview is just a matter of refreshing or changing page on the site you are working on. The change is dynamic, you are not required to build or commit any change, and as always, you keep the freedom to make only the content you decide to be available - it's a bit , I made you an example on the bottom of the post. I do not use it and I don't remember how it works, but if you can pull data without markup, then all is ✅ even with markup it should work. I will test it. Enregistrement #52.mp4

Thanks @elabx for your input. The first live example1 will be the doc which is built on top of this stack and it will also be released as a profile. I am currently rushing a thing for the work, so I hope to release the module on incoming week-end or at least next week. (you can find one online, built with Svelte, ProcessWire, ThreeJS and shaders as an experiment, but here is not much thing to see as it's not finished 1). What is planed is to release the ProcessWire's Vite module, to publish the NPM package, the doc and the associated profile. There will be also a profile for React and Vue released. I will release it as an alpha-version, but if the stack is used without SSR, like for building a dashboard, it can be considered as STABLE. If some of you want to integrate, eg. Elm or Angular, I will give support for it on request basis. I think that most users already using Vite are aware of getting their framework working, maybe some of them are just confused about the integration into ProcessWire and using his built-in API/pages/templates. Then once the technical article will be online, you will get the idea of how to integrate Vite or other bundler easily in PW or even other pieces of software. Wordpress what ? ? (you can get deeper on the request, I don't get it ? )

Interesting, again.. Since when ? Is "current MacOS" == Ventura, correct? is the problem worse than before? ? Did you enabled ddev mutagen or not ? Is this a typo ? Just asking because default value are: ; Default Value: 100 ; Development Value: 1000 ; Production Value: 1000 Making garbage collector chance jumping from 1% to 0,001%. It could be a hint as it can mean you are overriding things somewhere. Also, take into account that if the gc is misconfigured, it will impact DB session. A dump of phpinfo() would not be too much here to help. Depending on the second question above, did you enabled a caching mechanism? For example (it's just to illustrate) on a production site behind Cloudflare, without a proper configuration, you will end up logged out on every click click. Another thing should be to check the logs of php-fpm with journalctl.

@Sara Which module was the culprit?

// init.php $wire->addHook('/webhook', function ($event) { // http_response_code(403); // or header('HTTP/1.1 403 Forbidden', true, 403); // no exit, apply server logic $event->return = true; }); // ready.php $wire->addHook('/webhook', function ($event) { $this->log->save('webhook', $event->return); // exit(); }); C:\Users\flydev>curl -I -L --insecure https://xx-xx-xx-xx.ngrok.app/webhook HTTP/1.1 403 Forbidden Alt-Svc: h3=":443"; ma=2592000 Cache-Control: no-store, no-cache, must-revalidate Cache-Status: Souin; fwd=uri-miss; key=https-/webhook--; detail=UNCACHEABLE-STATUS-CODE Content-Length: 0 Content-Type: text/html; charset=utf-8 Date: Thu, 27 Apr 2023 14:59:36 GMT Expires: Thu, 19 Nov 1981 08:52:00 GMT Ngrok-Trace-Id: b2213e4460d4a73821ac2041f312d8d9 Pragma: no-cache Server: Caddy Set-Cookie: wires=s106arh77i4f9ot1jeh7bvged6; path=/; secure; HttpOnly; SameSite=Lax Status: 403 Forbidden X-Powered-By: ProcessWire CMS Reverse output: Connections ttl opn rt1 rt5 p50 p90 15 0 0.01 0.02 90.35 151.65 HTTP Requests ------------- HEAD /webhook 403 Forbidden GET /webhook 403 Forbidden Tracy dump: ProcessWire\HookEvent data: array 'object' => ProcessWire\ProcessPageView 'method' => 'pathHooks' 'arguments' => array 0 => '/webhook' 1 => true 'path' => '/webhook' 'return' => true <=== $event->return 'replace' => false 'options' => array 'id' => 'ProcessPageView:100.0:pathHooks' 'cancelHooks' => false 'when' => 'after'

Steve, I just tested pusher webhook with a URL Hook, I can get the 403 error code, and the $event->return as true from a chained hook. The 403 code is thrown with header('HTTP/1.1 403 Forbidden', true, 403); I am forcing params as it could be interpreted differently on web-server basis. Tested on pw 3.0.199-dev.

Hi, it seem to me that the issue is the strategy used to generate the static page, but I can be wrong, could you elaborate a bit more ? It is required to build the static page on the save page event, and by an user ? What about, for example, if in the backend you set a template which serve as a sort of configuration and when saving the page, a background process is throwed ? From which type of server the generation of static pages are done ?

Just finished to watch it! Great job @bernhard ????

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 ? ?

Just adding that if you use a fallback operator in your selectors like `~|=` the last three tests in your code should get a result.

It seem the field doesn't take care of that by default, but you can display the same fields/format by selectionning `Custom format` on the `Label fields` setting and applying the `Custom page label format` value. A hook is certainly possible and would be more versatile, it depend on how your are using the field ref.

@Ivan Gretsky do you mean to have vite / tailwindcss working on dev setup and generate your tailwindcss theme files to be used on prod ? If yes, that's not a problem and I can make you an example. If not, please explain what you mean by "have vite as a standalone executable" , I don't get it ? ps: The setup shown on the initial post use TailwindCSS.

Ignoring it. Optionally reporting it on github issue. It's just a deprecation warning, not an error.

There are some vote on this, please say more, which one ? ?

A bit late to the party. It happened to me years ago and I can remember it was an issue with DNS. You don't give lot of details, but you can try the following: adding your hostname in the hosts system file Open a terminal, and: get your hostname > type `hostname` and take a note of the result add it to your hosts file > type `sudo nano /etc/hosts` and add the following 127.0.0.1 localhost YourHostname.local ::1 localhost YourHostname.local 3. Clear the DNS cache > type `sudo killall -HUP mDNSResponder;say DNS cache flushed` Now, test your backend.

Short answer as I'm slumped on the couch. It seem you already read the structure documentation page and got the idea. About explaining the concept to the client, just use a real analogy. For example, think of a website as a book. In a book, you have chapters, sections, and pages. Similarly, a website is organized into sections, and each section contains individual pages that hold different pieces of content. In ProcessWire, a "page" is a container that holds all the data and content for a specific part of your website. It's not limited to what you see on the front-end as a traditional webpage. Instead, a page in ProcessWire can represent various types of content or data, such as blog posts, products, images, or contact forms. Once that said, and once you got the « Wow this is flexible! » then you can go further and say that using this tool (some of us call it a framework more than a simple CMS) allow you to build other types of applications than a website. I mean no frontend, no colors, no (web)Pages. You can find somes use case threads arround the forum. Ask for more. Just adding that once your clients become familiar with the page-based concept and the benefits of it, they will find it easier to manage their website content. Enjoy ?

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! ?

In any case, it has not stopped since 2020, it is rather worse. Time to put a captcha thing maybe.

Another option could be copy/paste the core ProcessModule inside site/module (it could be patched on ProcessWire version upgrade, if needed, automatically). Maybe @Robin S will have a clearer idea.