Frontend/Theming¶
Currently the module includes the CommerceDemo
demo theme which is used in the preview url and to develop locally.
It's built using an modern and productive stack:
- Tailwind CSS, a highly customisable CSS framework which can be used directly in your HTML. No more heavy CSS!
- Alpine.js, a lightweight tool for progressive enhancement. Sprinkle some javascript on our Twig templates.
- Vite, a lightning fast build tool ⚡. Only needs a
vite.config.js
file, less complex than Webpack. - Typescript
The demo theme uses a few dependencies. We try to avoid jQuery and go for lightweight, vanilla JS libraries. E.g.
- Algolia Autocomplete.js which provides a simple way to create a very powerful search box.
- Splide, a lightweight slider and carousel written in pure Javascript without any dependencies.
- Notyf, a simple, minimalistic, dependency-free, ~ 3KB Javascript library for toast notifications.
- Photoswipe a vanilla Javascript lightbox/image gallery without dependencies.
Run Vite dev server with HMR¶
When we edit our .html.twig, .ts or .css files, we would like to instantly see the changes. Start the frontend dev server with:
cd src/Frontend/Themes/CommerceDemo
npm run dev
This will start up Vite in watch-mode, and also output Typescript errors in the console.
The vite_entry_link_tags
and vite_entry_script_tags
Twig tags in Base.html.twig
will check if the dev server is running and output the appropriate tags.
Read more about the Vite & Fork CMS integration at https://github.com/jessedobbelaere/fork-cms-vite-boilerplate