Sector(s)
Team Members
Project Team
also Kiki Wey
In the center of the new developments stood the creation of a platform that allows Sonnen to react swiftly and flexibly to changes. We integrated numerous external services through APIs into the frontend developed with vue.js/nuxt. Various country instances can be managed through separate Drupal installations. This setup enables the rapid creation of both new offerings and multilingual websites and shops for new countries where Sonnen products are available. Each website is based on its independent Drupal "content" backend. The Drupal codebase and configuration are shared among the Drupal instances, with minor configuration differences for language-specific settings. Drupal thus serves as a "Content Hub" for a Nuxt.js-based static website generator.
Media assets such as images and documents are managed for all sites in a centralized and independent Drupal "media" backend. Media entities are synchronized between the media backend and all content backends using JSON:API. Media files (images, image derivatives, documents) are additionally synchronized from the media backend with AWS S3, serving as a CDN.
The decoupled frontend is implemented using Vue.js. A regular build process fetches content from the backends in a custom JSON format, pre-renders the website, and uploads it to the CDN (AWS S3 + Cloudfront). Links to media files are automatically replaced with CDN links to the corresponding files uploaded to AWS S3 by the media backend.
None of the Drupal backends are publicly accessible. Even if they are shut down, the websites continue to run smoothly. The first website based on this JAMstack was launched in March 2019. Currently, the following websites are running on this stack:
About the project
The component-based design of Vue.js elements allows controlled adjustments of the layout and appearance of these elements. The structured counterparts in Drupal—implemented using the Paragraphs module—help determine where the components are used and whether they are affected by the adjustments.
Preview functionality is always a challenging task in decoupled setups. In this project, this challenge was addressed by running a Nuxt.js server instance alongside each content backend. The dynamically generated preview from the Nuxt.js server is embedded in an iframe on the node pages. Additionally, the iframe width can be changed by clicking preset buttons to showcase previews on various screen sizes.
The challenge of sharing the entire code and most of the Drupal content backend configuration for different national websites while allowing variations in settings like activated languages was resolved using the Config Split module.
Performance, reliability, and scalability are ensured by deploying websites and assets through AWS CloudFront. This setup allows configuring regional edge locations to achieve the lowest possible latency for each national website in its specific target region.
The sharing of media between the Media Backend and all Content Backends was implemented using JSON:API and custom tracking modules, enabling the following functionalities:
- Duplicate recognition: no file can be uploaded more than once.
- Information about the use of media in Content Backends is available in the Media Backend.
- External use, meaning outside of the Content Backends, can be registered in the Media Backend.
- Adding media is possible in the Content Backends, automatically synchronizing the media with the Media Backend and from there to all other Content Backends.
- Adding/Updating/Deleting/Translating media entities in the Media Backend and synchronizing the various translation versions only with the languages supported in the respective Content Backends.
- Deleting media entities in the Media Backend is only possible if the media is not used in any Content Backend or externally.
Why Drupal was chosen
The main goal was to create a modern, international corporate presence for Sonnen that seamlessly integrates with external services. Vue.js was chosen for its excellent support of modern component-based website design patterns and its ease of interaction with dynamic external services and APIs. On the backend side, Drupal was the perfect choice as it enables the creation and delivery of structured content that integrates well with frontend components.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
