My first post, how exciting!
I'm Chris and my main "title" is a Senior Front End Developer for Isobar Australia in Melbourne but I'm also an aspiring AEM developer.
Background
Since my first encounter with AEM (Adobe Experience Manager), I have always been frustrated to a certain degree with the lack of modern integration points for front end developers.
Within Isobar I have been working on a project that we call Compose which aimed to bring webpack to our clients, but without needing to invest heaps of development time.
A problem
Development time was still required... 😢
The unfortunate reality of webpack is as you go through time updates get more frequent and harder to keep up with and this became especially true when webpack 5 joined in on the fun.
Providing a technology platform that front end developers can just git clone and use is difficult and requires a number of additional plugins which comes at a high tech debt cost which clients is hard to sell to clients.
The solution
Use something that isn't webpack but provides modern capability!?
An obvious choice would have been snowpack but I'm not familiar enough with it.
Lucky for me Even You announced Vite back in February.
Vite ⚡@vite_js
npm init @vitejs/app20:38 PM - 01 Feb 2021
Up until around mid-March I didn't really play around with Vite, I wish I tried it out sooner.
Another problem
After using Vite for around a week I knew it was perfect for AEM but ran into a roadblock; how do I integrate this into AEM?
Another solution
I solved it quite simply, I built something from scratch to suit my needs first.
AEM Vite was born in early April, but the exact date is debatable as I moved things around before going to GitHub.
How does AEM Vite work
AEM Vite uses a Sling Filter which intercepts and parses requests using an allowed list of content paths.
By design, it uses an opt-in approach to not interrupt or slow things down during normal development.
When a valid request path is detected, project-defined configurations will be iterated on which automatically detects when the Vite DevServer is running. Upon detecting the DevServer, any ClientLibs you define will get stripped from the page and DevServer client code will get injected allowing for a completely transparent workflow.
The coolest part, stopping the DevServer automatically reloads your tab and your ClientLibs return to the page as normal.
Making front end development in AEM fun again
As mentioned earlier, this all came about because of my own personal frustrations. A key goal of mine was to share something with other amazing developers so they too bring some freshness to their development workflows without the need of working all of this craziness out for themselves.
In closing
I learned a lot, I suffered through late nights after work and on weekends to get features working, but it all paid off in the end.
AEM Vite is my way of showcasing that front end technologies belong in the enterprise space, it just takes some time and effort and a little love ❤️.
Check it out today at aemvite.dev.
Top comments (0)