vite Integrating ViteJS with ProcessWire for Modern Web Development

[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! 🥷

[flydev]

Quote

Others

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

[Ivan Gretsky]

I still use jquery a lot and started to use alpinejs. Tailwind also has js part that could be run with vite.

My best wish was to have vite as a standalone executable so it could be run on a prod. Not sure if it is even possible.

[flydev]

@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.

[fuzenco]

Sad to see HTMX not listed as a front runner. HTMX all the way. It’s philosophy fits right in with ProcessWire.

[zoeck]

46 minutes ago, fuzenco said:

Sad to see HTMX not listed as a front runner. HTMX all the way. It’s philosophy fits right in with ProcessWire.

I am currently switching from HTMX to Vuejs with Processwire as the backend. But this will also be more a SPA 😄 

I am positively surprised by Vue….

[flydev]

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

 

 

[elabx]

On 4/11/2023 at 7:50 AM, flydev said:

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?

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. 

[flydev]

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.

  

2 hours ago, elabx said:

maybe wordpress example

Wordpress what ? 🤣 

(you can get deeper on the request, I don't get it 😉 )

 

 

[elabx]

15 minutes ago, flydev said:

Wordpress what ? 🤣 

🤣

8 minutes ago, flydev said:

(you can get deeper on the request, I don't get it 😉 )

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. 

13 minutes ago, flydev said:

What is planed is to release the ProcessWire's Vite module, to publish the NPM package, the doc and the associated profile.

Sounds exciting! 

On 4/11/2023 at 7:50 AM, flydev said:

And pheww, I am quite happy! 🥷

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!

[flydev]

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).

 

5 hours ago, elabx said:

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?

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.

5 hours ago, elabx said:

Do you deploy processwire somewhere to have online editors and if so, how do editors handle update/preview?

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.

5 hours ago, elabx said:

Do you use FormBuilder? And if so, do you use it with this SSR rendered approach?

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.

 

 

[flydev]

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

[elabx]

Very very very interesting!!! @flydev

Really appreciate your time put into this answer. 

19 hours ago, flydev said:

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.

The running SSR app generates it's own static stuff if the update in the content requires it, am I assessing this right? 

On 4/11/2023 at 7:50 AM, flydev said:

let me know if you're interested in more tutorials and resources on this topic, like profiles, themes.

I'd love to test an example! Let me know if also I could be of any help. 

[flydev]

54 minutes ago, elabx said:

The running SSR app generates it's own static stuff if the update in the content requires it, am I assessing this right? 

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.

[elabx]

10 minutes ago, flydev said:

It depend what you mean by "required content",

With this I mean edits in a CKEditor, or added a repeater item that update some content in the form of a list. Is "npm run build" ran after updating this content? Do this updated trigger a "rebuild workflow" (for example for Vercel) so that the site is completely statically generated?

[flydev]

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.

[elabx]

10 hours ago, flydev said:

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.

Ok got it!! I understand it all a lot better now, thanks!

[flydev]

On 5/1/2023 at 6:16 PM, elabx said:

I do have enjoyed working with more frontend tooling,

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.